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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"`HTML Table Body`"}} html/tables -.-> lab-70854{{"`HTML Table Body`"}} html/tbl_access -.-> lab-70854{{"`HTML Table Body`"}} end

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 `<thead>` 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 `<tbody>` 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>

Add Table Footer `<tfoot>` Tag (Optional)

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

Introduction

Skills Graph

Create a Table Tag

Add Table Head <thead> Tag

Add Table Body <tbody> Tag

Add Table Footer <tfoot> Tag (Optional)

Style the Table

Summary

Other HTML Tutorials you may like

Add Table Head `<thead>` Tag

Add Table Body `<tbody>` Tag

Add Table Footer `<tfoot>` Tag (Optional)