To display a group of data in a tabular form the HTML <table> element is used, with <tr> tag to define the table row, <th> tag to define the table header, and the <td> tag to define the table data. Several CSS properties can be used to apply a style to an HTML table, thus providing a better look and feel. Some of these CSS properties are:
- border
- border-collapse
- padding
- width
- height
- text-align
- color
- background-color
CSS Table Border:
The CSS border property can be used to set a border for an HTML table.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:5
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Explanation:
In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 5
CSS Table Border Collapse:
The CSS border-collapse property can be used to collapse all the borders of the table in one border only.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:5
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Explanation:
In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 5
CSS Table Padding:
The CSS padding property can be used to define padding for the table header and table data.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:5
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Explanation:
In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 5
CSS Table: Styling even and odd cells:
We can style even and odd table cells to display different background colors on even and odd cells of an HTML table using CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:10
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
table#t1 tr:nth-child(even) {
background-color: crimson;
color: white;
}
table#t1 tr:nth-child(odd) {
background-color: wheat;
}
table#t1 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table id="t1">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>CITY</th>
</tr>
<tr>
<td>Tom</td>
<td>10</td>
<td>London</td>
</tr>
<tr>
<td>Jerry</td>
<td>8</td>
<td>London</td>
</tr>
<tr>
<td>Bruno</td>
<td>12</td>
<td>Wells</td>
</tr>
</table>
</body>
</html>
Explanation:
In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 10
