The HTML <table> tag is used to create tables in web pages. Tables are a useful way to display data in an organized and easy-to-read format. In this tutorial, we’ll go over how to use the <table> tag to create a basic table, add headers and captions, format table cells, and more.
Basic Table Structure
The basic structure of a table is as follows:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
Let’s break down each component of the table:
– The <table> tag is the container for the entire table.
– The <tr> tag represents a row in the table.
– The <th> tag represents a table header cell.
– The <td> tag represents a table data cell.
In the example above, we have three table headers (Header 1, Header 2, and Header 3) and two rows of data. The first row of data has three cells (Row 1, Cell 1; Row 1, Cell 2; and Row 1, Cell 3), and the second row of data has three cells (Row 2, Cell 1; Row 2, Cell 2; and Row 2, Cell 3).
Table Headers and Captions
To add a caption to your table, use the <caption> tag inside the <table> tag:
<table>
<caption>My Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
To add a header to your table, use the <thead> tag inside the <table> tag:
<table>
<caption>My Table Caption</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
Table Formatting
You can use CSS to format your table and make it look more visually appealing. Here are a few examples:
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #eee;
}
In this example, we’re setting the border-collapse property to collapse to remove the spacing between table cells. We’re also setting the width of the table to 100% and adding a max-width of 800px to keep the table from getting too wide on larger screens.
For the table cells, we’re setting the border to 1px solid black and adding some padding to create a bit of spacing around the content. We’re also aligning the text to the left.
For the table headers, we’re adding a light gray background color to differentiate them from the rest of the table.
Spanning Rows and Columns
You can use the rowspan and colspan attributes to span a table cell over multiple rows or columns. Here’s an example:
<table>
<tr>
<th colspan=”2″>Header 1 and 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan=”2″>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
In this example, we’re using the colspan attribute to span the first header cell over two columns. We’re also using the rowspan attribute to span the first data cell over two rows.
Conclusion
The <table> tag is a powerful tool for displaying data in an organized and easy-to-read format on your website. With the use of CSS, you can format your table to fit the look and feel of your website. By using the rowspan and colspan attributes, you can span cells over multiple rows or columns to create more complex tables. With these tools in hand, you can create effective and visually appealing tables on your website.
