CSS Tables Style
CSS
HTML tables are styled with CSS to increase readability and visual appeal.
CSS styling on table.
➔ CSS styling on tables includes applying width, border collapsing, padding, text-align, vertical-align, background-color, nth-child attributes for zebra-striping, to enhance user interface and visual appeal.
➔ The border-collapse property controls the borders of adjacent cells.
table {
border-collapse: collapse;
}
➔ The width property specifies the width of the table as a percentage of the parent container or as a fixed length.
table {
width: 100%;
}
➔ The border property specifies the style, width, and color of the border around table, th, and td elements.
table, tr, th, td {
border: 1px solid #00000050;
}
➔ The padding property specifies the space between the cell contents and the cell edge.
tr, th, td {
padding: 10px;;
}
➔ The text-align property specifies the horizontal alignment of the text.
td, th {
text-align: left;
}
➔ The vertical-align property specifies the vertical alignment of content within cells.
td, th {
vertical-align: top;
}
➔ The tr:nth-child(even/odd) applies a zebra-striping to the <tr> elements.
tr:nth-child(odd) {
background-color: #fafaea;
}
Syntax
table { border-collapse: collapse; width: 100%; }
th { background-color: #ccc; border: 1px solid #000; padding: 10px; text-align: left; }
td { border: 1px solid #d5d5d5; padding: 5px; text-align: left; }
tr:nth-child(even) { background-color: #efefef; }
tr:hover { background-color: #ddd; }
th, tr { height: 25px; }
caption {font-weight: bold; margin: 10px; }
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table style Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 10pt;
table-layout: fixed;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 2px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
th, tr { height: 25px; }
</style>
</head>
<body>
<h3>CSS Table style Example</h3>
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elias</td>
<td>Fischer</td>
<td>Male</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td>Maria</td>
<td>Petrov</td>
<td>Female</td>
<td></td>
<td>Bulgaria</td>
</tr>
<tr>
<td>Wang</td>
<td>Zihan</td>
<td>Male</td>
<td></td>
<td>China</td>
</tr>
<tr>
<td>Amelia</td>
<td>Novak</td>
<td>Female</td>
<td></td>
<td>Czech Republic</td>
</tr>
<tr>
<td>Lucas</td>
<td>Martin</td>
<td>Male</td>
<td></td>
<td>France</td>
</tr>
<tr>
<td>Alexander</td>
<td>Müller</td>
<td>Male</td>
<td></td>
<td>Germany</td>
</tr>
<tr>
<td>Viktor</td>
<td>Orbán</td>
<td>Male</td>
<td></td>
<td>Hungary</td>
</tr>
<tr>
<td>Aarush</td>
<td>Agarwal</td>
<td>Male</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Isabella</td>
<td>Murphy</td>
<td>Female</td>
<td></td>
<td>Ireland</td>
</tr>
<tr>
<td>Sara</td>
<td>Meloni</td>
<td>Female</td>
<td></td>
<td>Italy</td>
</tr>
<tr>
<td>Maya</td>
<td>Mizrahi</td>
<td>Female</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Sato</td>
<td>Haru</td>
<td>Male</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Liam</td>
<td>Hansen</td>
<td>Male</td>
<td></td>
<td>Norway</td>
</tr>
<tr>
<td>Daniel</td>
<td>Kowalski</td>
<td>Male</td>
<td></td>
<td>Poland</td>
</tr>
<tr>
<td>Emma</td>
<td>Silva</td>
<td>Female</td>
<td></td>
<td>Portugal</td>
</tr>
<tr>
<td>Mark</td>
<td>Volkov</td>
<td>Male</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Jasmina</td>
<td>Horák</td>
<td>Female</td>
<td></td>
<td>Slovakia</td>
</tr>
<tr>
<td>Matteo</td>
<td>García</td>
<td>Male</td>
<td></td>
<td>Spain</td>
</tr>
<tr>
<td>Hanna</td>
<td>Johansson</td>
<td>Female</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Noah</td>
<td>Schneider</td>
<td>Male</td>
<td></td>
<td>Switzerland</td>
</tr>
<tr>
<td>David</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.