Friday, June 15, 2018

Bootstrap என்பது என்ன? bootstrap மூலம் டேபிளை எவ்வாறு அழகுபடுத்துவது?



பூட்ஸ்ட்ராப் என்பது html,css, javascript ஆகியவற்றின் ஃப்ரேம் வொர்க் ஆகும். இது ரெஸ்பான்சிவ் மற்றும் மொபைல் ஃப்ரண்ட்லி வெப்தளங்களை உருவாக்கப்பயன்படுகின்றது. ரெஸ்பான்ஸிவ் என்றால் பார்வையிடும் சாதனங்களுக்கு ஏற்றாற் போல் அதன் நீள அகலங்களை மாற்றி அமைத்துக் கொள்ளும் தன்மையடையதாகும். இதை கட்டணம் ஏதுமின்றி இணையத்திலிருந்து பதிவிரக்கி உபயோகித்துக்  கொள்ளலாம். இது ஒரு ஃப்ரண்ட் எண்ட் ஃப்ரேம்வொர்க் ஆகும். இது இணைய பக்கங்களை விரைவாக உருவாக்கப் பயன்படுகின்றது. இது html, css ஆகியவற்றின் அடிப்படையாக டைபோகிராபி, ஃபார்ம்கள், பட்டன்கள், அட்டவனைகள்,நேவிகேசன்,மாடல்கள் போன்றவற்றிற்கான டிசைன் டெம்ப்லேட்களைக் கொண்டுள்ளது. ஜாவாஸ்கிரிப்ட் பிளக்-இன்களையும் சேர்ந்து உபயோகிக்கலாம்.

Bootstrap Tables

நாம் பூட்ஸ்ட்ராப் கிளாஸ்களை உபயோகித்து வித விதமான டேபிள்களை உருவாக்கலாம்.

Bootstrap அடிப்படை டேபிள்:

பூட்ஸ்ட்ராப் அடிப்ப்டை டேபிள் பேடிங் குறைவாகவும், ஹரிசாண்டல் டிவைடர் மற்றும் கொண்டது .table கிளாஸ் ஆனது டேபிளுக்கு அடிப்ப்டை ஸ்டைலை கொடுக்க பயன்படுகின்றது.
சான்று நிரல்:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Basic Table Example</h1>  
  11.   
  12. <table class="table">  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  23.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  24.   </body>  
  25. </html>  
Basic Table Example

Bootstrap Striped Rows Table:

The .table-striped class ஆனது  zebra-stripes போன்ற வடிவத்தை டேபிளுக்கு கொடுக்கின்றது.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Striped Table Example</h1>  
  11.   
  12. <table class="table table-striped">  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  23.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  24.   </body>  
  25. </html>  

Bootstrap Bordered table:

The .table-bordered class ஆனது டேபிளின் அணைத்துப் பக்கங்களுக்கும் பார்டர் கொடுக்கின்றது
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Bordered Table Example</h1>  
  11.   
  12. <table class="table table-striped table-bordered">  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  23.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  24.   </body>  
  25. </html>

Bootstrap Hover rows Table:

The .table-hover class ஆனது டேபிளின் ஹோவர் ஸ்டேட்டை எனேபிள் செய்கின்றது:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Hower rows Table Example</h1>  
  11.   
  12. <table class="table table-hover">  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  23.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  24.   </body>  
  25. </html>  
  26.  

Bootstrap Condensed table:

The .table-condensed class ஆனது எல்லா பேடிங்குகளையும் அகற்றுகின்றது.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Condensed Table Example</h1>  
  11.   
  12. <table class="table table-condensed">  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22.   
  23.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  24.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  25.   </body>  
  26. </html> 
  27. வெளியீடு:


Bootstrap Contextual classes:.

