HTML-CSS-Table
HTML tables allow web developers to arrange data into rows and columns.
A table in HTML consists of table cells inside rows and columns.
HTML Table Example
Let’s see the example of HTML table tag.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>ID</th>
</tr>
<tr>
<td>Manisha Suraj More</td>
<td>Mumbai</td>
<td>112</td>
</tr>
<tr>
<td>Arushi Yogesh Sapkal</td>
<td>Akola</td>
<td>113</td>
</tr>
<tr>
<td>Sangita Pramod Sangle</td>
<td>Pune</td>
<td>114</td>
</tr>
<tr>
<td>Jyoti Anil Ingale</td>
<td>Amravati</td>
<td>115</td>
</tr>
<tr>
<td>Sonali Sunil More</td>
<td>Surat</td>
<td>116</td>
</tr>
<tr>
<td>Pranali Vicky Zare</td>
<td>Aurangabad</td>
<td>117</td>
</tr>
</table>
</body>
</html>HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc.
HTML Table Tag
| Tag | Description |
| <table> | It defines a table. |
| <tr> | It defines a row in a table. |
| <th> | It defines a header cell in a table. |
| <td> | It defines a cell in a table. |
| <caption> | It defines the table caption. |
| <colgroup> | It specifies 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 Border Attribute
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.
<!DOCTYPE html>
<html lang="en">
<style>
table{
border:1px solid red;
}
table, tr,td{
border:1px solid blue;}
</style>
<body>
<div>
<table>
<tr>
<td>Row1, Column 1</td>
<td>Row1, Column 2</td>
</tr>
<tr>
<td>Row2, Column 1</td>
<td>Row2, Column 2</td>
</tr>
</table>
</div>
</body>
</html>Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
<!DOCTYPE html>
<html lang="en">
<style>
table td{
border:1px solid
}
</style>
<body>
<div>
<table style="border:1px solid">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td rowspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</div>
</body>
</html>Table Height and Width
You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.
<!DOCTYPE html>
<html lang="en">
<style>
table{
border:1px solid black;
width:400px;
height:200px;
}
</style>
<body>
<div>
<table>
<tbody>
<tr>
<td>Row1, Column 1</td>
</tr>
<tr>
<td>Row1, Column 2</td>
</tr>
<tr>
<td>Row1, Column 3</td>
</tr>
<tr>
<td>Row1, Column 4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Tables Backgrounds
You can set table background using one of the following two ways −
- Bgcolorattribute − You can set background color for whole table or just for one cell.
- Backgroundattribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
border:1px solid;
background-color:pink;
}
tr, td{
border:1px black;
}
</style>
</head>
<body>
<div>
<table >
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td rowspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</div>
</body>
</html>Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<caption>This is caption </caption>
<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>
</body>
</html>
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
- <thead>− to create a separate table header.
- <tbody>− to indicate the main body of the table.
- <tfoot>− to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
border: 1px solid black;
width :400px;
height:200px;
}
thead,tfoot,tr,td{
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<table style="border:1px width = 400px height= 180px">
<thead>
<tr>
<td colspan="4">This is the head of Table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the footer of the table.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row1, Column 1</td>
<td>Row1, Column 2</td>
<td>Row1, Column 3</td>
<td>Row1, Column 4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.
<!DOCTYPE html>
<html lang="en">
<style>
table{
width:400px;
height:250px;
}
table, tr, td{
border: 1px solid black;
}
</style>
<body>
<div>
<table>
<tr>
<td>
<table>
<tr>
<td>Name</td>
<td>Salary</td>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Ratan Wadhave</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>