Right, that's the borders taken care of, but what about the rest of the table? Ok, let's start changing fonts, sizes, etc, starting with the headers. Add the following code to the table tr th in Additionnal CSS code:
font-family: arial;
font-size: 16px;
font-weight: 600;
line-height: 0;
vertical-align: center;
text-align: center;
and then delete the HTML code apart from colspan, as CSS does not support it. Your code should now look like this:
<table>
<tbody>
<tr>
<th colspan="4">This is a Main Header</th>
</tr>
<tr>
<th colspan="2">This is a Sub-Header</th>
<th colspan="2">This is a Sub-Header</th>
</tr>
<tr>
<td style="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="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="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="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>
<td style="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="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="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="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>
And your table like this:
But the sub-headers are now the same size as the main header? Yes, that's because CSS will standardize everything throughout your posts and pages. But, as mentioned earlier, HTML will overrule CSS, so we should have left font size in the sub-header tags: style="font-size: 14px;"
<th style="font-size: 14px;" colspan="2">This is a Sub-Header</th>
<th style="font-size: 14px;" colspan="2">This is a Sub-Header</th>
The sub-headers should now be back to normal:
That's the headers sorted, now let's see how much we can reduce the td HTML code by.
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
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.
