HTML Tables

HTML tables are used to display data in a tabular form.

The following figure illustrates the components of a table in HTML.

  • Table contains Rows, and Columns.
  • Each column can have a heading (Header Cell) which are grouped in Table Head.
  • Each Row contains multiples Cells.

The following table provides the details of the tags used for different parts of the table mentioned above.

Table ComponentHTML Tag
Table<table>
Head<thead>
Header Cell<th>
Body<tbody>
Row<tr>
Cell<td>

Example

In the following example, we create a table with head and body. Head contains column names, and the body contains rows, which intern contains cells.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

HTML Table Tutorials

The following list of tutorials cover different use-cases specific to HTML tables.

Conclusion

In this HTML Tutorial, we learned about HTML Tables, and different scenarios with HTML Tables, with examples.