CSS Table

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:

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:

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.

Alex Martin