HTML Table

The table element is a fundamental part of HTML that enables the creation of tabular data. Tables allow website developers to organize and present data in an easy-to-read format, making it easier for users to understand and analyze the information.

In this article, we'll explore the table element and its child elements to create rows and data cells. Let's get started.

Table Element In HTML

HTML provides us the table tag so that we can easily add a table content our website. The table element also contains other elements such as the thead (table head), tbody (table body), and td (table data) etc. elements.

Let's discover them in order.

thead

The thead (table head) element is used to group the header content in a table. The header content of a table typically includes column titles, descriptions, or any other metadata

tbody

In HTML, the tbody tag is used to group the body content of an HTML table. The body content typically contains the data that is displayed in the table, such as text, numbers, images, and links.

tfoot

The tfoot element is used to group the footer content of an HTML table. The footer content typically contains summary information about the data in the table, such as totals, averages, or other calculations.

td

The td element is used to define a standard data cell within a table. It is an essential component of a well-structured HTML table and is used to display data within a specific row and column.

th

The th element is used to define a header cell within a table. It is similar to the td element, but it is typically used for the first row or column of a table, where the cell's content is a header or label for the data below or to the right.

tr

The tr element is used to define a row within a table. It stands for "table row" and is used to group together multiple td or th elements to form a single row of data

Example Of Table Element In HTML

After tihs brief description for each table element, let's create a table consisting these element so that you can easily create own table in your website.

<table>
  <!-- Thead element contains the header row of the table -->
  <thead>
    <tr>
      <!-- Th elements represent the headers for each column of the table -->
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <!-- Tbody element contains the data rows of the table -->
  <tbody>
    <tr>
      <!-- Td elements contain the data for each cell in a row -->
      <td>John Doe</td>
      <td>30</td>
      <td>United States</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Ali Khan</td>
      <td>40</td>
      <td>Pakistan</td>
    </tr>
  </tbody>
  <!-- Tfoot element contains the footer row of the table -->
  <tfoot>
    <tr>
      <td>Total</td>
      <td>95</td>
      <!-- An empty td element is used to align the "Total" cell with the other cells in the row -->
      <td></td>
    </tr>
  </tfoot>
</table>

And here is the result after adding the following style it.

  table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
    color: #333;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tfoot {
    font-weight: bold;
  }

Conclusion

In this article, we have explored the various table elements available in HTML and their specific purposes.

To demonstrate how these elements work together, we created a simple HTML table that included all the different table elements. We then used inline styles to format the table with borders, font size, and alignment.

Thank you for reading.