HTML Tables

Creating Tables in HTML

HTML tables enable the organization of data in rows and columns, making them ideal for presenting tabular information such as product catalogs, customer profiles, financial statements, and more.

A table can be constructed by utilizing the <table> tag. Within the <table> tag, rows can be created using the <tr> tags, and columns within a row can be established using the <td> tags. Additionally, a cell can be designated as a header for a set of table cells by employing the <th> tag.

Here is an illustration showcasing the fundamental layout of a table.

<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>

HTML Tables don't have borders by default. You can use the CSS border property to add borders to the tables. Also, by default, table cells are sized as large enough to fill the contents. You can use the CSS padding property to add more space around the content in the table cells.

The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.

table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}

Borders around the table and their cells are normally separate, but you have the option to combine them into one by utilizing the border-collapse property on the <table> element.

Additionally, the content within the <th> tags is showcased in a bold typeface and is horizontally centered within the cell by default. If you wish to modify the default alignment, you can utilize the CSS text-align property.

The table borders are collapsed and the text in the table header is aligned to the left with these style rules.

table {
border-collapse: collapse;
}
th {
text-align: left;
}

Please look at the tutorial on CSS tables and learn more about styling HTML tables.

Spanning Multiple Rows and Columns

Spanning enables you to stretch table rows and columns across multiple other rows and columns.

Typically, a table cell cannot extend into the space above or below another table cell. However, you can utilize the rowspan or colspan attributes to span multiple rows or columns in a table. To grasp the concept of colspan, let's explore the following example:

<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>

Similarly, You can also utilize the rowspan attribute to make a cell cover multiple rows.

Let's test it out with an example to grasp the concept of row spanning.

<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

Adding Captions to Tables

You have the option to add a caption or title to your tables by using the <caption> element.

To ensure the caption appears correctly, it should be placed immediately after the opening <table> tag. By default, the caption will be displayed at the top of the table, but you can adjust its position using the CSS caption-side property.

Here's an example that demonstrates how to utilize this element within a table.

<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>

Defining a Table Header, Body, and Footer

HTML offers a range of tags such as <thead>, <tbody>, and <tfoot> that assist in creating well-organized tables. These tags allow you to define the header, body, and footer sections, thereby enhancing the structure of your table.

Take a look at the following example to see how these elements are utilized.

<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>        
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>