Mastering HTML Table Body

Introduction

In HTML, the <tbody> tag is used to indicate the body of a HTML table, consisting of a set of rows within the table. This lab will guide you through the steps to create a simple HTML table with the <tbody> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Create a Table Tag

Create an empty HTML file named index.html in your preferred code editor.

Create a <table> tag in the <body> section of the HTML file.

<body>
  <table></table>
</body>

Add Table Head Tag

In the <table> tag, create a <thead> tag and add a header row with <th> tags inside.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</table>

Add Table Body Tag

In the <table> tag, create a <tbody> tag and add rows with <td> tags inside.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

In the <table> tag, create a <tfoot> tag and add a footer row with <td> tags inside.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

Style the Table

Use CSS to style the table, including <thead>, <tbody>, and <tfoot> if applicable.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

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

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Summary

In this lab, we learned how to use the <tbody> tag to create a HTML table with rows and columns. By following the steps, we created a simple table with header, body, and footer sections, and styled the table with CSS to make it look more professional. The <tbody> tag is a useful tool for building complex tables in HTML, and is often used in conjunction with other table elements to create dynamic and interactive data visualizations.

HTML Table Body