HTML Table

This is the lesson 8 of 10 in the course HTML - Beginner to Advance

wp-content/uploads/2022/03/HTML-COURSE.webp

HTML Table is used to arrange data in rows and columns. An HTML table is used to manage the layout of the webpage. The <tr> tag is used to create table rows and <td> tag is used to create data cells.

Here You will learn all about the HTML Table

HTML Table Structure

<table>
   <tr>
      <td> Table Data </td>
      <td> Table Data </td>
      <td> Table Data </td>
   </tr>
</table>

The HTML Table Tags

Tag Name	Description
<table>	Used to create table.
<tr>	Used to create row in a table.
<td>	Used to create cell in a table.
<th>	Used to create header cell in a table
<thead>	Used to group the header content in table.
<tbody>	Used to group the body content in table.
<tfoot>	Used to group the footer content in table.
<caption>	Userd to write caption in a table.
<colgroup>	Used to group single or multiple columns in a table.
<col>	Used with <colgroup> to specify column properties.

The <table> Tag

The table tag is used to create a table in HTML. It is a parent tag for any table.

<table>

</table>

The <tr> Tag

The <tr> tag is used to create the table row.

<table>
   <tr>
   </tr>
</table>

The <td> Tag

The <td> tag is used to insert table data. Each table cell is defined by a <td> tag.

<table>
<tr>
   <td> table cell </td>
   <td> table cell 2</td>
</tr>
</table>

The <th> Tag

The <th> tag is used to create a table heading. It replaces the <td> tag to create a heading that is used to represent the actual data cell. The top cell is used to create a table heading.
The <th> tag makes the text bold and center-aligned.

<table>
<tr> 
   <th>table header 1</th>
   <th>table header 2</th>
</tr>
<tr>
   <td> table cell </td>
   <td> table cell 2</td>
</tr>
</table>

The <caption> Tag

The caption tag defines a table caption. It must be inserted after <table> tag. If you put it anywhere in the <table> and </table> it will be automatically aligned to the top of the table.
As you can see in this example we have defined two captions one for header and one for footer but both show on the top of the table.

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

<table border=1 >
<caption> Header Caption</caption>
<tr >
<th >Name</th>
<th>Class</th>
<th>Stream</th>
<th>Result</th>
</tr>
<tr>
<td>ABC</td>
<td>12</td>
<td>Science</td>
<td>Pass</td>
<caption> Footer Caption</caption>
</tr>

</table>

</body>
</html>

Table Header

The <thead> is used to create table header. The <thead> contains only heading related tags like <th> tag.

<!DOCTYPE html>
<html>
<body>
<table border=1 style="width:100%">
  <thead>
  <tr >
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  </thead> 
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>
</body>
</html>

Table Body

the <body> is used to create the group of table rows. For creating different sections <thead>, <tbody> and <tfooter> are used.

<!DOCTYPE html>
<html>
<body>
<table border=1 style="width:100%">
  <tr >
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  
  <tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
  
</table>
</body>
</html>

The <tfoot> tag is used to create a table footer. It contains footer-related information like total, signature, etc.

<!DOCTYPE html>
<html>
<body>
<table border=1 style="width:100%">

<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
  
  <tfoot>
  	<tr>
    	<td> Total</td>
        <td> 100</td>
        <td> 45%</td>
    </tr>
  </tfoot>
  
  <thead>
  <tr >
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  </thead>
  
</table>
</body>
</html>

The Uniqueness about these tags is, you can place them anywhere in the <table> opening and </table> closing tag but they will be aligned as header, body, and footer automatically. As you can see in the above example.

HTML Table Attributes

HTML Table contains a lot of attributes. We will discuss them one by one. Let’s have a look at the table attributes:

The Border Attribute

The border attribute is used to give a border to the table. It is used inside the table tag. It gives a single border to the table and another single border to each cell.

<!DOCTYPE html>
<html>
<body>
<table border=1 >
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr> 
</table>
</body>
</html>

The Collapsed Table Border

To create a single border in the table we can change the border-collapse property to collapse. It will make a single border on our table.

<!DOCTYPE html>
<html>
<style>
table{border-collapse:collapse;}
</style>
<body>
<table border=1 align="center" >
  <tr>
    <td>ABC</td>
    <td>Mobile No</td>
    <td>+123467890</td>
  </tr> 
</table>
</body>
</html>

Rounded Table Border

We can make a table border round using CSS. Only change the border-radius property to 50%;

<!DOCTYPE html>
<html>
<style>
table, td {
  border: 1px solid black;
  border-radius: 10px;
  padding:5px 5px;
}
</style>
<body>
<table >
  <tr>
    <td>ABC</td>
    <td>Mobile No</td>
    <td>+123467890</td>
  </tr> 
</table>
</body>
</html>

Dashed Table border

