HTML Table Creation: A Step-by-Step Tutorial for Beginners
HTML tables enable you to neatly organize various types of content like text, images, and even other tables into a grid-like structure. This grid comprises rows and columns, making it easy to display data. In this tutorial, we’ll cover everything from the basics of constructing a table to more advanced techniques like cell merging and nested tables.
Basics of HTML Tables
To start creating an HTML table, you use the <table> tag. Within this tag, the <tr> (table row) and <td> (table data) tags define rows and columns respectively.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Table</title>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This produces a table like:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
Table Headers
To specify table headers, use the <th> tag instead of the <td> tag. These headers are usually bold and centered.
Example:
<table>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
</table>
Output:
| Name | Salary |
|---|---|
| Ramesh Raman | 5000 |
Merging Cells: Colspan and Rowspan
Merging cells in HTML tables is an incredibly useful feature that allows you to create more complex table structures by combining multiple cells horizontally or vertically. This can be done using two specific attributes: colspan and rowspan.
Merging Cells Horizontally with colspan
The colspan attribute is used when you want to merge two or more columns into a single cell. This attribute essentially allows a cell to span multiple columns.
Example:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td colspan="2">This cell spans two columns</td>
<td>Normal cell</td>
</tr>
</table>
Output:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| This cell spans two columns | Normal cell | |
In this table, the cell in the second row, first column spans two columns, effectively merging it with the cell next to it.
Merging Cells Vertically with rowspan
The rowspan attribute allows a cell to span multiple rows, thereby merging it with the cells below it.
Here’s an example:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td rowspan="2">This cell spans two rows</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 2</td>
</tr>
</table>
Output:
| Column 1 | Column 2 |
|---|---|
| This cell spans two rows | Row 1, Column 2 |
| Row 2, Column 2 |
In this example, the cell in the first row, first column spans two rows.
Table Sections: Header, Body, and Footer
it’s common practice to segregate the content into distinct sections: header (<thead>), body (<tbody>), and footer (<tfoot>). This not only makes your code more readable and semantically correct but also provides better styling and scripting capabilities.
Table Header
The <thead> element is used to group the header content in an HTML table. Typically, it contains rows (<tr>) that hold the header cells (<th>). Web browsers automatically emphasize the text in the <th> elements by making it bold.
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
</thead>
Table Body
The <tbody> element is used for grouping the main content of the table. This is where most of your table’s data will reside. It typically contains rows (<tr>) that hold the data cells (<td>).
<tbody>
<tr>
<td>John</td>
<td>32</td>
<td>Engineer</td>
</tr>
<tr>
<td>Sarah</td>
<td>28</td>
<td>Designer</td>
</tr>
</tbody>
Table Footer
The <tfoot> element is used for grouping the footer content in an HTML table. It can contain summary rows or special rows for holding things like units or footnotes. It is generally formatted like the header to indicate its different role compared to the body.
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">2 people</td>
</tr>
</tfoot>
Putting it all together:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>32</td>
<td>Engineer</td>
</tr>
<tr>
<td>Sarah</td>
<td>28</td>
<td>Designer</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">2 people</td>
</tr>
</tfoot>
</table>
Ouput:
| Name | Age | Occupation |
|---|---|---|
| John | 32 | Engineer |
| Sarah | 28 | Designer |
| Total | 2 people | |
Conclusion
That’s it for now. In this tutorial we learned how to use the <table> element to create tables. We learned about how to create rows with <tr> and columns with <td> and how to merge the cells with rowspan and colspan attributes.
In the next tutorial, we will learn how to style html tables using CSS.
Happy coding!