Education
Lead Designer
Last updated onNov 15, 2024
Last updated onNov 15, 2024
Creating a captivating HTML table goes beyond simply arranging data in rows and columns—it's about transforming raw data into a visually engaging experience. By adding the right background colors, you can boost readability, highlight important information, and add a stylish touch to your table.
In this guide, we’ll show you how to bring your HTML tables to life with color, from simple solids to gradients and stripes, all while keeping accessibility and design in mind. Ready to turn your tables into data-driven art? Let’s dive in!
Before diving into the styling of an HTML table, it's essential to understand its basic structure. An HTML table is created using the <table> tag, with <tr> representing a table row, and <td> or <th> representing a table cell or header cell or first row, respectively. The combination of these elements forms the skeleton of your table.
To add a background color to your HTML table, CSS (Cascading Style Sheets) is used to style the elements. You can apply a background color to the entire table, individual table rows, column, or specific table cells.
To set the background color for the entire table, you can use the background-color property in CSS. Here's an example of how to apply a solid color to your table:
1<!DOCTYPE html> 2<html> 3<head> 4 <style> 5 table { 6 background-color: #f2f2f2; /* Light grey background */ 7 } 8 </style> 9</head> 10<body> 11 <table> 12 <tr> 13 <th>Order from Sun</th> 14 <th>Planet</th> 15 <th>Diameter (km)</th> 16 <th>Interesting Fact</th> 17 </tr> 18 <tr> 19 <td>1</td> 20 <td>Mercury</td> 21 <td>4,879</td> 22 <td>Smallest planet in our solar system.</td> 23 </tr> 24 <tr> 25 <td>2</td> 26 <td>Venus</td> 27 <td>12,104</td> 28 <td>Hottest planet in our solar system.</td> 29 </tr> 30 <tr> 31 <td>3</td> 32 <td>Earth</td> 33 <td>12,742</td> 34 <td>The only planet known to support life.</td> 35 </tr> 36 <tr> 37 <td>4</td> 38 <td>Mars</td> 39 <td>6,779</td> 40 <td>Known as the Red Planet.</td> 41 </tr> 42 <tr> 43 <td>5</td> 44 <td>Jupiter</td> 45 <td>139,820</td> 46 <td>Largest planet in our solar system.</td> 47 </tr> 48 </table> 49</body> 50</html>
You can also apply background color to individual table rows or table cells using CSS classes or inline styles. For example, to add a background color to a specific row:
1<tr style="background-color: #ffcccb;"> 2 <!-- Light red background --> 3 <td>3</td> 4 <td>Earth</td> 5 <td>12,742</td> 6 <td>The only planet known to support life.</td> 7</tr>
Or, to style a single table cell:
1<tr> 2 <td>3</td> 3 <td style="background-color: #add8e6;"> 4 <!-- Light blue background --> 5 Earth 6 </td> 7 <td>12,742</td> 8 <td>The only planet known to support life.</td> 9</tr>
A gradient background color can make your HTML table stand out. CSS3 provides the linear-gradient function to create a gradient effect. Here's how you can apply a gradient background to your table:
1<style> 2 table { 3 background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from pink to orange */ 4 } 5</style>
Striped tables improve readability by differentiating adjacent rows. You can use the :nth-child pseudo-class to apply alternating background colors to table rows. Here's an example:
1<style> 2 tr:nth-child(odd) { 3 background-color: #efefef; /* Light grey for odd rows */ 4 } 5 tr:nth-child(even) { 6 background-color: #ffffff; /* White for even rows */ 7 } 8</style>
CSS classes offer a way to apply styles to multiple elements without repeating code. Create a class for your background color and apply it to any table row or cell:
1<style> 2 .blue-background { 3 background-color: #add8e6; /* Light blue background */ 4 } 5</style>
1<tr class="blue-background"> 2 <td>1</td> 3 <td>Mercury</td> 4 <td>4,879</td> 5 <td>Smallest planet in our solar system.</td> 6</tr> 7<tr class="blue-background"> 8 <td>2</td> 9 <td>Venus</td> 10 <td>12,104</td> 11 <td>Hottest planet in our solar system.</td> 12</tr>
To enhance your table's design, you might want to control the borders and padding of your cells. The border property allows you to set the border width, style, and color. The padding property controls the space between the cell content and its border.
1<style> 2 td, th { 3 border: 1px solid #ddd; /* Light grey border */ 4 padding: 8px; 5 } 6</style>
Adding background colors to your HTML tables does more than just decorate—it brings clarity, style, and an inviting aesthetic to your data displays. By applying solid colors, gradients, or striped patterns, you can make your tables not only visually engaging but also highly readable. Remember to use reusable CSS classes for flexibility, and ensure your designs are responsive to reach all users.
Experiment with the techniques and styles covered in this post to create tables that enhance your website’s overall look and functionality. With a bit of creativity, you can elevate your tables from simple data containers to standout components of your web design.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