Contextual classes ஆனது டேபிள் ரோக்களுக்கு வண்ணங்கள் கொடுத்திட பயன்படுகின்றது
Following are the different contextual classes:
Class
Description
.active
இது ஒரு டேபிள் ரோவிற்கோ அல்லது செல்லிற்கோ ஹோவர் கலரை பயன்படுத்த உதவுகின்றது.
.success
இது சக்ஸஸ் அல்லது பாசிடிவ் ஆக்சன் என்பதை குறிக்கின்றது
.info
இது நியூட்ரல் இன்ஃபர்மேடிவ் ஆக்சன் என்பதைக் குறிக்கின்றது
.warning               
இது கவனம் தேவை என்று எச்சரிக்கப் பயன்படுகின்றது.
.danger
இது அபாயம் என்பதைக் குறிக்கின்றது.
சான்று நிரல்
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Contextual classes</h1>  
  11.   
  12. <table class="table">  
  13.   <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  23.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  24.   </body>  
  25. </html>  

Responsive tables:

The .table-responsive class ஆனது ரெஸ்பான்ஸிவ் டேபிளை உருவாக்கப் பயன்படுகின்றது.சிறிய மற்றும் பெரிய சாதனங்களில் அதேற்கேற்றாற் போல் நீள், அகலங்களை மாற்றியமைத்து கொள்ளும் தன்மையுடைய டேபிள்களை உருவாக்கப் பயன்படுகின்றது.
சான்று நிரல்
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class="container">  
  10.   <h1>Contextual classes</h1>  
  11. <div class="table-responsive">  
  12.   
  13. <table class="table">  
  14.   <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>  
  15.   <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>  
  16.   <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>  
  17.   <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>  
  18.   <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>  
  19. </table>  
  20.   
  21. </div>  
  22.   
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  24.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  25.   </body>  
  26. </html>  
  27.  
  28.  
  29.  
  30.  

Bootstrap 4-ல் புதிய டேபிள் கிளாஸ்கள்:

Black/Dark Table

The .table-dark கிளாஸ் ஆனது டேபிளுக்கு டார்க் பேக்ரவுண்ட் கொடுக்கப் பயன்படுகின்றது.

சான்று நிரல்

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Black/Dark Table</h2>  
  16.   <p>The .table-dark class is used to add a black background to the table:</p>              
  17.   <table class="table table-dark">  
  18.     <thead>  
  19.       <tr>  
  20.         <th>Firstname</th>  
  21.         <th>Lastname</th>  
  22.         <th>Email</th>  
  23.       </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.       <tr>  
  27.         <td>Ajeet</td>  
  28.         <td>Kumar</td>  
  29.         <td>ajeet@jtp.com</td>  
  30.       </tr>  
  31.       <tr>  
  32.         <td>Mahesh</td>  
  33.         <td>Sharma</td>  
  34.         <td>mahesh@jtp.com</td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td>Sonoo</td>  
  38.         <td>Jaiswal</td>  
  39.         <td>sonoo@jtp.com</td>  
  40.       </tr>  
  41.     </tbody>  
  42.   </table>  
  43. </div>  
  44.   
  45. </body>  
  46. </html>  

Dark Striped Table

.table-dark class மற்றும் .table-striped class ஆகியவை இணந்து  dark, striped table: உருவாக்க பயன்படுகின்றது.

சான்று நிரல்

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Dark Striped Table</h2>  
  16.   <p>Combine the .table-dark class and .table-striped class to create a dark, striped table: </p>              
  17.   <table class="table table-dark table-striped">  
  18.         <thead>  
  19.       <tr>  
  20.         <th>Firstname</th>  
  21.         <th>Lastname</th>  
  22.         <th>Email</th>  
  23.       </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.       <tr>  
  27.         <td>Ajeet</td>  
  28.         <td>Kumar</td>  
  29.         <td>ajeet@jtp.com</td>  
  30.       </tr>  
  31.       <tr>  
  32.         <td>Mahesh</td>  
  33.         <td>Sharma</td>  
  34.         <td>mahesh@jtp.com</td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td>Sonoo</td>  
  38.         <td>Jaiswal</td>  
  39.         <td>sonoo@jtp.com</td>  
  40.       </tr>  
  41.     </tbody>  
  42.   </table>  
  43. </div>  
  44.   
  45. </body>  
  46. </html>  

