HTML Table Layout

What is an HTML Table?

An organized component known as an HTML table is employed for organizing and showcasing information in a grid-like format on a webpage, consisting of rows and columns.

The HTML table element is used to showcase data in a structured format with rows and columns. Each row can contain multiple 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 play a crucial role in organizing the structure of a webpage, such as arranging the header, navigation menu, main content area, footer, and more. Despite their utility, it is advisable to opt for a div element instead of a table for layout purposes.

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 top-level element encompassing the entire table.

1. Table Row Tag (<tr>)

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

1. 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.

1. 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 basic structure for creating a table in HTML.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1A</td>
    <td>Data 1B</td>
  </tr>
  <tr>
    <td>Data 2A</td>
    <td>Data 2B</td>
  </tr>
</table>

Why do We Use HTML Tables?

HTML tables serve various purposes in web development. Some of these include:

• ✅ Structuring and organizing data in a tabular format

Tables are particularly effective for presenting tabular information, like financial records, lists of products, or any dataset organized in rows and columns.

1. Grid System

Tables provide a structured layout that simplifies the alignment and organization of data in rows and columns.

1. Data Arrangement

Tables play a crucial role in organizing data systematically, aiding users in grasping connections among different data points effectively.

1. Analyzing Data Relationships

Tables are an effective tool for facilitating comparisons between different rows and columns, making them well-suited for conducting side-by-side analyses.

1. Enhancing Data Accessibility

Utilizing tables enhances the accessibility of data for individuals with disabilities, facilitating the retrieval of information by screen readers and similar assistive tools.

1. Form Design

Previously, basic forms were designed using HTML tables, where input fields and labels were arranged in rows and columns. Nevertheless, CSS remains a prevalent choice in contemporary web development practices for organizing form structures.

1. Email templates

HTML email templates commonly utilize tables to organize and structure content. Due to the lack of robust CSS support in certain email clients, tables are a reliable choice to ensure consistent display.

Prior to the advent of contemporary CSS layout methods, HTML tables were extensively utilized for structuring websites. Despite being discouraged for layout purposes, tables continue to be commonly employed for displaying data.

It is important to keep in mind that while tables are effective for displaying tabular data, they are generally not recommended for website layout purposes. For creating responsive and versatile website designs, it is advisable to utilize contemporary CSS layout methods such as Flexbox and Grid.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Information</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <h2>Product Information</h2>

  <table>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
      <th>Availability</th>
    </tr>
    <tr>
      <td>Product A</td>
      <td>$20.99</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$15.49</td>
      <td>Out of Stock</td>
    </tr>
    <tr>
      <td>Product C</td>
      <td>$30.00</td>
      <td>In Stock</td>
    </tr>
  </table>

</body>
</html>

Output: