How to display a table body in HTML?


Use the <tbody> tag in HTML to display a table body. The HTML <tbody> tag is used to add a body to a table. The tbody tag is used in conjunction with the thread tag and the tfoot tag in determining each part of the table (header, footer, body). The following are the attributes of <tbody> tag −

Attribute

Value

Description

align

Right

left

center

justify

char

Deprecated − Visual alignment.

char

Character

Deprecated − Specifies which character to align text on. Used when align = "char"

charoff

pixels or %

Deprecated − Specifies an alignment offset (either in pixels or percentage value) against the first character as specified with the char attribute. Used when align = "char"

valign

Top

middle

bottom

baseline

Deprecated − Vertical alignment.

Example

Following is the example, to display the table body in HTML –

<!DOCTYPE html>
<html lang="en">
<head>
   <title>html</title>
   <style>
      table {
         border-collapse: collapse;
      }

      td,
      th {
         border: 3px solid red;
      }

      thead {
         color: blue;
      }

      tfoot {
         background-color: yellow;
      }
   </style>
</head>
<body>
   <table>
      <caption align="bottom">World Cup Tennies</caption>
      <!--Caption*/ -->
      <tbody>
         <thead>
            <tr>
               <th rowspan="2">Date</th>
               <th colspan="2">Final Match</th>
               <th rowspan="2">Location</th>
            <tr>
               <th>Team A</th>
               <th>Team B</th>
            </tr>
         </thead>
         <tr>
            <td>20-10-2022</td>
            <td>India</td>
            <td>England</td>
            <td>Australia</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <th colspan="2">Final Score</th>
            <th>India - 1</th>
            <th>England - 0</th>
         </tr>
      </tfoot>
   </table>
</body>
</html>

Example

Following example demonstrates how to display a table body in HTML −

<!DOCTYPE html>
<html>
<head>
   <title>HTML tbody Tag</title>
</head>
<body>
   <table style="width:100%" border="1">
      <thead>
         <tr>
            <td colspan="4">This is the head of the table</td>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">This is the foot of the table</td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr> Each row containing four cells... </tr>
      </tbody>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Updated on: 10-Oct-2023

680 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements