The Tech Platform
May 8, 20212 min
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Below is the Example to Create Tables in HTML . One Table is without any styling and other table consist of <caption>, <tfoot>, <th>, <tr>, <background-color> and Changes the color of the row and column.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: pink;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Normal Table</h2>
<table>
<tr>
<th>Username</th>
<th>Email</th>
<th>Telephone</th>
</tr>
<tr>
<td>Jill</td>
<td>Jill@gmail.com</td>
<td>659843264</td>
</tr>
<tr>
<td>Eve</td>
<td>Eve@gmail.com</td>
<td>947896543</td>
</tr>
<tr>
<td>John</td>
<td>John@gmail.com</td>
<td>809764987</td>
</tr>
</table>
<br>
<h2>Styling Table</h2>
<table id="t01">
<Caption><h2>Employee Table</h2></caption>
<tr>
<th>Username</th>
<th>Email</th>
<th>Telephone</th>
</tr>
<tr>
<td>Jill</td>
<td>Jill@gmail.com</td>
<td>659843264</td>
</tr>
<tr>
<td>Eve</td>
<td>Eve@gmail.com</td>
<td>947896543</td>
</tr>
<tr>
<td>John</td>
<td>John@gmail.com/td>
<td>809764987</td>
</tr>
</table>
<tfoot>*Contact us for more details</tfoot>
</body>
</html>