.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
Creating a visually appealing HTML table involves more than just organizing data into rows and columns. The background color of your HTML table can significantly enhance the readability and aesthetics of your data presentation.
In this blog, you will learn how to add background color to your HTML table, including single colors, gradient colors, and striped patterns, while ensuring your table remains accessible and stylish.
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 color to your HTML table can transform it from a simple data container to a visually engaging component of your web page. Whether you choose a solid color, gradient, or striped pattern, the key is to maintain readability and aesthetic appeal. Reusable CSS classes should be used, and responsive design should be taken into account to cater to all users.
Experiment with different colors and styles to find the perfect look for your HTML table. You can make tables that improve the overall appearance of your page as well as fulfill their intended function with the help of the techniques and examples this blog post covers.
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.
