HTML Table

The HTML tables enable web authors to arrange information such as text, pictures, links, etc. into cell rows and columns.

HTML tables are created with the <table> tag used for creating table rows with the <tr> tag and <td> tag used for creating data cells. The items in <td> are regular and default to the left.

Syntax:


<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<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>
</body>
</html>

Example:


<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

Output:

 

Basic HTML Table

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

Note: The elements < td > are the table's data containers. They may include all kinds of HTML elements, text, images, lists, tables, etc.

 

 

If the border of the table is not specified, the border will appear without Border.

The CSS border property is used to set a border:

Example:


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

<h2>Bordered HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

Output:

 

Bordered HTML Table

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

Add the border-collapse property to CSS if we want to collapsed the border into one border.

Example:


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

<h2>Collapsed Borders HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

Output:

 

Collapsed Borders HTML Table

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

The space between the cell content and the borders is specified by cell-padding. When a padding is not given, the table cells appear without padding.

Use the CSS padding feature to set the padding:

Example:


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

<h2>Cellpadding HTML Table</h2>
<p>Cell padding sets the space between the content 
of a cell and its boundaries.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

Output:

 

Cellpadding HTML Table

Cell padding sets the space between the content of a cell and its boundaries.

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

The tables are bold and centered by default. Use the text-aligned CSS property to align the table headings to the left:

Example:


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

<h2>Left Align Headings HTML Table</h2>
<p>Use the CSS text align property to align the table headings to the left.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

 

Output:

 

Cellpadding HTML Table

Cell padding sets the space between the content of a cell and its boundaries.

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

 

The space between cells is indicated by the border spacing. Use the CSS border-spacing property to set the border distance of spacing for table:

Example:


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

<h2>Border Spacing</h2>
<p>The space between the cells is specifiable at the border.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>

</body>
</html>

Output:

 

Border Spacing HTML Table

The space between the cells is specifiable at the border.

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

Use the colspan attribute to make a cell span of more than one column:


<table style="width:100%">

<tr>
<th>State</th>
<th colspan="2">Country</th>
</tr>
<tr&gt
<td>Uttarakahnd</td>
<td>Bharat</td>
<td>55577855</td>
</tr>
</table>

 

Example:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
 }
 </style>
 </head>
 <body>
<h2>Cell that spans two columns</h2>
<p>Use the colspan attribute to make a cell span of more than one column..</p>
<table style="width:100%">
<tr>
<th>State</th>
<th colspan="2">Country</th>
</tr>
<tr>
<td>Uttarakhand</td>
<td>Bharat</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>

Output:

 

Cell that spans two columns

Use the colspan attribute to make a cell span of more than one column..

State Country
Uttarakhand Bharat 55577855

 

Use the rowspan attribute to make a cell span of more than one row:


<table style="width:100%">
<tr>
<th>Country</th>
<td>State</td>
</tr>
<tr>
<th rowspan="2">Bharat (India)</th>
<td>Uttarakhand</td>
</tr>
<tr>
<td>Delhi</td>
</tr>
</table>

 

Example:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Country</th>
<td>Sate</td>
</tr>
<tr>
<th rowspan="2">Bharat (India)</th>
<td>Uttarakhand</td>
</tr>
<tr>
<td>Delhi</td>
</tr>
</table>
</body>
</html>

Output

 

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

Country Sate
Bharat (India) Uttarakhand
Delhi

 

To add a caption to a table, use the <caption> tag:


<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>₹10000</td>
</tr>
<tr>
<td>February</td>
<td>₹50000</td>
</tr>
</table>

Example:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table style="width:100%">
<caption>Monthly Savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>₹10000</td>
</tr>
<tr>
<td>February</td>
<td>₹50000</td>
</tr>
</table>
</body>
</html>

Output:

 

 

Table Caption

To add a caption to a table, use the caption tag.

Monthly Savings
Month Savings
January ₹10000
February ₹50000

 

Note: The <caption> tag must be inserted immediately after the <table> tag.

 

We can use one of the two ways to set the table background

Attribute background-color − For whole table or only one cell, we can set background color.

For Example:



<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t1 tr:nth-child(even) {
background-color: #eee;
}
table#t1 tr:nth-child(odd) {
background-color: #fff;
}
table#t1 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
<br>

<table id="t1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>Negi</td>
<td>30</td>
</tr>
<tr>
<td>Mohit</td>
<td>Rawat</td>
<td>25</td>
</tr>
<tr>
<td>Anjali</td>
<td>Bisht</td>
<td>20</td>
</tr>
</table>
</body>
</html>

Output:

 

Styling Tables

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20

 

Firstname Lastname Age
Rohit Negi 30
Mohit Rawat 25
Anjali Bisht 20