HTML Table Tutorial | Learn Web Development

You may consider using HTML table in your website to provide well-arranged information to your visitors.

The HTML table allows you to arrange data like text, images, links, other tables, etc. into rows and columns.

In this tutorial, we will learn how you can create an HTML table with few easy steps and make your website user friendly.


Basic HTML Table Elements

The HTML table is defined with <table> element. This has an opening and closing tag. It wraps all other elements of that table.

An HTML table contains multiple number of rows. Each row is defined with <tr> element.

Each table row may contain many columns. The HTML <td> element is used to create a table cell.

However, there is no HTML element for creating the table column. Table columns depend on how many table cells are inside a row.

Basically, the number of <td> elements you add inside the <tr> element is the exact number of table columns you will get inside your table row.

  • <table> : The table element contains data in the form of rows and columns. It wraps all the elements inside a table.
  • <tr> : The table row element defines a row in a table. Each row may contains many table columns.
  • <td> : It creates cells in a HTML table. Each table cell should be inside of <tr> element. The number of cells present in a table row are the number of columns of that HTML table.
<table>
    <tr>
       <td>Row 1, Column 1</td>
       <td>Row 1, Column 2</td>
    </tr>   
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

The output shows in a web browser:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

HTML Table Headings

You can define heading for your HTML table by using <th> element.

Usually headings are used for each column of a table. It tells a user what the column is about.

Normally, you will put your first row as the table heading by replacing <td> with <th> element.

Browser will display heading as centered and bold by default.

<table>
   <tr>
     <th>Name</th>
     <th>Salary</th>
   </tr>
   <tr>
     <td>Smith</td>
     <td>5000</td>
   </tr>     
  <tr>
    <td>Jackson</td>
    <td>7000</td>
  </tr>
  <tr>
    <td>John</td>
    <td>4000</td>
  </tr>
</table>

The output shows in a web browser:

Name Salary
Smith 5000
Jackson 7000
John 4000

HTML Table – Adding a Border

You can add border to your HTML table by using CSS border property.

You can insert the following code to your document for adding border.

table, th, td {
  border: 1px solid black;
}

Don’t forget to define border for both the table and the table cell.

It is better to use internal or external stylesheet in order to insert the above CSS code.

You can also use inline styles, but that will require you to insert the code to every single <td> element.

Note: If you don’t know how to use CSS inside HTML document, follow our tutorial – HTML CSS

OUTPUT


HTML Table – Collapsing the Border

After adding border to your table, you will find the table in “double border” look.

If you want to collapse this double border into one border, you have to use CSS border-collapse property.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
	table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
	}
   </style>
</head>
<body>

   <table>
      <tr>
        <th>Name</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>Smith</td>
        <td>5000</td>
      </tr>     
     <tr>
       <td>Jackson</td>
       <td>7000</td>
     </tr>
     <tr>
       <td>John</td>
       <td>4000</td>
     </tr>
  </table>

</body>
</html>

The output shows in a web browser:

Name Salary
Smith 5000
Jackson 7000
John 4000

HTML Table – colspan Attribute

You can use colspan attribute if you want to merge two or more columns into one column.

You need to provide a number that will represent how many columns you want to merge.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
	table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
	}
   </style>
</head>
<body>

   <table> 
     <tr> 
       <th>Name</th> 
       <th colspan="2">Telephone</th> 
    </tr> 
    <tr> 
       <td>Vikas Rawat</td> 
       <td>9125577854</td> 
       <td>8565557785</td> 
    </tr> 
  </table>

</body>
</html>

The output shows in a web browser:

Name Telephone
Vikas Rawat 9125577854 8565557785

HTML Table – rowspan Attribute

You can use rowspan attribute if you want to merge two or more rows into one row.

You need to provide a number that will represent how many rows you want to merge.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
	table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
	}
   </style>
</head>
<body>

   <table> 
     <tr> 
       <th>Name:</th> 
       <td>Vikas Rawat</td> 
     </tr> 
     <tr> 
       <th rowspan="2">Telephone:</th> 
       <td>9125577854</td> 
     </tr> 
     <tr> 
       <td>8565557785</td> 
     </tr> 
   </table> 

</body>
</html>

The output shows in a web browser:

Name: Vikas Rawat
Telephone: 9125577854
8565557785

HTML Table – Adding a Caption

The <caption> element defines a caption to an HTML table.

This element will appear below the <table> tag.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
	table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
	}
   </style>
</head>
<body>

   <table>
      <caption>Monthly Salary</caption>
      <tr>
        <th>Name</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>Smith</td>
        <td>5000</td>
      </tr>     
     <tr>
       <td>Jackson</td>
       <td>7000</td>
     </tr>
     <tr>
       <td>John</td>
       <td>4000</td>
     </tr>
  </table>

</body>
</html>

The output shows in a web browser:

Monthly Salary
Name Salary
Smith 5000
Jackson 7000
John 4000

HTML Table – Head, Body & Foot Element

We can divide a HTML table into 3 sections i.e. table Header, Body, and Footer section.

  • Table header section will go inside the <thead> element. This section always appear at the top of the HTML table.
  • Table footer section will go inside the <tfoot> element. This section always appear at the bottom of the HTML table.
  • Table body section will go inside the <tbody> element. This section always appear in between header and footer section of the HTML table.

Always define <tfoot> element after the <thead> element. The <tbody> element will go at the bottom.

Browser will arrange them correct order.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
	table, th, td {
           border: 1px solid black;
           border-collapse: collapse;
	}
   </style>
</head>
<body>

   <table>
      <caption>Monthly Salary List</caption>
      <thead>
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan = "2">This is the footer of this table</td>
         </tr>
       </tfoot>
       <tbody>
         <tr>
           <td>Smith</td>
           <td>5000</td>
         </tr>     
         <tr>
           <td>Jackson</td>
           <td>7000</td>
         </tr>
         <tr>
           <td>John</td>
           <td>4000</td>
         </tr>
       </tbody>
   </table>

</body>
</html>

The output shows in a web browser:

Monthly Salary List
Name Salary
This is the footer of this table
Smith 5000
Jackson 7000
John 4000

HTML Table Style

Now we know how to create an HTML table. It is time to give some basic style to our table.

You will learn advance styling in our CSS tutorials later.

First, you can give padding in each table cell by using CSS padding property.

Use the following code in your HTML document. You can change padding value according to your requirement.

th, td {
  padding: 10px;
}

Second, you can control the position of <th> and <td> elements by using CSS text-align property.

There are total 3 value for this property i.e. left, right, and center.

Use the following code in your HTML document.

td {
  text-align: center;
}

Third, you can control the width and height of your HTML table by using CSS width and height property.

You can use pixels (px) or percentage (%) unit to define the value of these properties.

table{
   width: 100%;
}

You can learn more CSS properties in our tutorial – HTML Style


Time to practice

OUTPUT