HTML Tables

Tables are created with the <table> element. Rows are defined by <tr>, header cells by <th>, and data cells by <td>. You can optionally add a <caption> for the table title.

1) Basic Table


<table>
  <caption>Student Marks</caption>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>Maths</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>Science</td>
    <td>91</td>
  </tr>
</table>

Output

Student Marks
Name Subject Marks
RaviMaths88
AnitaScience91

2) Bordered / Striped Table (CSS)


<!-- Bootstrap classes: table, table-bordered, table-striped -->
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Course</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>HTML</td><td>2 Weeks</td></tr>
    <tr><td>2</td><td>CSS</td><td>3 Weeks</td></tr>
  </tbody>
</table>
#CourseDuration
1HTML2 Weeks
2CSS3 Weeks

3) Colspan and Rowspan


<table class="table table-bordered">
  <tr>
    <th colspan="3">Q1 Sales</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Jan</th>
    <th>Feb</th>
  </tr>
  <tr>
    <td rowspan="2">Phone</td>
    <td>120</td>
    <td>135</td>
  </tr>
  <tr>
    <td>110</td>
    <td>140</td>
  </tr>
</table>
Q1 Sales
ProductJanFeb
Phone120135
110140

Tip: Wrap wide tables in .table-responsive (as shown above) so they scroll horizontally on small screens.