It is considered a good practice to use tables in html which define complex things as data in a proper sequence with the help of rows and columns. Table is also used to differentiate between two or more things. Apart from this, HTML tables are also used in the field of communication, research, databases and data analysis.
In this article, you will learn about HTML table, how to create table in html, html table tags and also learn about the implementation of different types of HTML table styles with the help of examples.
HTML Table
The html <table> tag is used to specify data in tabular form on html document or web pages. The html table tag allows developers to arrange data into rows and columns. The <tr> tag is used inside the html table tag to define the row of table, to define the table heading <th> tag is used and we use <td> tag to define data/cell of table in html.
Let us understand the basic structure of HTML table with the help of the following example:
<!DOCTYPE html><html>
<head>
<title>Basic HTML Table structure</title>
</head>
<body>
<table border='1'>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body>
</html>
Output
In the above illustration we have used border attribute to add border on html table.
HTML Table Tags
| S.No | Tags | Description |
|---|---|---|
| 1. |
<table> | It specify a table. |
| 2. | <th> | It specify header cell in a table. |
| 3. | <tr> | It specify table row in a table. |
| 4. | <td> | It specify a cell in a table. |
| 5. |
<caption> | It specify table caption. |
| 6. | <colgroup> | It specify a group of one or more columns in a table for formatting. |
| 7. | <col> | It specifies column properties for each column within a <colgroup> element. |
| 8. | <thead> | It specify the header content in a table. |
| 9. | <tbody> | It specify the body content in a table. |
| 10. | <tfoot> | It specify the footer content in a table. |
HTML Table with Border
The html <table> border attribute is used to define border of a table on html page.
There are two ways to add border on html table. The first is to use border attribute inside <table> tag and the other is to use border property in CSS.
By using border attribute inside
In this following illustration, we have used border attribute inside the html <table> tag to add border around table cell.
<!DOCTYPE html><html>
<head>
<title>HTML Table border attribute example</title>
</head>
<body>
<table border='1'>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Cat</td>
</tr>
<tr>
<td>Dog</td>
<td>Elephant</td>
<td>Fish</td>
</tr>
<tr>
<td>Grapes</td>
<td>Hen</td>
<td>Icecream</td>
</tr>
</table>
</body>
</html>
Output
By using border property in CSS
We can also add border around the table cell by using border property in CSS. Now let's understand this with the help of following example:
<!DOCTYPE html><html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
<title>HTML Table border css property example</title>
</head>
<body>
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Cat</td>
</tr>
<tr>
<td>Dog</td>
<td>Elephant</td>
<td>Fish</td>
</tr>
<tr>
<td>Grapes</td>
<td>Hen</td>
<td>Icecream</td>
</tr>
</table>
</body>
</html>
Output
HTML Table border-collapse
The border-collapse property of CSS is used to specify whether table borders should be collapsed into a single border or remain seperate.
Now let's illustrate html table border-collapse property with the help of following example:
<!DOCTYPE html><html>
<head>
<style>
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<title>HTML Table border-collapse example</title>
</head>
<body>
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Cat</td>
</tr>
<tr>
<td>Dog</td>
<td>Elephant</td>
<td>Fish</td>
</tr>
<tr>
<td>Grapes</td>
<td>Hen</td>
<td>Icecream</td>
</tr>
</table>
</body>
</html>
Output
HTML Table with Header
The html <th> tag is used to define table heading (table headers) on html page. Each <th> tag of html represents a table cell and every data defined in <th> tag is centered and bold by default. It is a good practice by using the <th> tag for defining table heading rather than assuming the top row as table heading.
In the following, we have discussed HTML table with header through example:
<!DOCTYPE html><html>
<head>
<title>HTML Table Header example</title>
</head>
<body>
<table border='1'>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>Krishna</td>
<td>21</td>
</tr>
<tr>
<td>Balram</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Cellpadding and Cellspacing
The html <table> cellpadding attribute is used to display the amount of space between border of a table cell and table data.
The html <table> cellspacing attribute of html table is used to display space between table cell. Both of these attributes (Cellpadding and Cellspacing) are used to adjust the white space in table cells.
In the following example, we have described the use of Cellpadding and Cellspacing Attributes in <table> tag.
<!DOCTYPE html><html>
<head>
<title>HTML Table Cellpadding and Cellspacing example</title>
</head>
<body>
<table border='1' cellpadding='9' cellspacing='5'>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>Krishna</td>
<td>21</td>
</tr>
<tr>
<td>Balram</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Colspan and Rowspan
The colspan attribute of html is used to specify the number of columns a cell should span or merge into single column.
The rowspan attribute of html is used to specify the number of rows a cell should span or merge into single row.
Let's understand html table Colspan and Rowspan with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Table Colspan and rowspan example</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="3">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 3</td>
</tr>
<tr>
<td colspan="4">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Caption
The html <caption> tag is used to display caption on html table. The <caption> tag must be inserted just after the <table> tag.
In the following example, we have used <caption> tag just after the <table> tag.
<!DOCTYPE html><html>
<head>
<title>HTML Table Caption example</title>
</head>
<body>
<table border="1" width="100%">
<caption>Animal Name</caption>
<tr>
<td>Cow</td>
<td>Buffalo</td>
</tr>
<tr>
<td>Pig</td>
<td>Horse</td>
</tr>
</table>
</body>
</html>
Output
HTML Table background and border color
The html <table> bgcolor attribute is used to define background color of whole table. This attribute is also used to specify background color for single table cell. If you want to set border color then you must include bordercolor attribute inside <table> tag.
Now let's illustrate html table background and border color with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Table background and border color example</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="yellow">
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>Krishna</td>
<td>21</td>
</tr>
<tr>
<td>Balram</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Output
HTML Table with background Image
The html <table> background attribute is used to display image for whole table. This attribute is also used to display image on single table cell.
In the following illustration, we have used table with background image:
<!DOCTYPE html><html>
<head>
<title>HTML Table with background Image example</title>
</head>
<body>
<table sytle="width:100%" border="1" bordercolor="red" background="html5.gif">
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>Krishna</td>
<td>21</td>
</tr>
<tr>
<td>Balram</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Output
HTML Table width and height
The html <table> width and height attribute is used to set table width and height. The width and height of table can be specified in terms of percentage or pixels.
Let's understand html table width and height with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Table Width/Height example</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Apple</td>
<td>Banana</td>
</tr>
<tr>
<td>Cat</td>
<td>Dog</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Header, Body, and Footer
The html <thead> tag is used to specify table header. The <head> tag must be applied after the <caption> tag and before the <tbody> tag and <tfoot> tags.
The html <tbody> tag is used to grouping the content of a table. This tag must be applied after the <thead> tag and before the <tfoot> tag.
The html <tfoot> tag is used to define footer content in an html table.
Now let's understand html table header, body, and footer with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Table header, body and footer example</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the header of table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the footer of table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
HTML Nested Table
Html nested table is that table in which one table is created within the other table. Nested tables are created simply by using table tags like <table>, <tr>, <td>, etc.
Now let's understand html nested table with the help of following example:
<!DOCTYPE html><html>
<body>
<table border="2" bordercolor="green">
<tr>
<td>Table 1</td>
<td>Table 1
<table border="2" bordercolor="red">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Table 1</td>
<td>Table 1</td>
</tr>
</table>
</body>
</html>
Output
Conclusion
Above we have discussed about HTML table, how to create table in html, html table tags and also learn about the implementation of different types of HTML table styles with the help of examples. The html <table> tag is used to specify data in tabular form on html document or web pages.