Welcome to the final part of how to generate tables without the aid of a plugin.

In Parts 1 and 2 we built a basic table using only HTML code. That generates a lot of code, so in Part 3 we'll look at ways to reduce that code to a minimum and still maintain the basic table.

In Part 2 we finished up with a table looking like this:

And this was the html code that produced it:

<table style="width: 580px; border: 2px solid #000000; background-color: #e9e9e9;"><tbody>
<tr>
<th style="border: 1.5px solid #000000; font-family: arial; font-size: 16px; font-weight: 600; vertical-align: center; line-height: 0;" colspan="4">This is a Main Header</th>
</tr>
<tr>
<th style="border: 1.5px solid #000000; font-family: arial; font-size: 14px; font-weight: 600; vertical-align: center; line-height: 0;" colspan="2">This is a Sub-Header</th>
<th style="border: 1.5px solid #000000; font-family: arial; font-size: 14px; font-weight:
600; vertical-align: center; line-height: 0;" colspan="2">This is a Sub-Header</th>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; text-align: center; vertical-align: center; line-height: 1.3; word-wrap: word-break;"><em>Item 1</em></td>
<td style="border-right: 1.5px solid #000000; width: 145px;
font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom:
3px; text-align: center; vertical-align: center; line-height: 1.3;
word-wrap: word-break;"><em>Item 2</em></td>
<td style="border-right: 1.5px solid #000000; width: 145px;
font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom:
3px; text-align: center; vertical-align: center; line-height: 1.3;
word-wrap: word-break;"><em>Item 3</em></td>
<td style="border-right: 1.5px solid #000000; width: 145px;
font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom:
3px; text-align: center; vertical-align: center; line-height: 1.3;
word-wrap: word-break;"><em>Item 4</em></td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy
dog.</td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
<td style="border-right: 1.5px solid #000000; width: 145px; font-family: arial; font-size: 14px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; line-height: 1.3; word-wrap: word-break;">The quick brown fox jumps over the lazy dog.</td>
</tr>
</tbody>
</table>

Ok, let's see how much of that HTML code we can dispense with without changing the table layout.


Join the Discussion
Write something…
Recent messages
Jimmyk16 Premium
Fantastic, I use a WP plugin, this changes the way I can do things manually. Changing the colors in the rows and the text makes the table stand out.
Thanks for your hard work.
Stay healthy and safe.
Jimmy.
Reply
Harrysastar2 Premium
You're more than welcome, Jimmy, glad you found the tutorial helpful, and thanks for the comment.

Even a basic knowledge of HTML and CSS will not only let you dispense with a number of plugins, but will give you more control over how you finally want your website to look, rather than relying on WYSIWYG. If I can help any further, give me a shout. Best wishes.
Reply
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