Using border-style, we can change table border to dashed, dotted, solid, double, etc. Here we are using dashed value to make border dashed.

<!DOCTYPE html>
<html>
<style>
table, td {
  border: 1px solid black;
  border-radius: 10px;
  padding:5px 5px;
  border-style:dashed;
}
</style>
<body>
<table >
  <tr>
    <td>ABC</td>
    <td>Mobile No</td>
    <td>+123467890</td>
  </tr> 
</table>
</body>
</html>

The Width Attribute

The width gives the width to the table. It can have the value in percentage, px, em, etc.

<!DOCTYPE html>
<html>
<body>
<table border=1 width="100%" >
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr> 
</table>
</body>
</html>

The Height Attribute

The height attribute is used to give the height for table row (<tr>) and table cell (<td>) elements.

<!DOCTYPE html>
<html>
<body>
<table border=1 width="100%" >
  <tr height="50px">
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr> 
  <tr height="10px">
    <td >Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr> 
</table>
</body>
</html>

The colspan Attribute

The colspan attribute is used to merge multiple columns. As we have 3 subjects, we can create a subject column and merge 3 columns then we can create three subjects in another row. The example is given below:

<!DOCTYPE html>
<html>
<body>
<table border=1 width="100%" >
  <tr>
    <td>Name</td>
    <td>Class</td>
    <td colspan=3>Subjects</td>
  </tr> 
  <tr>
    <td >ABC</td>
    <td>4</td>
    <td>English</td>
    <td>Maths</td>
    <td>Science</td>
  </tr> 
</table>
</body>
</html>

The rowspan Attribute

The rowspan also works like colspan but it merges rows. As we have a user “ABC” who has multiple mobile numbers. Run the example below:

<!DOCTYPE html>
<html>
<body>
<table border=1 width="100%" >
  <tr>
    <td rowspan=2>ABC</td>
    <td rowspan="2">Mobile No</td>
    <td>+1234567890</td>
  </tr> 
  <tr>
    <td >+0123456789</td>
  </tr> 
</table>
</body>
</html>

The align Attribute

The align attribute is used to align the table. It is used inside the <table> opening tag. It has three values left, right, and center. The left value is the default.

<!DOCTYPE html>
<html>
<body>
<table border=1 align="center" >
  <tr>
    <td>ABC</td>
    <td>Mobile No</td>
    <td>+123467890</td>
  </tr> 
</table>
</body>
</html>

The cellpadding Attribute

the cellpadding attribute is used to give padding inside a cell. It takes only one value

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

<table cellpadding="15" bordercolor="red">
<tr >
<th >Name</th>
<th>Class</th>
<th>Stream</th>
<th>Result</th>
</tr>
<tr>
<td>ABC</td>
<td>12</td>
<td>Science</td>
<td>Pass</td>
</tr>
</table>
</body>
</html>

The cellspacing Attribute

The cellspacing attribute works as a margin for each cell. It gives space from outside of a cell. As you can see the difference in this below and above example:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<table border=1 cellspacing = "15px" bordercolor="red" cellpadding="15">
<tr >
<th >Name</th>
<th>Class</th>
<th>Stream</th>
<th>Result</th>
</tr>
<tr>
<td>ABC</td>
<td>12</td>
<td>Science</td>
<td>Pass</td>
</tr>
</table>

</body>
</html>

The bordercolor Attribute

The bordercolor attribute is used to give color to a border.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  
<table border=1 cellspacing = "15px" bordercolor="red" cellpadding="15">
<tr >
<th >Name</th>
<th>Class</th>
<th>Stream</th>
<th>Result</th>
</tr>
<tr>
<td>ABC</td>
<td>12</td>
<td>Science</td>
<td>Pass</td>
</tr>
</table>

</body>
</html>

HTML Table Colgroup

The HTML Table colgroup is used to create <tr> table row groups to style them. Col group is used as a container and the <col> element specifies the selection table.

The <col> Element has two basic attributes span and style. span attribute specifies how many columns should be selected for style.

The style attribute is used to give style to an element.

<!DOCTYPE html>
<html>
<body>
<table border=1 >
<colgroup>
  <col span="2" style="background-color: #d4d4d4">
</colgroup>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
    <td>Class</td>
    <td>Stream</td>
    <td>result</td>
  </tr> 
  <tr>
    <td>ABC</td>
    <td>20</td>
    <td>Female</td>
    <td>12</td>
    <td>Science</td>
    <td>Pass</td>
  </tr> 
</table>
</body>
</html>

Multiple Colgroup

We can create multiple colgroup to give different styles to different columns.

<!DOCTYPE html>
<html>
<body>
<table border=1 >
<colgroup>
  <col span="2" style="background-color: #d4d4d4">
  <col span="3" style="background-color: #00ff00">
