After copying and pasting the extra td cells, your final code should look like this:

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

And your final table like this:

That's it on building and formatting a basic table, I hope it helped you gain a better understanding of html code.
"But that's a lot of coding," you may say. So, how do we reduce the amount of html coding? We use CSS. Interested? Then take a look at Part 3.



Join the Discussion
Write something…
Top