Categories
Web development

HTML tbody tag, thead tag & tfoot tag

HTML tbody tag, thead tag & tfoot tag

The HTML <tbody> element is used to group the body content in an HTML table.

The <tbody> tag is used in conjunction with the <thead> and <tfoot> tags to define each part of a table (body, header, footer).

The <tbody>, <thead> or <tfoot> element must have one or more <tr> elemnents inside.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 3px solid #333;
    border-collapse: collapse;}
    
thead {
  color: #e76f51;      
    }
tbody {
  color: #2a9d8f;      
    }
tfoot {
  color: #264653;
  text-align: center;
    }
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Item:</th>
      <th>Stock:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sugar</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Coffee</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

Output:

Item: Stock:
Sugar 3
Coffee 2
Sum 5

Enjoy coding!