View video tutorial
HTML Table Styling
HTML
A table or any parts of it can be made more attractive Using CSS.
CSS in HTML table.
➔ CSS style can be used in <tr>, <th>, or <table>
➔ tr:hover effect can be applied on tr to look row more interactive.
➔ tr:nth-child(even), tr:nth-child(odd) can be used to make alternate colors in rows.
Syntax
<!--CSS-->
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: black;
color: white;
}
</style>
<!--HTML-->
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tulip</td>
<td>Netherlands</td>
</tr>
<tr>
<td>Rose</td>
<td>UK/USA</td>
</tr>
</tbody>
</table>
Flowers Table
| Name | Found in significant numbers |
|---|---|
| Tulip | Netherlands |
| Rose | UK/USA |
| Lotus | India/Vietnam |
| Sunflower | Ukraine |
| Orchid | Brazil |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Flower Table</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tulip</td>
<td>Netherlands</td>
</tr>
<tr>
<td>Rose</td>
<td>UK/USA</td>
</tr>
<tr>
<td>Lotus</td>
<td>India/Vietnam</td>
</tr>
<tr>
<td>Sunflower</td>
<td>Ukraine</td>
</tr>
<tr>
<td>Orchid</td>
<td>Brazil</td>
</tr>
</tbody>
</table>
</body>
</html>
Click on the "See output" button to see how it works.