Ok, let's change the color of some words within the td cells using the span element. We'll use hex color #ff0000 (red) to make the changes. This how the final table looked on Page 6:
<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>
<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;"><span style="color: #ff0000;">The quick</span> brown fox jumps over the lazy dog.</td>
<td style="background-color: #f6c9f0;">The quick<span style="color: #ff0000;">brown fox</span> 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<span style="color: #ff0000;">
jumps over</span> the lazy dog.</td>
</tr>
<tr>
<td style="background-color: #f6dfd5;"><span style="color: #ff0000;">The quick brown fox jumps over the lazy dog.</span></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<spanstyle="color: #ff0000;">the lazy dog.</span></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 the table like this:
That's the end of the tutorials on generating tables without a plugin. I hope you have found them helpful and how a knowledge of some basic HTML and CSS can greatly improve, and give your more control, over the appearance of your website.
If you have found the tutorials helpful, a comment and/or like would be most appreciated. Thank you, and best wishes.
I will be honest with you...this training is way above my skill level, but I am saving it for when it isn't. Thanks for putting it out there.
Have a Great Day!
-Chuck