This is section seven of our HTML course, and we are working through how to work with tables in HTML. This is a powerful way of organizing and displaying structured data and is therefore well-suited for financial reports, schedules, comparisons, and much else in addition. Although modern web design now quite frequently uses other layouts by means of CSS grid or flexbox, tables are still an important element in showing you tabular data in a clear and structured manner.
In this chapter, we are covering from the simple table structure to the advanced table features, starting from how to merge the cells and add headers and footers to style the tables and make them most readable and aesthetically pleasing.
7.1 Basic Table Structure
True for every HTML table: rows and columns are structured using three elements.
<table>: Container element which contains the table.<tr>(table row): Defines the row in the table.<td>(table data): Declaration of a cell (data point) in the table.<th>(table header): Declaration of a heading in the table.
Basic Table Example:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>20</td>
</tr>
</table>
In this example:
- The
<table>tag defines the table container. - The
<tr>tag creates rows. Each row contains data cells or header cells. - The
<th>tag creates header cells, they are bold and centered by default. - The
<td>tag creates standard cells.
Table Headers (th):
The <th> tag defines headers, which are often bold and centered. Headers provide context for the data in the table and allow users to understand what the information refers to.
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>Nepal</td>
<td>Kathmandu</td>
</tr>
</table>
Activity:
Create a simple table showing some products, their costs, and availability. Use both <th> and <td> elements.
7.2 Headers and Footers
You can break your table structure into a header (<thead>), body (<tbody>), and footer (<tfoot>) using HTML. This is especially helpful for bigger tables, as division of the content into sections makes it more readable.
Table with Header and Footer:
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>30</td>
</tr>
</tfoot>
</table>
<thead>: These headers are used in a table.<tbody>: These contain the primary content of the table.<tfoot>: This defines a footer. A footer is used most often for summary rows, totals, or other closing information.
These elements give you a more structured table. The <tfoot> is particularly useful when you want to include a summary of data at the bottom of the table, some kind of total or average.
Exercise:
Expand the previous table into one with <thead>, <tbody>, and <tfoot>. In the bottom row include a calculation for the total number of products.
7.3 Merging Cells (colspan, rowspan)
Sometimes, you need to combine several cells in the table if you prefer having the more complicated layout. Using colspan and rowspan HTML attributes you can stretch one cell over several columns or rows.
Merging Columns with colspan:
The colspan attribute makes it possible for a cell to occupy more than one column.
<table>
<tr>
<th colspan="2">Product Information</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</table>
In this example, the header cell spans across two columns, creating a wider cell that covers both the “Product” and “Price” columns.
Merging Rows with rowspan:
The rowspan attribute allows a cell to span multiple rows.
<table>
<tr>
<th rowspan="2">Product</th>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
In this case, the “Product” cell takes a whole two rows so that it reduces cells along the first column.
Applying colspan and rowspan together:
You may need to apply both colspan and rowspan if you want to combine cells to create a more complex pattern, both horizontally and vertically.
<table>
<tr>
<th colspan="2">Product Information</th>
</tr>
<tr>
<td rowspan="2">Fruit</td>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
Exercise:
Table to have some combined cells vertically and horizontally via colspan and rowspan.
7.4 Table Borders and Padding
HTML tables render by default without borders and without spacing between cells. However, borders can be added easily and padding controlled easily using CSS.
Adding Borders:
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
</table>
The border attribute gives a basic frame to the table and its cells. The current web developers use CSS style tables.
Styling Table Borders with CSS:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
</table>
In this example, border-collapse property includes all the borders of table cells to share one, so the view is more clean.
Adding Padding:
Padding is the space between the content of the cell and its border. Using padding with CSS can make a table more readable.
<style>
td {
padding: 10px;
}
</style>
This adds 10 pixels of space around the content inside each table cell, and makes the contents much easier to read.
Activity:
Create a table with borders and padding and explore what different border styles and padding sizes do to the appearance of the table.
7.5 Advanced Table Features (Caption, Scope, etc.)
Once you have the basic table structure, you can improve the table even more by using some of the advanced HTML features for example adding captions or using the scope attribute for accessibility.
Adding a Caption:
The <caption> element gives you a way to have a title for your table. The caption is useful to give context or describe what’s in the table.
<table>
<caption>Product Prices</caption>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
</table>
The caption is above the table, and it provides a very short explanation of what data the table holds.
Applying the scope Attribute:
Scope attribute makes your table more accessible by clearly stating the relationship between the header cells to the data cells. It is very important for screen readers.
<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
</table>
In this example, the scope=”col” attribute gives the headers across the columns. you could also use scope=”row” for headers of rows.
Striped Rows and Hover Effects:
For big tables striping and hover effects can enhance readability and improve user experience. You can do it easily with CSS.
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
This styling gives each second row a light gray color and changes the background-color on a hover.
Activity:
Add a caption and scope attributes to your table. Style the table with striped rows and hover effects using CSS.
Quizz Time:
Conclusion
In this chapter, we have covered the basics and advanced features of tables in HTML. You have learned how to:
- Create a table by using the table, tr, td, and th tags.
- Organize your tables much better with the thead, tbody, and tfoot.
- Merge cells by using colspan and rowspan.
- Style your tables with borders, padding, and CSS.
- And use more sophisticated table features like captions and the scope attribute for accessibility.
Tables are a very basic way of presenting information in a clear, structured manner. Try creating your own tables and playing around with different layouts and styles.
Next section we're going to learn about forms, where you will learn how to collect input from users and process that in your web applications. Coming up!