</colgroup>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
    <td>Class</td>
    <td>Stream</td>
    <td>result</td>
  </tr> 
  <tr>
    <td>ABC</td>
    <td>20</td>
    <td>Female</td>
    <td>12</td>
    <td>Science</td>
    <td>Pass</td>
  </tr> 
</table>
</body>
</html>

Colgroup Attrbutes

The span attribute:

The span attribute is used to insert a number of columns to be merged. The default value is 1. It means if we don’t insert any value into this it will select one column.

<colgroup>
    <col span="2" style="background-color: #D4D4D4">
    <col span="3" style="background-color: red">
  </colgroup>

The style Attribute:

The style attribute is used to give styles on colgroups. Style attribute has a property visibility, if its value is collapse it will hide those columns.

<!DOCTYPE html>
<html>
<style>
</style>
<body>
<table border=1 >
<colgroup>
  <col span="2" style="background-color: #d4d4d4;">
  <col span="3" style="visibility:collapse;">
</colgroup>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
    <td>Class</td>
    <td>Stream</td>
    <td>result</td>
  </tr> 
  <tr>
    <td>ABC</td>
    <td>20</td>
    <td>Female</td>
    <td>12</td>
    <td>Science</td>
    <td>Pass</td>
  </tr> 
</table>
</body>
</html>

HTML Table Designs Example

HTML Table Zebra Strips

Here we will create a table, which will have 2 colors on the background like zebra. Here we are using the style for <tr> tag when the number is even background will be dark gray and the text color will be white.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  
  text-align: left;
  padding: 7px;
}

tr:nth-child(even) {
  background-color: #545454;
  color:white;
}
</style>
</head>
<body>

<h2>HTML Zebra Strip Table</h2>

<table>
  <tr>
    <th>Albert Addam</th>
    <th>Class</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Dennis Rio</td>
    <td>1</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Ammy Richie</td>
    <td>3</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Alfredo Eras</td>
    <td>5</td>
    <td>Fail</td>
  </tr>
  <tr>
    <td>Mark Eve</td>
    <td>6</td>
    <td>Pass</td>
  </tr>
  <tr>   
</table>

</body>
</html>

HTML Table Vertical Zebra Strips

In the above example, we have created a horizontal zebra strips table, as the same method, we will apply background color on <td> and <th> as on the even values.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  
  text-align: left;
  padding: 7px;
}

th:nth-child(even), td:nth-child(even) {
  background-color: #545454;
  color:white;
}
</style>
</head>
<body>

<h2>HTML Vertical Zebra Strip Table</h2>

<table>
  <tr>
    <th>Albert Addam</th>
    <th>Class</th>
    <th>Marks</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Dennis Rio</td>
    <td>1</td>
    <td>50</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Ammy Richie</td>
    <td>3</td>
    <td>67</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Alfredo Eras</td>
    <td>5</td>
    <td>34</td>
    <td>Fail</td>
  </tr>
  <tr>
    <td>Mark Eve</td>
    <td>6</td>
    <td>79</td>
    <td>Pass</td>
  </tr>
  <tr>   
</table>

</body>
</html>

HTML Table – Horizontal Dividers

For horizontal dividers will create style for <th> and<td> as border-bottom: 1px solid black.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  
  text-align: left;
  padding: 7px;
}

th,td {
  border-bottom:1px solid black;
}
</style>
</head>
<body>

<h2>HTML Horizontal Dividers Table</h2>

<table>
  <tr>
    <th>Albert Addam</th>
    <th>Class</th>
    <th>Marks</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Dennis Rio</td>
    <td>1</td>
    <td>50</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Ammy Richie</td>
    <td>3</td>
    <td>67</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Alfredo Eras</td>
    <td>5</td>
    <td>34</td>
    <td>Fail</td>
  </tr>
  <tr>
    <td>Mark Eve</td>
    <td>6</td>
    <td>79</td>
    <td>Pass</td>
  </tr>
  <tr>   
</table>

</body>
</html>

HTML Table – Vertical Dividers

As we did in the above horizontal divider we will make every right border visible, but the last element border value will none. Here we will use :last-child selector to hide the last element border.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  
  text-align: left;
  padding: 7px;
}

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

th:last-child, td:last-child{
	border-right:none;
}
</style>
</head>
<body>
<h2>HTML Vertical Dividers Table</h2>
<table>
  <tr>
    <th>Albert Addam</th>
    <th>Class</th>
    <th>Marks</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Dennis Rio</td>
    <td>1</td>
    <td>50</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Ammy Richie</td>
    <td>3</td>
    <td>67</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Alfredo Eras</td>
    <td>5</td>
    <td>34</td>
    <td>Fail</td>
  </tr>
  <tr>
    <td>Mark Eve</td>
    <td>6</td>
    <td>79</td>
    <td>Pass</td>
  </tr>
  <tr>   
</table>
</body>
</html>

Hope you enjoyed this tutorial. If you want to practice code you can visit the below links.

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Table of Contents