HTML table
Table border
- The border attribute indicates border thickness of the table.
- The default value of border is 0.
Background color
The bgcolor attribute is used to set the background color of a table.Table border color
The bordercolor attribute is used to set the border color of a table.Example: Table with background color, border and border color
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table border="1" bordercolor="blue" bgcolor="pink">
<tr>
<td align="center">Row 1, Column 1</td>
<td align="center">Row 1, Column 2</td>
</tr>
<tr>
<td align="center">Row 2, Column 1</td>
<td align="center">Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output:
Table Heading
- Table heading is the title given to the table row or column or both.
- The <th> tag is used to create table column heading or row heading.
Example: Table Heading
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Subject</th>
<th>Total marks</th>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td>Science</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Output:
Rowspan and Colspan Attribute
rowspan: This attribute is used to combine two or more rows into a single cell.colspan: This attribute is used to combine two or more columns into a single cell.
Example: Table rowspan and colspan attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan & Rowspan Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
</tr>
<tr>
<td colspan="4">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output:
Cellspacing and Cellpadding Attributes
Cell spacing: Cell spacing specifies the distance between the edges of the table cells.Cell padding: Cell padding specifies the distance between the edges of the table cells and their content.
Example: Table cellspacing and cellpadding attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellspacing & Cellpadding Example</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="4">
<tr>
<th>Subject</th>
<th>Total marks</th>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td>Science</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Output:
Width and Height Attributes
- Width and height attributes are used to set table width and height.
- Values are given in pixels.
Table Caption
- The <caption> tag is used to give heading to the whole table.
- This tag is always placed after <table> and before first <tr> tag.
Example: Table width, hight and caption
<!DOCTYPE html>
<html>
<head>
<title>HTML Table width, hight and caption Example</title>
</head>
<body>
<table border="1" width="300" height="100">
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Varun Rathi</td>
<td>7000</td>
</tr>
<tr>
<td>Nitesh Singh</td>
<td>8000</td>
</tr>
</table>
</body>
</html>
Output:
