Tables are essential pieces of your website. They are used to convey important data and information in an easy-to-understand manner. In essence, a table is a group or a collection of rows and columns that each contain certain types of information. They were initially intended to be a part of HTML markup.
While tables are the right way of presenting data, many designers avoid them merely for the fact that they can look unappealing. However, that can be changed with a little bit of work and by implementing some easy methods, for example, by changing the table background color. It isn’t time-consuming to easily make tables attractive with some tweaks.
You will soon find that presenting tabular data works best in tables, as is expected. Table cells are often used in HTML markups as components where content is placed to create a website. These cells, or grids, are essential parts of website designs. That’s why it is important for you to make your website’s tables attractive and well-oiled.
In this article created by our team at wpDataTables, we will take a look at how you can change and set the table background color easily. This can, at the very least, bring some variety to the content.
WordPress Tables
The default version of WordPress gives you, the creator, no significant help for creating or changing tables. So, you’ll have to do this manually. As a creator of a WordPress site, you must first enable the Text mode of the editor before changing the HTML code and inserting codes for tables into it.
In addition to that, adjusting the table background color has to be done manually. After creating a table, the background color of a table will automatically be set to match that of a theme background. The only way to make the table background unique is to change the values of the code and implement these changes with CSS later on.
How to Change Table Background Color Manually
When you want to incorporate an HTML table into your website, you might want to style it a bit first before putting information into table cells. You can, for example, change the background color of the HTML table, but there are some other changes that you can make to the table borders, column colors, and more.
Changing the CSS code is essential for all changes to the table design. Things like table background color are set in CSS code, as are all the properties of the whole HTML table and the properties of the rows and cells.
Now, let’s take a look at how to change the background colors manually by changing the CSS code.
How to Change the Background Color of the Whole Table
To do this, you simply have to insert the following piece of code.
<table style="background-color:#70163C;"> … </table>
Changing the Color of a Table Row
You can also change the color of an individual table row, which can differ from the table background color. When an individual row is a different color than the background, that desired table row will draw peoples’ attention. With the following passage of code, we can change the color of a single row. The text color is also altered.
<table style="background-color:#70163C;"> <tr style="background-color:#7F96FF;color:#ffffff;"> … </tr> </table>
Changing the Background Color of a Cell
Just like how you can change the color of an individual row, you can change the color of an individual cell, too. To change the color of a row, you can add the “style” property into the <td> brackets and define the color of the cell from there.
<table style="background-color:#70163C;"> <tr style="background-color:#7F96FF;color:#ffffff;"> <td style="background-color:#7F96FF;">Table cell</td> </tr> </table>
Cell Background and Color of the Text
Next, let’s take a look at how to set the background color for whole rows and how to change corresponding text colors. You can do that by adding the background color properties to <tr> tags, as it will be exemplified with the source code below. Border colors will also be altered, as they can coincide with the background colors.
<style type="text/css">
table {border:ridge 5px red;}
table td {border:inset 1px #000;}
table tr#ROW1 {background-color:red; color:white;}
table tr#ROW2 {background-color:white;}
table tr#ROW3 {background-color:blue; color:white;}
table td#CELL9 {border:inset 4px red; background-color:navy;}
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td
<td id="CELL9">Cell 3.3</td>
</tr>
</table>
Using Plugins to Change the Table Background Color
You can simplify the whole process of changing the table background color by using some plugins, instead. By default, WordPress doesn’t offer the feature to change table colors, but you can incorporate some plugins that will allow you to do it very quickly. Here, we will take a look at the best plugins you can use to change the table background color on WordPress sites, and how to use them.
wpDataTables
wpDataTables is a best-selling WordPress table plugin that makes your work with tables, charts and data management super easy. 30,000+ companies and individuals already trust wpDataTables to work with financial, scientific, statistical, commercial and other data.
WordPress tables created with wpDataTables plugin are natively responsive and can be used on any device types.
wpDataTables works fast whether your table has a few rows, or a few million. All the operations will be handled by the MySQL server.
wpDataTables allows you to create individual filters for your dataset, which is quite a handy way to quickly narrow down the results of your WordPress table.
TablePress
Creating stunning and appealing tables with unique background colors has never been easier than with TablePress. You can change the colors using the Plugin Options tab in TablePress, which allows you to change the colors of the table quickly.
It also allows you to change the color of a single row. For example, a piece of code like this might be used for doing so:
.tablepress-id-N .row-X td {
background-color: #ff0000;
}
You can change the color code to pick the colors that you want to have.
Ninja Tables
Another option is the Ninja Tables plugin. This plugin allows you to create stunning and responsive tables. Everything can be done with only a couple of clicks; all you need to do is open the “edit” part of the plugin. This reveals some very comprehensive options for altering your tables.
If you enjoyed reading this article on how to easily set the table background color, you should check out this one about Bootstrap tables.
We also wrote about a few related subjects like How to center a table with CSS, HTML tables, responsive tables with CSS, CSS tables and jQuery table plugins.
