The stylesheet that comes with your theme will dictate the fonts, font sizes, h1-h6 headers, tables, colors, and everything else applicable to your posts and pages.

What if I want to change fonts, sizes, or anything else in the theme's stylesheet? Make the changes in your child theme or Additional CSS, never in the parent theme. At best, you will lose any changes you made if the theme is updated; at worst, you may break your site!

Remember, any changes your make to the stylesheet will apply to every post, page, table, etc, throughout your website. But what if I want to make some changes in a particular post or page? Use HTML. As mentioned earlier, it overrules CSS.

Want to change the background color of the basic table cells? Then let's give it a try. First, let's copy and paste the code that generated the basic code. Now we can start making the changes. Once you have made the changes, your code should look like this:

<table>
<tbody>
<tr>
<th style="background-color: #f6d4c9;" colspan="4">This is a Main Header</th>
</tr> <tr>
<th style="font-size: 14px; background-color: #ebf27f;" colspan="2">This is a Sub-Header</th>
<th style="font-size: 14px; background-color: #ebf27f;" colspan="2">This is a Sub-Header</th>
</tr>
<tr>
<td style="text-align: center; background-color: #78fcb2;"><em>Item 1</em></td>
<td style="text-align: center; background-color: #78fcb2;"><em>Item 2</em></td>
<td style="text-align: center; background-color: #78fcb2;"><em>Item 3</em></td>
<td style="text-align: center; background-color: #78fcb2;"><em>Item 4</em></td>
</tr>
<tr>
<td style="background-color: #f6c9f0;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6c9f0;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6c9f0;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6c9f0;">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<td style="background-color: #f6dfd5;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6dfd5;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6dfd5;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6dfd5;">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<td>The quick brown fox jumps over the lazy dog.</td>
<td>The quick brown fox jumps over the lazy dog.</td>
<td>The quick brown fox jumps over the lazy dog.</td>
<td>The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr>
<td style="background-color: #eddabb;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #eddabb;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #eddabb;">The quick brown fox jumps over the lazy dog.</td>
<td style="background-color: #eddabb;">The quick brown fox jumps over the lazy dog.</td>
</tr>
</tbody>
</table>

And your table like this:

Remember, all the data in these tutorials are examples only, you can generate your tables to suit. What I would suggest, particularly if you aren't familiar with basic HTML and CSS code, you copy and paste the final code into your test site and start making changes there to familiarize yourself with HTML and CSS.

Don't worry, using a test site won't cause any damage, if your changes don't work, just delete them and try again, or, better still, look for something missing in your code. Have you left a semi-colon (;), open or closing quote mark ("), open or closing tag (< >), etc, out? Any one of these missing will corrupt the code.

As well as changing background color, what it you want to highlight a word or sentence in a paragraph in a post, page, or table? Use the <span></span> tag. This will prevent the word or sentence turning over to a new line, which would happpen if you used the <p></p> tag.