Conteúdo do Curso
HTML Essentials
3. Images and Media
HTML Essentials
Table
Tables structure content in a tabular format, similar to Google Sheets or Microsoft Excel.
Forms allow us to collect user information and communicate with customers on a web page.
Let's begin by discussing tables. Specifically, we'll be examining the following text organization:
Airline | Flight | AirportFrom | AirportTo | DayOfWeek | Time | Length | Delay | |
---|---|---|---|---|---|---|---|---|
0 | CO | 269 | SFO | IAH | 3 | 15 | 205 | 1 |
1 | US | 1558 | PHX | CLT | 3 | 15 | 222 | 0 |
2 | AA | 2400 | LAX | DFW | 3 | 20 | 165 | 1 |
3 | AA | 2466 | SFO | DFW | 3 | 20 | 195 | 1 |
4 | AS | 108 | ANC | SEA | 3 | 30 | 202 | 0 |
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.html
index.css
index.js
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.html
index.css
index.js
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.html
index.css
index.js
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.html
index.css
index.js
Video Tutorial
Tudo estava claro?
Conteúdo do Curso
HTML Essentials
3. Images and Media
HTML Essentials
Table
Tables structure content in a tabular format, similar to Google Sheets or Microsoft Excel.
Forms allow us to collect user information and communicate with customers on a web page.
Let's begin by discussing tables. Specifically, we'll be examining the following text organization:
Airline | Flight | AirportFrom | AirportTo | DayOfWeek | Time | Length | Delay | |
---|---|---|---|---|---|---|---|---|
0 | CO | 269 | SFO | IAH | 3 | 15 | 205 | 1 |
1 | US | 1558 | PHX | CLT | 3 | 15 | 222 | 0 |
2 | AA | 2400 | LAX | DFW | 3 | 20 | 165 | 1 |
3 | AA | 2466 | SFO | DFW | 3 | 20 | 195 | 1 |
4 | AS | 108 | ANC | SEA | 3 | 30 | 202 | 0 |
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.html
index.css
index.js
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.html
index.css
index.js
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.html
index.css
index.js
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.html
index.css
index.js
Video Tutorial
Tudo estava claro?