HTML allows us to define tables inside the document by using <table>tag.
A table is divided into many rows with the <tr> tag where <tr> stands for table row which specifies the content of the data cell. It may contain other tables, text, list, images etc.
Each row can be sub divided into data cells with the <td> tag where <td> stands for table data and into headings with the <th> tag where <th> stands for table heading.
Example:
<html>
<body>
<table>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
Inside the table we can define may attributes. Some of them are
- Table Structure
Table can also be classified into
- thead – It groups the header content in a table(green).
- tbody – It groups the body content in a table(blue).
- Tfoot – It groups the footer content in a table(red).
Example:
<html>
<head>
<body>
<table>
<thead>
<tr>
<th>Color</th>
<th>rgb value</th>
<th>Hex code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Color</td>
<td>rgb value</td>
<td>Hex code</td>
</tr>
</tfoot>
</table>
</body>
</html>Output:
| Color | rgb value | Hex code |
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
| Color | rgb value | Hex code |
- Border Attribute
It helps to add border for our table. We can define border inside the <style> tag.
For example,
<html>
<body>
<table>
<style>
table,td
{
border:1px solid black;
}
</style>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
- Collapsed Border
If you want only one border, then you should use collapse border attribute.
For example,
<html>
<body>
<table>
<style>
table,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
- Cell Padding & Cell Spacing
The space between the cell content and its borders is called cell padding.
For example,
<html>
<body>
<table>
<style>
table,td
{
border:1px solid black;
border-collapse:collapse;
padding:15px;
}
</style>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
The spaces between the cells are called cell spacing.
For example,
<html>
<head>
<style>
table, th, td
{
border:1px solid black;
}
table
{
border-spacing:15px;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<th>Color</th>
<th>rgb value</th>
<th>Hex code</th>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
- Table Heading (Horizontal)
We can define table headings by using <th> tag. By default all browser display table heading as bold & centered.
For example,
<html>
<body>
<table>
<style>
table,td,th
{
border:1px solid black;
border-collapse:collapse;
}
</style>
<tr>
<th>Color</th>
<th>rgb value</th>
<th>Hex code</th>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Color | rgb value | Hex code |
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
- Vertical Heading
We can define heading in vertical way also.
For example,
<html>
<head>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>color</th>
<td>Black</td>
<td>White</td>
</tr>
<tr>
<th>rgb value</th>
<td>rgb(0,0,0)</td>
<td>rgb(255,255,255)</td>
</tr>
<tr>
<th>Hex code</th>
<td>#000000</td>
<td>#FFFFFF</td>
</tr>
</table>
</body>
</html>Output:
| color | Black | White |
| rgb value | rgb(0,0,0) | rgb(255,255,255) |
| Hex code | #000000 | #FFFFFF |
- Span more than one row/column
We can merge two or more column by using colspan. Similarly we can merge two or more row by using rowspan.
For example,
<html>
<head>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
}
</style>
</head>
<body>
<h3>Column Span:</h3>
<table>
<tr>
<th>Network</th>
<th colspan="2">Service</th>
</tr>
<tr>
<td>Airtel</td>
<td>2G</td>
<td>3G</td>
</tr>
</table>
<h3>Row Span:</h3>
<table>
<tr>
<th>Network</th>
<td>Airtel</td>
</tr>
<tr>
<th rowspan="3">Service</th>
<td>2G</td>
</tr>
<tr>
<td>3G</td>
</tr>
<tr>
<td>Roaming</td>
</tr>
</table>
</body>
</html>Output:
Column Span:
| Network | Service | |
| Airtel | 2G | 3G |
Row Span:
| Network | Airtel |
| Service | 2G |
| 3G | |
| Roaming |
- Caption
We an add caption to our table so that some one can understand it clearly. <caption> tag is used add caption.
For example,
<html>
<head>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Color values</caption>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>Output:
| Color values | ||
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
- The <colgroup> Element
By using this element we can group two or more columns. It is mainly used for applying styles for particular column or group of column but not entire.
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:yellow">
<col style="background-color:green">
</colgroup>
<tr>
<th>Color</th>
<th>rgb value</th>
<th>Hex code</th>
<tr>
<td>Black</td>
<td>rgb(0,0,0)</td>
<td>#000000</td>
</tr>
<tr>
<td>White</td>
<td>rgb(255,255,255)</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>Red</td>
<td>rgb(255,0,0)</td>
<td>#FF0000</td>
</tr>
</table>
</body>
</html>
Output:
| Color | rgb value | Hex code |
| Black | rgb(0,0,0) | #000000 |
| White | rgb(255,255,255) | #FFFFFF |
| Red | rgb(255,0,0) | #FF0000 |
