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:


And this was the code that generated it:

<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>

Ok? Then let's make some changes by inserting the following code where you want to make the changes: <span style="color: #ff0000;"> Don't forget to insert the closing </span> tag at the end of the word or text you want to change. If you want to change the whole paragraph, just move the </span> tag to the end of the paragraph. After making the changes, your code should now 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;"><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.




Join the Discussion
Write something…
Recent messages
CMacLellan Premium Plus
Good morning Sir.
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
Reply
Harrysastar2 Premium
Hi, Chuck, you're very welcome, and thanks for the comment, happy you found the tutorials helpful.

All the code, HTML and CSS, throughout the tutorials can be copied and pasted. So, may I suggest you get yourself a test site and, starting with Part 1, copy and paste the code step-by-step, adding to or changing the attributes with your own.

Doing this will give you a better understanding of how HTML and CSS works, at the same time improving your skill level. Don't worry, using a test site won't do any damage, if something doesn't work, delete it and try another approach.

If you have any questions regarding HTML and CSS, I will do my best to answer them, or help wherever I can. Best wishes.
Reply
CMacLellan Premium Plus
Thank You Sir...Much Appreciated!
Have a Great Day!
-Chuck
Reply
Top