This tutorial will help you learn to create a table using HTML.
The following HTML tags are used to display the data in tabular form:
The following HTML tags are used to display the data in tabular form:
1. <table> - Defines a table.
2. <tr> - Defines a row in a table.
3. <th> - It defines a header cell in a table.
4. <td> - Defines a cell in a table.
5. <caption> - This tag defines the table caption.
6. <colgroup> - This tag specifies a group of one or more columns in a table for formatting.
7. <col> - It is used with <colgroup> element to specify column properties for each column.
8. <tbody> - This tag groups the body content in a table.
9. <thead> - It groups the header content in a table.
10. <tfoot> It groups the footer content in a table.Table
Table headers are defined using elements — you can also specify if they are headers for rows or columns using the scope attribute. This gives you complete groups of data that can be consumed by screen readers as single units.
- The element and the element’s summary attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table’s contents. The element is generally preferred as it makes its content accessible to sighted users
| Band | Year formed | No. of Albums | Most famous song |
|---|---|---|---|
| Buzzcocks | 1976 | 9 | Ever fallen in love (with someone you shouldn’t’ve) |
| The Clash | 1976 | 6 | London Calling |
| Total albums | 77 | ||
<table>
<caption> This is example table </caption>
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th>
<td colspan="2">77</td>
</tr>
</tfoot>
</table>
Nested Table
| title1 | title2 | title3 |
|---|---|---|
| cell1 cell2 cell3 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>