HTML Table

HTML tables is used to display data in tabular form (for eg:- row * column).

HTML tables used to arrange data into rows and columns.

  • We can define a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
  • Table row is defined by <tr> tag.
  • Table header is defined by <th> tag.
  • Table data is defined by <td> tag.

List of HTML Table Tags

Tag Description
<table> It describe a table.
<tr> It describe a row in a table.
<th> It describe a header cell in a table.
<td> It describe a cell in a table.
<caption> It describe the table caption.
<colgroup> It define a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

 

HTML Table Example

Let's see the example of HTML table using the below code.

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
    </table>
  </body>
</html>
  Try it Yourself

HTML Table with Border

Here are two methods to specify border for HTML tables.

  • Using border attribute of table in HTML
  • Using border property in CSS

1. Using border attribute of table in HTML

<!DOCTYPE html>
<html>
  <body>
    <table border="1" >
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
    </table>
  </body>
</html>
  Try it Yourself

2. Using border property in CSS

<!DOCTYPE html>
<html>
  <head>
  <style>  
    table, th, td {  
        border: 1px solid black;  
    }
  </style>  
</head>
  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
    </table>
  </body>
</html>
  Try it Yourself

HTML Table with cell padding

You can define padding for table header and table data by two ways:

  • Using cellpadding attribute of table in HTML
  • Using padding property in CSS
<style>  
 table, th, td {  
  border: 1px solid tomato;  
  border-collapse: collapse;  
 }  
 th, td {  
  padding:12px;  
 } 
</style>

The cellpadding attribute of HTML table tag is obselete now.

It is recommended to use CSS. So let's see the code of CSS.

<!DOCTYPE html>
<html>
  <head>
  <style>  
    table, th, td {  
  border: 1px solid tomato;  
  border-collapse: collapse;  
}  
th, td {  
  padding:12px;  
} 
  </style>  
</head>
  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
    </table>
  </body>
</html>
  Try it Yourself

HTML Table width

We can define the HTML table width using the CSS width property and it can be specify in pixels or percentage.

table{  
  width: 100%;   
}

We can easily adjust the width of table as per our requirement. The below example is used to display table with width.

<!DOCTYPE html>
<html>
  <head>
  <style>  
	table{  
            border-collapse: collapse;  
            width: 100%;   
        }  
    th,td{  
        border: 1.5px solid red;   
        padding: 12px;  
    }  
  </style>  
</head>
  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
    </table>
  </body>
</html>
  Try it Yourself

HTML Table with colspan

If we want to make a cell span more than one column then you can use the colspan attribute.

It will divide one cell/row into multiple columns, and the number of columns based on the value of colspan attribute.

The example which span two columns is given below.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
</head>
  <body>
    
    <table style="width:100%">  
  <tr>  
  <th>Name</th>  
  <th colspan="2">Mobile No.</th>  
  </tr>  
  <tr>  
  <td>Ram</td>  
  <td>1234567890</td>  
  <td>9876543210</td>  
  </tr>  
</table>  
		
  </body>
</html>
table, th, td {  
  border: 1px solid green;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 7px;  
}
  Try it Yourself

HTML Table with rowspan

If we want to make a new cell span more than one row then we use the rowspan attribute.

It will divide a cell into multiple rows and the number of divided rows will depend on rowspan values.

Let's see the suitable example which convert span two rows.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

<table style="width:90%">
  <tr>
    <th>Name</th>
    <td>Ram</td>
  </tr> 
  <tr>
    <th rowspan="2">Mobile No.</th>
    <td>1234567890</td>
  </tr>  
  <tr>
    <td>9876543210</td>
  </tr>
</table>  

</body>
</html>
table, th, td {  
  border: 1px solid green;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}
  Try it Yourself

HTML table with caption

HTML caption is used to display above the table. It must be used after table tag only example is given below.

 

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>
  
  <table>  
	<caption>Student Data</caption>  
  <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Sharma</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Vijay</td>
        <td>Kumar</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>Singh</td>
        <td>26</td>
      </tr>
</table>  

</body>
</html>
  Try it Yourself
Element Chrome Browser Chrome ie browser IE firefox Firefox opera Opera safari Safari
<table> Yes Yes Yes Yes Yes

 

Prev

HTML Image

Next

HTML Lists