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:

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