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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.