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.
index.html
index.css
index.js
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.
Все було зрозуміло?
Зміст курсу
Ultimate HTML
Ultimate HTML
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.
index.html
index.css
index.js
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.
Все було зрозуміло?
