Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Table | Tables and Forms
HTML Essentials
course content

Course Content

HTML Essentials

HTML Essentials

1. Understanding the Web and HTML
2. HTML Fundamentals
3. Images and Media
4. Tables and Forms
5. Advanced HTML

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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.

html

index

css

index

js

index

copy

Video Tutorial

1. Which tag is used to create a table?
2. Which tag represents a row within the table?
3. What is the purpose of the `<tbody>` tag?

Which tag is used to create a table?

Select the correct answer

Which tag represents a row within the table?

Select the correct answer

What is the purpose of the <tbody> tag?

Select the correct answer

Everything was clear?

Section 4. Chapter 1
We're sorry to hear that something went wrong. What happened?
some-alt