HTML Table Layout

What is an HTML Table?

A structured element called an HTML table is used to arrange and display data in a tabular format on a web page. Its structure is made up of rows and columns that resemble a grid.

The HTML table tag displays data in tabular form (row * column). A row can have many columns.

We can create a table to display data in tabular form, using <table> element, with the help of <tr>, <td>, and <th> elements.

In Each table, the table row is defined by <tr> tag, the table header is defined by <th>, and <td> tags define table data.

HTML tables are used to manage the layout of the page, e.g., the header section, navigation bar, body content, footer section, etc. However, it is recommended that you use a div tag over a table.

The <table> element serves as the container for the entire table, while the <tr> element defines individual rows. Header cells (<th>) are used to label columns within a row, and data cells (<td>) hold the content itself. Users will find it easier to understand and simplify data on a webpage when information is presented in an orderly and visually appealing manner, thanks to tables.

HTML Table Layout

An HTML table is set out by arranging its rows and columns inside the <table> element. The fundamental components and arrangement of an HTML table are as follows:

1. Table Element (<table>)

The outermost element that contains the whole table.

2. Table Row Element (<tr>)

The <tr> element defines every row in the table.

3. Table Header Element (<th>)

• The <th> element defines header cells inside a <tr>.
• Usually used to identify or explain the contents of the columns, it is positioned in the first row.
• By default, header cells are typically bold and centered.

4. Table Data Element (<td>)

• Data cells are defined inside a <tr> using the <td> element.
• Includes the text, numbers, and other HTML elements that make up the table's actual content.
• The rows beneath the header row contain the data cells.

Syntax:

The simple syntax of how we create a table in HTML.

Why do We Use HTML Tables?

HTML tables are used for several reasons in web development. Some reasons are as follows:

1. Tabular Data Representation

Tables work especially well when displaying tabular data, such as financial data, product listings, or any dataset with rows and columns.

2. Grid Layout

With the grid-like structure that tables offer, aligning and arranging content in rows and columns is simple.

3. Information Organization

Tables facilitate the structured organization of data facilitating the understanding of relationships between various data points by users.

4. Comparing the Information

Tables make it simple to compare data between rows and columns, which makes them appropriate for side-by-side comparisons.

5. Data Accessibility

Tables improve data accessibility for users with disabilities by making it easier for screen readers and other assistive technologies to access the information.

6. Form Design

In the past, simple forms with input fields and labels aligned in rows and columns were created using HTML tables. However, CSS is still widely used in modern web development techniques for form layouts.

7. Templates for emails

Tables are frequently used for content organization and layout in HTML email templates. Since some email clients don't support modern CSS well, tables are a dependable option for consistent rendering.

8. Historical Practices

Before modern CSS layout techniques were introduced, HTML tables were widely used for website layouts. Tables are still frequently used to present data even though they are no longer recommended for layout.

It is crucial to remember that although tables are useful for tabular data, they are typically not advised for use in website layout. To develop responsive and adaptable website designs, modern CSS layout techniques like Flexbox and Grid are recommended.

Example

Output: