Tables are a powerful tool for organising and presenting tabular data on a webpage. However, their default appearance might not always match your website’s design. Thankfully, CSS allows you to style tables to make them visually appealing and fit seamlessly into your overall layout. In this comprehensive guide, we will explore various techniques to style tables with CSS. From changing the table’s colour scheme and borders to formating table headers and cell content, these techniques will help you create beautifully styled tables that enhance the user experience and presentation of data.
1. Basic Table Structure
Before we dive into styling, let’s start with the basic structure of an HTML table:
<!DOCTYPE html>
<html>
<head>
<title>Styled Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</body>
</html>In this example, we have a simple table with a header row (thead) and data rows (tbody). The table has three columns, and you can add more rows to accommodate your data.
2. Basic Styling
Let’s start by applying some basic styling to the table to make it visually appealing:
/* Basic table styling */
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th, td {
padding: 10px;
border: 1px solid #ddd; /* Light gray border */
}
thead {
background-color: #f2f2f2; /* Light gray background for the header */
font-weight: bold;
}
th {
background-color: #007bff; /* Blue background for header cells */
color: #fff; /* White text color for header cells */
}In this example, we set the width of the table to 100% to make it responsive and fill the available space. The border-collapse: collapse; property ensures that adjacent table cell borders merge into a single border.
We apply padding and a light grey border to both headers (th) and data cells (td) to create spacing and visual separation between table elements. The header cells have a bold font weight and a light grey background, while the header row (thead) has a slightly darker grey background.
3. Alternating Row Colours
Adding alternating row colours can improve readability, especially in large tables:
/* Alternating row colours */
tbody tr:nth-child(even) {
background-color: #f9f9f9; /* Light gray background for even rows */
}In this example, we use the :nth-child(even) pseudo-class to select every even row in the tbody and apply a light grey background colour.
4. Styling Table Borders
You can customise the table borders to achieve a cleaner and more elegant appearance:
/* Styling table borders */
table {
border: 2px solid #ddd; /* Light gray border for the entire table */
}
th, td {
border: 1px solid #ddd; /* Light gray border for cells */
}In this example, we set a light grey border for the entire table (table) and individual cells (th, td). Adjust the border widths and colours to match your design preferences.
5. Centreing the Table
To centre the table within its container, use the following CSS:
/* Centreing the table */
table {
margin: 0 auto;
}The margin: 0 auto; rule sets equal left and right margins, effectively centring the table within its parent container.
6. Responsive Table
For smaller screens, you might want the table to be more responsive. You can make the table scroll horizontally on small devices:
/* Responsive table */
@media (max-width: 600px) {
table {
overflow-x: auto;
}
}In this example, we use a media query to apply the overflow-x: auto; property to the table when the screen width is 600 pixels or less. This allows users to scroll horizontally to view the entire table on smaller devices.
7. Hover Effects
Add hover effects to improve the interactivity and user experience when interacting with the table:
/* Hover effect on table rows */
tbody tr:hover {
background-color: #f0f0f0; /* Light gray background on hover */
cursor: pointer;
}In this example, we apply a light grey background colour to table rows (tr) when users hover over them. The cursor: pointer; rule changes the cursor to a pointer, indicating that the row is interactive.
8. Styling Table Header Group (thead)
For more complex tables with header groups, you can apply specific styles to the thead and its elements:
/* Styling table header group (thead) */
thead th {
background-color: #007bff; /* Blue background for header cells */
color: #fff; /* White text color for header cells */
padding: 15px;
}
thead tr {
background-color: #f2f2f2; /* Light gray background for thead row */
}In this example, we style the header cells (th) with a blue background and white text colour, and the thead row with a light grey background colour.
9. Customising Cell Content
You can further customise the appearance of the cell content, such as text alignment, font size, and font family:
/* Customising cell content */
td {
text-align: center; /* Centre-align cell content */
font-size: 14px;
font-family: Arial, sans-serif;
}In this example, we center-align the content within data cells (td), set the font size to 14px, and use the Arial font family.
10. Adding Icons and Images
To include icons or images within table cells, use the following CSS:
/* Adding icons and images */
td img {
display: block; /* Remove any extra spacing around images */
margin: 0 auto; /* Centre images within the cell */
}In this example, the CSS ensures that images within td elements are centred and have no extra spacing around them.
11. Conclusion
Styling tables with CSS allows you to create visually appealing and user-friendly data presentations on your website. By customising the table’s colour scheme, borders, headers, and cell content, you can tailor the table to match your design aesthetic and improve the overall user experience. Whether you’re presenting simple data or complex information, employing the techniques covered in this guide will help you create beautifully styled tables that effectively convey your data to your audience. Remember to experiment with different styles and layouts to find the perfect match for your website’s design. With the knowledge gained from this comprehensive guide, you’re well-equipped to elevate your table styling skills and create stunning tables that enhance your website’s visual appeal and usability.