Hoverable Dark Table

The .table-hover class ஆனது ஹோவர் எஃபக்ட் (கிரே பேக்ரவுண்ட் நிறம்) என்பதை டேபிளுக்கு பயன்படுத்த உதவுகின்றது

சான்று நிரல்:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Hoverable Dark Table</h2>  
  16.   <p>The .table-hover class is used to add a hover effect (grey background color) on table rows:</p>              
  17.   <table class="table table-dark table-hover">  
  18.   <thead>  
  19.       <tr>  
  20.         <th>Firstname</th>  
  21.         <th>Lastname</th>  
  22.         <th>Email</th>  
  23.       </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.       <tr>  
  27.         <td>Ajeet</td>  
  28.         <td>Kumar</td>  
  29.         <td>ajeet@jtp.com</td>  
  30.       </tr>  
  31.       <tr>  
  32.         <td>Mahesh</td>  
  33.         <td>Sharma</td>  
  34.         <td>mahesh@jtp.com</td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td>Sonoo</td>  
  38.         <td>Jaiswal</td>  
  39.         <td>sonoo@jtp.com</td>  
  40.       </tr>  
  41.     </tbody>  
  42.   </table>  
  43. </div>  
  44.   
  45. </body>  
  46. </html>  

Bootstrap 4 Contextual Table

Contextual classes ஆனது முழு டேபிளுக்கோ அல்லது டேபிள் ரோ அல்லது செல்களுக்கோ வெவ்வேறு விதமான நிறங்களை பயன்படுத்த உதவுகின்றதுஅதற்கு பயன்படும் கிளாஸ்களின் விவரம்
.table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

சான்று நிரல்

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Contextual Classes Example</h2>  
  16.   <table class="table">  
  17.     <thead>  
  18.       <tr>  
  19.         <th>Firstname</th>  
  20.         <th>Lastname</th>  
  21.         <th>Email</th>  
  22.       </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.       <tr>  
  26.         <td>Default</td>  
  27.         <td>A</td>  
  28.         <td>a@jtp.com</td>  
  29.       </tr>        
  30.       <tr class="table-primary">  
  31.         <td>Primary</td>  
  32.         <td>B</td>  
  33.         <td>b@jtp.com</td>  
  34.       </tr>  
  35.       <tr class="table-success">  
  36.         <td>Success</td>  
  37.         <td>C</td>  
  38.         <td>c@jtp.com</td>  
  39.       </tr>  
  40.       <tr class="table-danger">  
  41.         <td>Danger</td>  
  42.         <td>D</td>  
  43.         <td>d@jtp.com</td>  
  44.       </tr>  
  45.       <tr class="table-info">  
  46.         <td>Info</td>  
  47.         <td>E</td>  
  48.         <td>e@jtp.com</td>  
  49.       </tr>  
  50.       <tr class="table-warning">  
  51.         <td>Warning</td>  
  52.         <td>F</td>  
  53.         <td>f@jtp.com</td>  
  54.       </tr>  
  55.       <tr class="table-active">  
  56.         <td>Active</td>  
  57.         <td>G</td>  
  58.         <td>g@jtp.com</td>  
  59.       </tr>  
  60.       <tr class="table-secondary">  
  61.         <td>Secondary</td>  
  62.         <td>H</td>  
  63.         <td>h@jtp.com</td>  
  64.       </tr>  
  65.       <tr class="table-light">  
  66.         <td>Light</td>  
  67.         <td>I</td>  
  68.         <td>j@jtp.com</td>  
  69.       </tr>  
  70.       <tr class="table-dark text-dark">  
  71.         <td>Dark</td>  
  72.         <td>K</td>  
  73.         <td>k@jtp.com</td>  
  74.       </tr>  
  75.     </tbody>  
  76.   </table>  
  77. </div>  
  78.   
  79. </body>  
  80. </html>  

 

