Tables

Tables are useful for presenting complex relationships by organizing content into cells. They are particularly effective for displaying tabular data such as transport timetables, calendars, salary compensations, match results, financial transactions, restaurant menus, price lists, and other information that naturally fits into a table format, similar to Google Sheets.

To create tables in HTML, we use the following main elements:

<table>: defines a table on a web page;
<tr>: defines a row within the table;
<th>: defines a header cell within a row. Header cells are typically bold and centered;
<td>: defines a standard data cell within a row.

Let's walk through the steps to create a table for a menu:

Step 1: Set up the HTML structure

Start by creating the basic HTML structure for your page:

Step 2: Define the table

Inside the <body> element, add the <table> tag to define the table:

Step 3: Add a table caption (optional)

If we want to provide a title for the table, we can use the <caption> tag:

Step 4: Create table headers

Next, we add the table headers within the <thead> element. Each header is defined using the <th> tag:

Step 5: Populate the table with data

We use the <tbody> element to enclose the table rows and <td> tags to define the cells containing the data:

Full code

Please dedicate a moment to examine all the elements thoroughly to ensure that their relationship is apparent.

index

Note

By default, HTML tables have no specific visual style. To customize the table's appearance, we can add CSS styles in a separate CSS file or within a <style> tag in the HTML file's <head> section.

However, there's no need to dive into CSS at this stage, as we focus only on HTML.

If you'd like to see how the table looks without any CSS styling, you can remove line 4: <link rel="stylesheet" href="index.css" />, which imports the CSS styles.

If you'd like to learn more about CSS, consider taking the CSS Fundamentals course.

1. What is the HTML element used to define a table on a web page?

2. What HTML element is used to define a row within a table?

3. What is the purpose of the `<th>` element in an HTML table?

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 7