HTML Tables


January 7, 2022, Learn eTutorial
1053

In this HTML tutorial, you will learn all about the Table Tag in HTML. We will also discuss the most commonly used table tag attributes in HTML.

What is the use of the Table tag in HTML?

The HTML table tag is used to demonstrate data in a tabular format (row * column). A row can contain multiple columns. Using the <table> element and the <tr>, <td>, and <th> elements, we can create a table to display data in tabular format. Each table's row is defined by the <tr> tag, the table header by the <th> tag, and the table data by the <td> tags. HTML tables are used to manage the layout of the page, such as the header section, navigation bar, body content, footer section, and so on. However, it is recommended that you use the div tag rather than the table to manage the page's layout.

Example
The <table> element is used to create a table. To create rows within the <table> element, use the <tr> elements, and to create columns within a row, use the <td>
 


<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <h1>This is Style attribute</h1>      <p  height: 50px; color: blue " >It will add style property in element</p>      <p  color: red " >It will change the color of content</p> 
</body> 
</html> 
 
Output
HTML Table

By default, tables do not have any borders. To add borders to the tables, we can either use the border attribute or else we can use the CSS border property.

HTML Tags used to create table

Tags Description
<table> The <table> tag is used to define a table. 
<tr> The <tr> tag is used to define the row of the table.
<th> The <th> tag is used to define the header of the table.
<td> The <td> tag is used to define the data of the table.
<caption> The <caption> tag is used to specify the caption to the table.
<colgroup> The <colgroup> tag is used to specify columns to a group for formatting.
<col> The <col> tag is associated with the <colgroup> tag to specify the formatting property for the columns of the table. 
<tbody> The <tbody> tag is used to group the body content of the table.
<thead> The <thead> tag is used to group the header content of the table.
<tfooter> The <tfooter> tag is used to group the footer content of the table.

How To Add a Border to the table?

There are mainly two ways to add a border to the table in HTML

  1. By using the border attribute
  2. By using the CSS property 

Adding Border by using the border attribute

We can use the border attribute to specify the border for the table. 


<table border=1>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
 
Output
HTML Table

Adding Border by using the CSS property

We can use the border attribute to specify the border for the table.


<style>  
table, th, td {  
  border: 1px solid black;  
}  
</style>
<table border=1>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
 
Output
HTML Table

Use of colspan in HTML Table

You can use the colspan attribute to make a cell span more than one column. A cell/row is divided into numerous columns, the number of which is determined by the colspan property.


<style>  
table, th, td {  
  border: 1px solid black;  
}  
</style>
<table border=1>
  <tr>
    <th>Heading 1</th>
    <th colspan=2>Heading 2</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

 
Output
HTML Table

Use of rowspan in HTML Table

You can use the colspan attribute to make a cell span more than one row. A cell will be divided into multiple rows. The rowspan attribute determines the number of divided rows.


<style>  
table, th, td {  
  border: 1px solid black;  
}  
</style>
<table>    
<tr>
  <th>Heading 1</th>
  <td>Data</td>
</tr>    
<tr>
  <th rowspan="2">Heading 2</th>
  <td>Data</td>
</tr>    
<tr>
  <td>Data</td>
</tr>    
</table>  
 
Output
HTML Table

How to add Cell Padding to the HTML Table

Space between each cell is called cell spacing. It is set by default to 2 pixels. The cellspacing attribute is used to specify the cell spacing..


<table border=1 cellpadding=10>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
 
Output
HTML Table

How to add Cell Spacing to the HTML Table

Padding between the cell edges and the content of the cell is called cell padding. The padding is set to 0 by default. The cell padding is the attribute used to add the padding to the cell.


<table border=1 cellpadding=10 cellspacing=10>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
 
Output
HTML Table

Add Captions to the HTML Tables

Using the <caption> element, we can specify a caption (or title) for the tables. Following the opening <table> tag, the <caption> element must be placed. The caption displays at the top of the table by default, but you may adjust its location with the CSS caption-side property.


<table border=1 cellpadding=10 cellspacing=10>
 <table border=1 cellpadding=10>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
 
Output
HTML Table