Beautify a HTML table with a few simple CSS styles¶
Preview the effect¶
Table with default style¶
CSS decorated table¶
How to make a table pretty?¶
The basic means of beautification:
- Make the table wider.
- Add more space around each table cell.
- Use horizontal borders.
- Use stripes.
- Highlight the row that your mouse points at.
Code example¶
Table HTML¶
Here's a simple table for illustration:
<table>
<thead>
<tr>
<th>date</th>
<th>url</th>
<th>method</th>
<th>status_code</th>
<th>bytes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/find_biggest_files</td>
<td>GET</td>
<td>200</td>
<td>2.7KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>200</td>
<td>3KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>301</td>
<td>169B</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/auto_sqlalchemy_models</td>
<td>GET</td>
<td>200</td>
<td>2.2KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/python_memcached</td>
<td>GET</td>
<td>200</td>
<td>2.4KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/python_memcached</td>
<td>GET</td>
<td>200</td>
<td>2.4KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/dynamic_table</td>
<td>GET</td>
<td>200</td>
<td>2.9KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/python_sys_path</td>
<td>GET</td>
<td>200</td>
<td>2.3KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/dynamic_table</td>
<td>GET</td>
<td>200</td>
<td>2.9KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>200</td>
<td>3KB</td>
</tr>
</tbody>
</table>
CSS that make the table above prettier¶
/* wider table */
table {
width: 100%;
border-collapse: collapse;
}
/* more space around each table cell */
th, td {
padding: 8px;
text-align: left;
}
/* horizontal border */
tr {
border-bottom: 1px solid #ddd;
}
/* stripes */
tr:nth-child(even) {
background-color: #eee;
}
/* highlight the pointed row */
tr:hover {
background-color: #ccc;
}
Note:
tr { border-bottom: 1px solid #ddd; }will not work if you omittable { border-collapse: collapse; }.- Update
background-colorof stripes and highlighted row according to your website's overall style.
Put it together¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pretty table</title>
<style>
/* wider table */
table {
width: 100%;
border-collapse: collapse;
}
/* more space around each table cell */
th, td {
padding: 8px;
text-align: left;
}
/* horizontal border */
tr {
border-bottom: 1px solid #ddd;
}
/* stripes */
tr:nth-child(even) {
background-color: #eee;
}
/* highlight the pointed row */
tr:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>date</th>
<th>url</th>
<th>method</th>
<th>status_code</th>
<th>bytes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/find_biggest_files</td>
<td>GET</td>
<td>200</td>
<td>2.7KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>200</td>
<td>3KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>301</td>
<td>169B</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/auto_sqlalchemy_models</td>
<td>GET</td>
<td>200</td>
<td>2.2KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/python_memcached</td>
<td>GET</td>
<td>200</td>
<td>2.4KB</td>
</tr>
<tr>
<td>Jun 18, 2022</td>
<td>/posts/python_memcached</td>
<td>GET</td>
<td>200</td>
<td>2.4KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/dynamic_table</td>
<td>GET</td>
<td>200</td>
<td>2.9KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/python_sys_path</td>
<td>GET</td>
<td>200</td>
<td>2.3KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/dynamic_table</td>
<td>GET</td>
<td>200</td>
<td>2.9KB</td>
</tr>
<tr>
<td>Jun 17, 2022</td>
<td>/posts/gunicorn_concurrency</td>
<td>GET</td>
<td>200</td>
<td>3KB</td>
</tr>
</tbody>
</table>
</body>
</html>
Posted on 2022-06-28