HTML tables enable web developers to organize data in rows and columns.
Example
|
Company |
Contact |
Country |
|
Alfreds Futterkiste |
Maria Anders |
Germany |
|
Centro comercial Moctezuma |
Francisco Chang |
Mexico |
|
Ernst Handel |
Roland Mendel |
Austria |
|
Island Trading |
Helen Bennett |
UK |
|
Laughing Bacchus Winecellars |
Yoshi Tannamuri |
Canada |
|
Magazzini Alimentari Riuniti |
Giovanni Rovelli |
Italy |
In HTML, a table comprises cells arranged within rows and columns.
Example
A simple HTML table:
| <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> |
Every table cell is delineated by an opening <td> tag and a closing </td> tag.
“td” represents table data.
The content enclosed between <td> and </td> comprises the contents of the table cell.
Example
| <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table> |
| Note: A table cell has the flexibility to encompass various HTML elements, including text, images, lists, links, other tables, and more. |
Every table row begins with an opening <tr> tag and concludes with a closing </tr> tag.
“tr“ represents table row.
Example
| <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> |
You can include any number of rows in a table; however, ensure that each row contains an equal number of cells.
| Note: Occasionally, a row may contain a different number of cells compared to others. Further details on this topic will be covered in a subsequent chapter. |
Occasionally, you may desire certain cells to serve as table header cells. In such instances, utilize the <th> tag instead of the <td> tag.
“th” represents table header.
Example
Designate the initial row as containing table header cells.
| <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> |
By default, the text within <th> elements is bold and centered; however, you can modify this appearance using CSS.
