Ok, let's start by adding the following code to the main header tag: font-family: arial; font-size: 16px; font-weight: 600; vertical-align: center; line-height: 0;

Now the sub-header tags: font-family: arial; font-size: 14px; font-weight: 600; vertical-align: center; line-height: 0;

Finally, the data tags. First, what the item is over the description by inserting the following code: 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;"

Now the description: 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;"

Your code should now look like this:

<table style="width: 580px; border: #000000 solid 2px; 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>
</tr>
</tbody>
</tablel>

And your table like this:

Happy with that? Then lot's copy and paste the td cells to complete the table.



Join the Discussion
Write something…
Top