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.
Tag Description
<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
Example:
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>Output:
Sofia Singh
The Tech Platform
Commentaires