Centre a Table
<center>
<table border="1" bordercolor="#888" cellspacing="0" style="border-collapse:collapse;border-color:rgb(136,136,136);border-width:1px">
<tbody>
<tr>
<td style="text-align:left;width:60px"> </td>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
</tr>
<tr>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
</tr>
</tbody>
</table> <center>
<br>
Remove Border from your table
Change the black border lines (136,136,136) to white (255,255,255) or any colour desired (colour code reference website)
<table border="1" bordercolor="#888" cellspacing="0" style="border-collapse:collapse;border-color:rgb(136,136,136);border-width:1px">
<tbody>
<tr>
<td style="text-align:left;width:60px"> </td>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
</tr>
<tr>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
<td style="width:60px"> </td>
</tr>
</tbody>
</table>
<br>
(above table changed to red lines)
Adding a Background Colour to a Table or Cell
<center><table bgcolor="green" border="1" bordercolor="#888" cellspacing="0" style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;">
<tbody>
<tr>
<td style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
</tr>
<tr>
<td style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
</tr>
</tbody>
</table><center>
<center><table border="1" bordercolor="#888" cellspacing="0" style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;">
<tbody>
<tr>
<td style="width: 60px;"> </td>
<td bgcolor="orange" style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
</tr>
<tr>
<td style="width: 60px;"> </td>
<td style="width: 60px;"> </td>
<td bgcolor="aqua" style="width: 60px;"> </td>
</tr>
</tbody>
</table><center>
Merging (Spanning) table cells
Spanning rows and columns with "rowspan" and "colspan" requires two steps as demonstrated below:
Step One: Add the colspan/rowspan HTML
<table>
<tr>
<td>
<td>
<tr>
<td colspan=”2”>
<td>
<tr>
<td>
<td>
</table>
Step Two: Remove the unnecessary cell(s) from your table (note the use of random text to identify the correct <td> tag to remove.
<table>
<tr>
<td>
<td>
<tr>
<td colspan=”2”>
<td xxxxx>
<tr>
<td>
<td>
</table>
xxxxx
The resulting merged cells
NB: If you are “merging across cells in rows directly underneath each other you need a extra piece of code: <td colspan="2" rowspan="1">
Which would look like this code:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>/td>
<td colspan="2" rowspan="1"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>