HTML Table Styling
Use CSS to make your tables look better.
HTML Table - Zebra Stripes
Giving every other row a background color creates a zebra-stripe effect. Use the tr:nth-child(even) selector.
Note: Using (odd) instead colors rows 1, 3, 5, and so on, rather than 2, 4, 6.
Example
Every other row colored.
Prompt
A table of numbers 1 to 20 in a 5-row by 4-column grid, with a zebra-stripe effect coloring every other row using the CSS tr:nth-child(even) selector.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
HTML Table - Vertical Zebra Stripes
For vertical stripes, color every other column instead of every other row, using :nth-child(even) on the cells.
Note: Put the selector on both th and td if you want the stripes on headers and regular cells.
Example
Every other column colored.
Prompt
A table of numbers 1 to 20 with vertical zebra stripes, coloring every other column using td:nth-child(even) and th:nth-child(even).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
Combine Vertical and Horizontal Zebra Stripes
You can combine both to stripe every other row and every other column. Using a transparent rgba() color makes the overlaps blend into an overlapping effect.
Example
Stripes on both rows and columns with transparency.
Prompt
A table of numbers 1 to 20 combining horizontal and vertical zebra stripes using a transparent rgba() background on both even rows and even columns, producing an overlapping effect.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even), td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
<tr><td>17</td><td>18</td><td>19</td><td>20</td></tr>
</table>
</body>
</html>
Horizontal Dividers
Adding a border only at the bottom of each row gives a table with horizontal dividers. Add the border-bottom property to all tr elements.
Example
A table with horizontal divider lines.
Prompt
A table with only horizontal dividers, made by adding a bottom border to every tr. Columns First Name, Last Name, Savings with three people.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr {
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>
Hoverable Table
Use the :hover selector on tr to highlight a row when the mouse moves over it.
Example
Rows that highlight on hover.
Prompt
A table whose rows highlight on mouse over using the tr:hover selector. Columns First Name, Last Name, Savings with three people.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:hover {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>