Table Head Colors

இது டேபிள் ஹெடர்களுக்கு டார்க் நிறம் அல்லது கிரே நிறம் ஆகியவற்றை பயன்படுத்த உதவுகின்றது

சான்று நிரல்.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Table Head Colors</h2>  
  16.   <table class="table">  
  17.     <thead class="thead-dark">  
  18.       <tr>  
  19.         <th>Firstname</th>  
  20.         <th>Lastname</th>  
  21.         <th>Email</th>  
  22.       </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.             <tr>  
  26.         <th>Firstname</th>  
  27.         <th>Lastname</th>  
  28.         <th>Email</th>  
  29.       </tr>  
  30.     </thead>  
  31.     <tbody>  
  32.       <tr>  
  33.         <td>Ajeet</td>  
  34.         <td>Kumar</td>  
  35.         <td>ajeet@jtp.com</td>  
  36.       </tr>  
  37.       <tr>  
  38.         <td>Mahesh</td>  
  39.         <td>Sharma</td>  
  40.         <td>mahesh@jtp.com</td>  
  41.       </tr>  
  42.       <tr>  
  43.         <td>Sonoo</td>  
  44.         <td>Jaiswal</td>  
  45.         <td>sonoo@jtp.com</td>  
  46.       </tr>  
  47.     </tbody>  
  48.   </table>  
  49.   <table class="table">  
  50.     <thead class="thead-light">  
  51.       <tr>  
  52.         <th>Firstname</th>  
  53.         <th>Lastname</th>  
  54.         <th>Email</th>  
  55.       </tr>  
  56.     </thead>  
  57.     <tbody>  
  58.            <tr>  
  59.         <th>Firstname</th>  
  60.         <th>Lastname</th>  
  61.         <th>Email</th>  
  62.       </tr>  
  63.     </thead>  
  64.     <tbody>  
  65.       <tr>  
  66.         <td>Ajeet</td>  
  67.         <td>Kumar</td>  
  68.         <td>ajeet@jtp.com</td>  
  69.       </tr>  
  70.       <tr>  
  71.         <td>Mahesh</td>  
  72.         <td>Sharma</td>  
  73.         <td>mahesh@jtp.com</td>  
  74.       </tr>  
  75.       <tr>  
  76.         <td>Sonoo</td>  
  77.         <td>Jaiswal</td>  
  78.         <td>sonoo@jtp.com</td>  
  79.       </tr>  
  80.   
  81.     </tbody>  
  82.   </table>  
  83. </div>  
  84.   
  85. </body>  
  86. </html>  

Small Table

 .table-sm class ஆனது டேபிளின் பேடிங்கை குறைத்து ஒரு டேபிளை சிறியதாக்குகின்றது

சான்று நிரல்

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.   <h2>Small Table Example</h2>  
  16.   <p>The .table-sm class is used to make the table smaller by cutting cell padding in half.</p>  
  17.   <table class="table table-bordered table-sm">  
  18.     <thead>  
  19.       <tr>  
  20.         <th>Firstname</th>  
  21.         <th>Lastname</th>  
  22.         <th>Email</th>  
  23.       </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.       <tr>  
  27.         <td>Ajeet</td>  
  28.         <td>Kumar</td>  
  29.         <td>ajeet@jtp.com</td>  
  30.       </tr>  
  31.       <tr>  
  32.         <td>Mahesh</td>  
  33.         <td>Sharma</td>  
  34.         <td>mahesh@jtp.com</td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td>Sonoo</td>  
  38.         <td>Jaiswal</td>  
  39.         <td>sonoo@jtp.com</td>  
  40.       </tr>  
  41.   
  42.     </tbody>  
  43.   </table>  
  44. </div>  
  45.   
  46. </body>  
  47. </html>  
-முத்து கார்த்திகேயன்,மதுரை.
ads Udanz
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)