Still with us? Brilliant. In Part 1, as a training exercise, we went step-by-step through the various steps to create a basic table without using a plugin, and finished up with code that looked like this:

<table style="width: 580px; border: #000000 solid 2px;">
<tbody>
<tr>
<th style="border: 1.5px solid #000000;" colspan="4"></th>
</tr>
<tr>
<th style="border: 1.5px solid #000000;" colspan="2"></th>
<th style="border: 1.5px solid #000000;" colspan="2"></th>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
</tr>
<tr style="border: 1.5px solid #000000;">
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
<td style="border-right: 1.5px solid #000000;"></td>
</tr>
</tbody>
</table>

And a table that looked like this:


Happy so far? Then let's change the background color, and add a Main Header, Sub-Headers, and Content.



Join the Discussion
Write something…
Top