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

Course Content

Ultimate HTML

Ultimate HTML

1. Web Development
2. Tags and Attributes
3. Document Structure
4. Media and Tables
5. Forms

Tables

Tables are useful for presenting complex relationships by organizing content into cells. They are particularly effective for displaying tabular data such as transport timetables, calendars, salary compensations, match results, financial transactions, restaurant menus, price lists, and other information that naturally fits into a table format, similar to Google Sheets.

To create tables in HTML, we use the following main elements:

  • <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 walk through the steps to create a table for a menu:

Step 1: Set up the HTML structure

Start by creating the basic HTML structure for your page:

Step 2: Define the table

Inside the <body> element, add the <table> tag to define the table:

Step 3: Add a table caption (optional)

If we want to provide a title for the table, we can use the <caption> tag:

Step 4: Create table headers

Next, we add the table headers within the <thead> element. Each header is defined using the <th> tag:

Step 5: Populate the table with data

We use the <tbody> element to enclose the table rows and <td> tags to define the cells containing the data:

Full website code:

Please dedicate a moment to examine all the elements thoroughly to ensure that their relationship is apparent.

html

index

css

index

js

index

Note

By default, HTML tables have no specific visual style. To customize the table's appearance, we can add CSS styles in a separate CSS file or within a <style> tag in the HTML file's <head> section.

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?

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

Select the correct answer

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

Select the correct answer

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

Select the correct answer

Everything was clear?

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