HTML Table Tag
We all are familiar with the concept of table, we are not talking about the numeric tables here, the HTML table we are going to learn is the one with rows and column. It’s similar like the structure of a matrix with proper rows and columns. This type of structure with rows and columns is very helpful in representing data in an easy and simple manner. The tabular form of data creates a good expression wherever it is used due to its representation of necessary data in a simple and accurate manner.
Use of HTML Table ?
An HTML table is defined with the <table> tag. A table is used to display data in tabular form (rows * column). It is a paired tag. Just use these tags with their attributes to create tables. You can also use CSS stylesheet to beautify these structures. A table structure is represented in ‘rows*columns’ form, i.e. a ‘4*5’ table represents a table with 4 rows and 5 columns.
Tables are also used in websites to present any data to the user. It looks really neat and also everyone prefers tabular form of data nowadays. The HTML tables allows to arrange data like text, images, etc. into rows and columns.
Example :
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>
Output
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
Table Row
A table row can be defined with the <tr> tag It is also a paired tag with </tr> as a closing tag. Whatever written between these tags will be displayed in a single row of the table. To create a new row another <tr> tag is written after closing the previous one.
Table heading
A table header in HTML tables is a special case of a table row. It starts with <th> tag and ends with </th> tag. There only difference between a row and a heading is that text written inside <th> tags is displayed in bold fonts and is by default centered aligned by the browser. Because of its properties this tag is used only for writing Heading of the table. You can also make a <tr> tags content bold and centered by using CSS It will work exactly like <th> tag.
Table Cells
A table cell in an HTML table is defined by <td> tag. It is also a paired tag with </td> as a closing tag. Each pair of these tags represents a cell in a row. It is used inside &glt;tr> tags only. Without <tr> tags it is of no value. After declaring the rows the <td> tags are used to enter data in the table. Whatever is written inside the <td> and </td> tags will be displayed by the browser in the tables as it is.
Table Attributes
The <table> Tag in HTML table has many attributes which can be used to further define the structure of the table than just a standard one. These attributes can make a table look a bit more attractive. Let’s see one by one the different attributes of the table tag and then we will use them in an example and will see the changes in the table.
The 'border' Attribute
A border attribute is used to specify visible borders in a table. It means that by default the borders in the table are hidden and if you don’t specify borders then your table will only display data but there would be no border between them. The border attribute has two values 0 and 1. 0 means no border and 1 means visible borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the border.
There are two ways to specify border for HTML tables.
- By
borderattribute of table in HTML. - By
border propertyin CSS.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
Output
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
The width attribute is used to sizing the table.
Table CSS Border
You can use CSS Style to make table more interactive.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
Output
| Name | Salary | Age |
|---|---|---|
| Anshuman | Rs. 2,00,000 | 25 |
| Kuldeep | Rs. 5,00,000 | 22 |
The 'Cellpadding' and 'Cellspacing' Attribute
These "cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your table cells.
Cellpadding attribute
The Cellpadding attribute is used to specify the space between the content of the cell and its borders. It provides padding to the content of the cell. As its value increases the space between the cell’s content and its border is also increases. The value of this attribute is taken in pixels by the browser. The cellpadding is applied to all the four sides of the content. The value can also be defined in percentages.
Cellspacing attribute
The Cellspacing attribute is used to specify the space between the cells of the table. Its value can be in pixels or in percentages. It works similar to the Cellpadding attribute but only between cells. It is applied to all the sides of the cells.
Note: These two attributes defined above are no longer a part of HTML 5. So it is better to use CSS to color the tables.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1"
cellpadding="5" cellspacing="5" style="width:100%"><tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output
| Peter | 5000 |
| John | 7000 |
The 'Colspan' and 'Rowspan' Attribute
These two attributes are used with the <td> tag. As the name suggests ‘colspan’ is related to columns and ‘rowspan’ is related to rows. These two attributes are used to merge two or more columns and rows. The colspan attribute’s value suggest the amount of column space it will occupy. For example ‘<td colspan= 2>’ will create a cell taking space of two cells horizontally i.e. it will occupy the space of a cell of the next column. Similarly, the ‘rowspan’ will create a cell which will occupy the space of two or more (as specified) cells vertically, i.e. cells of the next rows. Look at the example below to understand the concept clearly.
The 'Rowspan'
The rowspan attribute is used to merge two or more rows together to form a single row. A single row occupies space of the number of merged rows.
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>
Output
| Name: | Bill Gates |
|---|---|
| Telephone: | 9998887776 |
| 9998887776 |
The 'Colspan'
The colspan attribute is used to merge two or more columns into a single column. single column occupies space of the number of merged columns.
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th
colspan="2"> Mobile </th></tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>
Output
| Bill Gates | 9998887776 | 9998887775 |
HTML Caption
To add a caption to a table, use the<caption> tag.
- A caption can be aligned around the table by using
alignattribute with values - left/right/top/bottom. - The default alignment is top.
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Output
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
Height and Width attributes
The Height and Width attributes of an HTML table are used to specify the height and width of the table. Their value can be specified in terms of pixels or percentages.
bgcolor attribute attribute
This attribute in HTML table is used to provide a background color to the table. You can easily write any color name directly or you can also set a color by providing HEX code. This attribute can also be used with <td> tag to define the color of that particular cell in the table.
background attribute
This attribute in HTML table is used to add a background image in the table. The image in the table will work as a background behind the data in the table. It is also can be used with <td> tag.
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<table> |