Before deleting any td code, add the following CSS code to the Additional CSS:
width: 145px;
font-family: arial;
font-size: 14px;
font-weight: normal;
padding-top: 3px;
padding-bottom: 3px; padding-left: 5px;
vertical-align: top;
line-height: 1.3;
word-wrap: word-break;
and delete all the HTML code apart from text-align:center in the first row and your code should now look like this:
<table>
<tbody>
<tr>
<th colspan="4">This is a Main Header</th>
</tr>
<tr>
<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>
</tr>
<tr>
<td style="text-align: center;” ><em>Item 1</em></td>
<td> style="text-align: center;” <em>Item 2</em></td>
<td style="text-align: center;” ><em>Item 3</em></td>
<td style="text-align: center;” ><em>Item 4</em></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>
</tbody>
</table>
Now let’s copy and paste the extra td cells to your table and your final code should look like this:
<table>
<tbody>
<tr>
<th colspan="4">This is a Main Header</th>
</tr>
<tr>
<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>
</tr>
<tr>
<td style="text-align: center;” ><em>Item 1</em></td>
<td> style="text-align: center;” <em>Item 2</em></td>
<td style="text-align: center;” ><em>Item 3</em></td>
<td style="text-align: center;” ><em>Item 4</em></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>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>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>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>
</tbody>
</table>
Using CSS, wherever possible, has reduced HTML coding by around 90%, and your table looks exactly the same as it it has been created using purely HTML:
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.
