How to Create Tables in HTML? | HTML Interview Questions

What You'll Learn

Table structure elements
Semantic grouping
Cell spanning

Table Elements

Element	Purpose
`<table>`	Container
`<tr>`	Table row
`<th>`	Header cell
`<td>`	Data cell
`<thead>`	Header group
`<tbody>`	Body group
`<tfoot>`	Footer group

Complete Example

index.htmlHTML

<table>
  <caption>Monthly Sales Report</caption>

  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>100</td>
      <td>150</td>
    </tr>
    <tr>
      <th scope="row">Widget B</th>
      <td>200</td>
      <td>180</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td colspan="2">630 units</td>
    </tr>
  </tfoot>
</table>

Cell Spanning

index.htmlHTML

<td colspan="2">Spans 2 columns</td>
<td rowspan="2">Spans 2 rows</td>