HTML <table> tag is utilized to create tables on a webpage. It helps in structuring and displaying data in an organized and tabular manner. It helps to render the information in rows and columns, utilizing elements like <tr>, <th>, and <td> to specify different parts of the table cells.
Additionally, We can also define <thead>, <caption>, <tfoot>, and <body> elements to provide additional structure to the table.
Syntax
<table>
<tr>
<th>Course</th>
<th>Articles</th>
</tr>
<tr>
<td>HTML</td>
<td>HTML Table</td>
</tr>
</table>Note: The HTML <table> tag supports the Global Attributes and Event Attributes.
Example 1: The example illustrates the implementation of an HTML table.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML table tag</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
table,
th,
td {
margin: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML <table> tag</h3>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
</tr>
<tr>
<td>Shivika</td>
<td>11</td>
<td>7</td>
</tr>
<tr>
<td>Gauri</td>
<td>18</td>
<td>12</td>
</tr>
<tr>
<td>Mahima</td>
<td>15</td>
<td>10</td>
</tr>
</table>
</body>
</html>
|
Output:
Example 2: The example shows the implementation table tag by using rowspan and colspan with Custom CSS Style for background-color, right align, and border-collapse.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML table tag</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
table,
td,
th {
border: 2px solid black;
border-collapse: collapse;
}
table {
margin: auto;
background-color: rgb(173, 240, 213);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
HTML table with Custom style
(right- align, border-collapse
and background-color)
</h3>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<th>Age</th>
<th>Class</th>
</tr>
<tr>
<td>Shivika</td>
<td>11</td>
<td>7</td>
</tr>
<tr>
<td>Gauri</td>
<td>18</td>
<td>12</td>
</tr>
<tr>
<td>Mahima</td>
<td>15</td>
<td>10</td>
</tr>
<tr>
<td>Shree</td>
<td>15</td>
<td>10</td>
</tr>
<tr>
<td>Kanha</td>
<td>15</td>
<td>10</td>
</tr>
</table>
</body>
</html>
|
Output:
Example 3: The example shows the implementation of table tag with Browser’s Default CSS.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML table tag</title>
<style>
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-color: gray;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
</tr>
<tr>
<td>Shruti</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<td>Ravi</td>
<td>18</td>
<td>12</td>
</tr>
<tr>
<td>Ankur</td>
<td>15</td>
<td>10</td>
</tr>
<tr>
<td>Gopal</td>
<td>12</td>
<td>8</td>
</tr>
</table>
</body>
</html>
|
Output:
HTML DOM Object
The HTML Table can be accessed with the help of the HTML DOM Table Objects.
Browser Support
- Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 1