HTML Tables
HTML tables are used to display data in a tabular form.
The following figure illustrates the components of a table in HTML.
- Table contains Rows, and Columns.
- Each column can have a heading (Header Cell) which are grouped in Table Head.
- Each Row contains multiples Cells.
The following table provides the details of the tags used for different parts of the table mentioned above.
Table Component | HTML Tag |
---|---|
Table | <table> |
Head | <thead> |
Header Cell | <th> |
Body | <tbody> |
Row | <tr> |
Cell | <td> |
Example
In the following example, we create a table with head and body. Head contains column names, and the body contains rows, which intern contains cells.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
<tr>
<td>Cherry</td>
<td>36</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML Table Tutorials
The following list of tutorials cover different use-cases specific to HTML tables.
- HTML Table Borders
- HTML Table Caption
- HTML Table Column Group
- HTML Table Column Span
- HTML Table Header for Multiple Columns
- HTML Table Row Span
- HTML Table Column Width
- HTML Table Cell Spacing
Conclusion
In this HTML Tutorial, we learned about HTML Tables, and different scenarios with HTML Tables, with examples.