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
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
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.
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.
CMacLellan
Premium Plus
