Conteúdo do Curso
HTML Essentials
HTML Essentials
3. Images and Media
Table
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:
index
index
index
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:
index
index
index
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:
index
index
index
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.
index
index
index
Video Tutorial
Tudo estava claro?