What is Table?

  • The HTML tables are used to present data in a grid style, such as row and columns
  • Basically we want to create a table which means we must use <table>tag

Bootstrap Tables

  • Simple padding
  • Horizontal line

Bootstrap Tables class

  • Table
  • Table-striped
  • Table-bordered
  • Table-hover
  • Table-condensed

Contextual classes

  • Active - applies the hover color to the table row or table cell
  • Success - successful or positive action
  • Info - natural action or informative changes
  • Warning - that might need attention
  • Danger - dangerous or negative action

Bootstrap has a clean layout for building tables; some of the table elements are supported by bootstrap. Those classes are given below,

TAGDescription
<table>Wrapping element for displaying in a tabular format
<thead>Container element for table header rows<tr> to lable table columns
<tbody>Container element for table rows <tr> in the body of table
<tr>Container element for a set of table cell <td> or <th> that appears on a single row
<td>Default table cell
<th>Special table cell for column tables must be used with in a<thead>
<caption>Description of summery of what the table holds

Creating a Simple Table with Bootstrap

  • The table with basic styling has horizontal divided mode
  • The small cell padding 8px by default
  • <table> element are use
Simple Program for Table
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table">
  18. <thead>
  19. <tr>
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr>
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr>
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </div>
  49. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  50. <script type="text/css" src="js/jquery"></script>
  51. </body>
  52. </html>
Outpu
Bootstrap

That is the output for basic Bootstrap table

Creating a Table-striped with Bootstrap

  • In this Table-striped class is called as a zebra-striped
  • Using .table-striped class
  • In this table-striped class generate the black and white color
  • The striped on rows with in the <tbody>

Sample program for table-striped

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table table-striped">
  18. <thead>
  19. <tr>
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr>
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr>
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  49. </div>
  51. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  52. <script type="text/css" src="js/jquery"></script>
  53. </body>
  54. </html>
Output
Bootstrap


Creating a table-bordered with Bootstrap

  • All table contents come with box or border
  • All tables and cells are covered to the borders
  • .table –bordered class is using
  • The rounded corners are around the entire table
Sample program for table-bordered
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table table-bordered">
  18. <thead>
  19. <tr>
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr>
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr>
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  49. </div>
  51. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  52. <script type="text/css" src="js/jquery"></script>
  53. </body>
  54. </html>
Output
Bootstrap

Creating a Table-hover with Bootstrap
  • Gray color background is generated on hover effect
  • .table-hover class is using
  • The cursor is hovering over the table row when the hover effect is generated

Sample program for table-hover

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table table-hover">
  18. <thead>
  19. <tr>
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr>
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr>
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  49. </div>
  51. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  52. <script type="text/css" src="js/jquery"></script>
  53. </body>
  54. </html>
Output
Bootstrap

Creating a table-condensed with Bootstrap
  • Using this class makes table more compact by cutting cell padding in half
  • Large number of columns are in your table means that class will be of help
  • .table-condensed class is used

Sample program for table-hover

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table table-condensed">
  18. <thead>
  19. <tr>
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr>
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr>
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  49. </div>
  51. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  52. <script type="text/css" src="js/jquery"></script>
  53. </body>
  54. </html>

Output

Bootstrap

Contextual classes

  • Contextual classes are used in table row <tr> or table cells<td>
  • Each color indicates some reaction
  • The colors are used to identify the particular locations

Using Contextual classes

  • .active
  • .success
  • .info
  • .warning
  • .danger

Sample program for contextual classes

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <table class="table">
  18. <thead>
  19. <tr class="active">
  20. <th>Name</th>
  21. <th>Age</th>
  22. <th>City</th>
  23. <th>Contact</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr class="success">
  28. <td>Diamond Antony</td>
  29. <td>23</td>
  30. <td>Salem</td>
  31. <td>1234567890</td>
  32. </tr>
  33. <tr class="info">
  34. <td>Senthil kumar</td>
  35. <td>22</td>
  36. <td>Bangalore</td>
  37. <td>9087654321</td>
  38. </tr>
  39. <tr class="warning">
  40. <td>priyanga</td>
  41. <td>21</td>
  42. <td>Chennai</td>
  43. <td>8907654321</td>
  44. </tr>
  45. <tr class="danger">
  46. <td>partheeban</td>
  47. <td>21</td>
  48. <td>Dharmaburi</td>
  49. <td>9543216780</td>
  50. </tr>
  51. </tbody>
  52. </table>
  53. </div>
  55. </div>
  57. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  58. <script type="text/css" src="js/jquery"></script>
  59. </body>
  60. </html>
Output
Bootstrap
Responsive Table

  • The table has a horizontal scroll on small devices under 768px
  • When viewing on anything larger than 768px wide you will not see any difference in these tables
  • .table-responsive class is used

Sample program for responsive table

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-primary">
  13. Bootstrap Tables
  14. </h1>
  15. </div>
  16. <div class="row">
  17. <div class="table-responsive">
  18. <caption>responsive table layout</caption>
  19. <table class="table ">
  20. <thead>
  21. <tr class="active">
  22. <th>Name</th>
  23. <th>Age</th>
  24. <th>City</th>
  25. <th>Contact</th>
  26. </tr>
  27. </thead>
  28. <tbody>
  29. <tr class="success">
  30. <td>Diamond Antony</td>
  31. <td>23</td>
  32. <td>Salem</td>
  33. <td>1234567890</td>
  34. </tr>
  35. <tr class="info">
  36. <td>Senthil kumar</td>
  37. <td>22</td>
  38. <td>Bangalore</td>
  39. <td>9087654321</td>
  40. </tr>
  41. <tr class="warning">
  42. <td>priyanga</td>
  43. <td>21</td>
  44. <td>Chennai</td>
  45. <td>8907654321</td>
  46. </tr>
  47. <tr class="danger">
  48. <td>partheeban</td>
  49. <td>21</td>
  50. <td>Dharmaburi</td>
  51. <td>9543216780</td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. </div>
  57. </div>
  59. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  60. <script type="text/css" src="js/jquery"></script>
  61. </body>
  62. </html>
Output
Bootstrap

This output has the horizontal scroll bar that is the output for responsive table

Conclusion

I hope now you can understand how to use and create the Bootstrap Tables. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.