Let's begin by discussing tables. Specifically, we'll be examining the following text organization:

Tables

Tables in HTML are used to display data in rows and columns, providing a structured way to organize information.

Creating Tables

The <table> tag is used to create a table in HTML. Tables are composed of rows (<tr>) and cells (<td>), which define the structure and content of the table. The basic table structure will be as follows.
Example:

In the example above:

• The <table> tag is used to create a table;
• Each <tr> tag represents a row in the table;
• Within each row, <td> tags represent cells, defining the content of each cell.

Although we could stop working with tables here, we can improve their semantics to make it easier for search engines to understand their content.

Table Headers

The <th> tag defines table headers representing column or row headings. It should be used within a table's <thead> section.
Example:

In the example above:

• The <thead> section contains table header cells defined using the <th> tag;
• Each <th> tag represents a header cell.

Table Body

The tbody section should come after the thead section and wrap all the table data except the headings. All the elements inside of the tbody remain the same.
Example:

Summarizing

Tables are structured with a hierarchy of elements:

1. Table (<table>)

The <table> tag is the parent element that defines the entire table. It contains all the rows and columns of the table.

2. Table Head (<thead>)

The <thead> tag is used to group the header rows of the table. It contains one or more rows (<tr>) of header cells (<th>), defining column headings.

3. Table Body (<tbody>)

The <tbody> tag is used to group the main content rows of the table. It contains one or more rows (<tr>) of data cells (<td>), defining the main content of the table.

4. Table Rows (<tr>)

The <tr> tag represents a row within the table. It contains one or more table cells (<td> or <th>), defining the content of each column within the row.

5. Table Cells (<td> and <th>)

The <td> tag represents a standard data cell within the table body. The <th> tag represents a header cell within the table head. Each cell contains the actual content of the table, such as text, images, or other HTML elements.

Video Tutorial