course content

Course Content

Ultimate HTML

TablesTables

Tables are helpful in presenting complex relationships by placing content in cells. They are ideal for tabular data such as transport timetables, calendars, salary compensations, match results, financial transactions, restaurant menus, price lists, and other information naturally presented in a tabular format, such as Google Sheets.

Here are the main elements used to create tables in HTML:

  • <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 create the markup for this menu.

How to make it:

html

index.html

css

index.css

js

index.js

Sections

To create the semantically correct markup we need to follow the next section structure. Not all of these sections are required for all tables.

  • <thead> - specifies header. It wraps the column headings;
  • <tbody> - specifies body. It wraps the main table content;
  • <tfoot> - specifies footer. It wraps the group of table rows in the footer area;

The result code:

Column heading

To create a row we use <tr> tag. Between opening and closing <tr> we use <th> tag for each heading. The result code:

Column Content

Each row we wrap with help of <tr> tag. Inside of opening and closing <tr> tag we use <td> to put data for each column. The result code:

Note

By default, HTML tables do not have any unique design. All styles we have to add manually with the help of the CSS

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?

question-icon

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

Select the correct answer

question-icon

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

Select the correct answer

question-icon

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

Select the correct answer

Section 4.

Chapter 5