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:50%">
<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 50%. A 2px solid black border is also added to the table using the CSS border property.
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:50%">
<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 50%. A 2px solid black border is also added to the table using the CSS border property. All the borders are then collapsed into one border by using the CSS border-collapse property.
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:50%">
<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 50%. A 2px solid black border is also added to the table using the CSS border property. A padding is then added of size 10px for each cell in the table.
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:100%;
}
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 100%. 1px solid black border is also added to the table using the CSS border property. A padding is then added of size 10px for each cell in the table. In this example, we are adding a special style to the table with the id “t1”. A crimson background color and a white text color are added to the even rows, while a wheat background color is added to the odd rows. Again the style is differently defined for the header row with a black background color and a white text color.