HTML Table

Leave a Comment / HTML / By

In this tutorial, you will learn about HTML table along with its different elements and attributes with the help of multiple examples.

What is an HTML Table?

An HTML table is defined using <html> tag. It is used to represent data in rows and columns. For example,

Copy
<table border="1">
  <tr>
    <th>Student</th>
    <th>Roll No</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Greg Arias</td>
    <td>1</td>
    <td>II</td>
  </tr>
  <tr>
    <td>Penny Black</td>
    <td>2</td>
    <td>II</td>
  </tr>
  <tr>
    <td>Ivan Itchinos</td>
    <td>3</td>
    <td>II</td>
  </tr>
</table>

Browser Output

In the above example, we have used different elements to create an HTML table.

List of Table Tags

TagDescription
<table>Used to create a table
<tr>Used to create a row in a table
<th>Used to create a header cell in a table
<td>Used to create a cell in a table
<thead>Used to group header rows
<tbody>Used to group body rows
<tfoot>Used to group footer rows

Table Elements

Table elements are used to create an HTML table. Let’s discuss all the HTML table elements one by one.

Table Tag in HTML: <table>

The <table> tag is used to define an HTML table. It is basically a container of a table, all other table elements come inside <table> </table>. For example,

Copy
<table>
    …
</table>

Table Row in HTML: <tr>

The <tr> tag is used to define a table row in HTML. For example,

Copy
<table>
<tr>
  ...
</tr>
</table>

The table row can contain either header content <th> or body content <td>.

Copy
<tr>
  <th>Student</th>
  <th>Roll No</th>
  <th>Class</th>
</tr>
<tr>
  <td>Penny Black</td>
  <td>2</td>
  <td>II</td>
</tr>
<tr>
  <td>Ivan Itchinos</td>
  <td>3</td>
  <td>II</td>
</tr>

You can add as many rows as you want, there is no fixed limit to adding rows in a table.

Table Header in HTML: <th>

The <th> tag is used to define the table header in HTML. The table header is placed at the beginning of a row and column. They are used to define the content of a row and column. For example,

Copy
<table>
  <tr>
    <th>Items</th>
    <th>Price</th>
    <th>Count</th>
  </tr>
</table>

Browser Output

Table Cell in HTML: <td>

The <td> tag is used to define a single cell in an HTML table. Data is stored inside a table cell. For Example,

Copy
<table>
  <tr>
    <th>Items</th>
    <th>Price</th>
    <th>Count</th>
  </tr>
  <tr>
    <td>Mango</td>
    <td>100</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>110</td>
    <td>1</td>
  </tr>
</table>

In the above example, <td>Mango</td>, <td>100</td> and <td>2</td> are tables cells.

Table Head in HTML: <thead>

The <thead> tag is used to group the set of rows defining the head of the table. The <thead> tag comes at the top of the table. For example,

Copy
<table>
  <thead>
    <tr>
      <th>Items</th>
      <th>Price</th>
      <th>Count</th>
    </tr>
  </thead>
</table>

We can also create a table without using the <thead> tag, the <thead> tag is used to help browsers understand the header structure of our tables.

Table Body in HTML: <tbody>

The <tbody> tag is used to group the set of rows defining the body of the table. The <tbody> tag comes after the <thead> tag inside the table. For example,

Copy
<table>
  <thead> 
   … 
  </thead>
  <tbody>
    <tr>
      <td>Mango</td>
      <td>100</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>150</td>
      <td>1</td>
    </tr>
  </tbody> 
   …
</table>

Table Footer in HTML: <tfoot>

The <tfoot> tag is used to group the set of rows defining the footer of the table. The <tfoot> tag comes at the bottom of the table. For example,

Copy
<table>
  <thead> 
   … 
  </thead>
  <tbody> 
   … 
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>250</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Example: Use of HTML Table Head, Body and Footer

Copy
  <table>
    <thead>
      <tr>
        <th>Items</th>
        <th>Count</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mango</td>
        <td>2</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>1</td>
        <td>110</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>1</td>
        <td>80</td>
      </tr>
    </tbody>
    <tfoot>
      <td>Total</td>
      <td>4</td>
      <td>290</td>
    </tfoot>
  </table>

Browser Output

Table Attributes

Attributes are the unique values used as modifiers inside the opening tag of an HTML element. In a table, we can use attributes to modify HTML table elements and provide additional information about a table element. 

Let’s discuss all the table attributes one by one.

Table Border in HTML

Border attribute in an HTML table is used to add a border to a table and its cells. Border attribute takes either 1 or 0 as a value.

1 : Sets the border of the table
0 : Removes the border of the table

Copy
<table border="1">
  ...
</table>

Browser Output

In the above example, you can see that the border attribute added double border to our table. So if you want to prevent this thing from happening or want a single border instead of a double border, then you use the border-collapse property. For example,

Copy
<table border="1" style="border-collapse: collapse;">
  ...
</table>

Browser Output

In the above example, you can see that we use border-collapse property to specify a single border for the table and the cells.

Note: The HTML table border attribute is no longer supported by most browsers. You can use the CSS border property to add a border to your table.

Table Colspan in HTML

As its name suggests, the colspan attribute span a cell over multiple columns. For example,

Copy
 <table>
   <tr>
     <th>S.No</th>
     <th>Item</th>
     <th>Price</th>
   </tr>
   <tr>
     <td>1</td>
     <td>Mango</td>
     <td>100</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Apple</td>
     <td>110</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Banana</td>
     <td>80</td>
   </tr>
   <tr>
     <td colspan="2">Total</td>
     <td>290</td>
   </tr>
 </table>

Browser Output

In the above example, you can see that one of the cell of the last row is occupying the space of two columns.

The value of the colspan attribute specifies the number of columns the cell occupies.

Table Rowspan in HTML

As its name suggests, the rowspan attribute is used to span a cell over multiple rows. For example,

Copy
<table>
  <tr>
    <th>Name</th>
    <th>Item</th>
    <th>Count</th>
  </tr>
  <tr>
    <td rowspan="3">Fruits</td>
    <td>Mango</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>1</td>
  </tr>
</table>

Browser Output

In the above example, you can see that one of the cell of the first column is occupying the space of three rows.

The value of the rowspan attribute specifies the number of rows the cell occupies.

Some Other Things in HTML Table

Caption in HTML Table: <caption>

Caption is a type of title or you can consider it as a short description used to describe your table. The <caption> tag is used to specify a table caption.

The <caption> tag must be inserted just after the <table> tag.

Copy
 <table>
   <caption>Grocery List</caption>
     <tr>
       <th>Items</th>
       <th>Count</th>
       <th>Price</th>
     </tr>
     <tr>
       <td>Mango</td>
       <td>2</td>
       <td>100</td>
     </tr>
     <tr>
       <td>Apple</td>
       <td>1</td>
       <td>110</td>
     </tr>
     <td>Total</td>
     <td>3</td>
     <td>210</td>
 </table>

Browser Output

Vertical Headers in HTML

In this tutorial, we have mostly seen headers <th> placed in the topmost row of the table. But we can also create vertical headers by adding <th> tags across the column of a table. For example,

Copy
 <table>
   <tr>
     <th>Items</th>
     <td>Mango</td>
     <td>Apple</td>
   </tr>
   <tr>
     <th>Count</th>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <th>Price</th>
     <td>100</td>
     <td>110</td>
   </tr>
 </table>

Browser Output

Leave a Comment

Your email address will not be published. Required fields are marked *