[thelist] formatting tables with css

[Tim Medlen]

I can control all the elements of the table tag as I would have done with
HTML in css, i.e:
<table border="0" width="700px" align="center">
etc, except for two rather important ones - cellspacing and cellpadding.
How are these controlled in css, if they can be?



  You can target the individual cells directly:

 <style type="text/css">
<!--
table#main {
    border : 1px solid #000;
	width : 300px;
}

td.cell1 { padding : 25px;  }
td.cell2 { padding : 5px;  }
td.cell3 { padding : 10px;  }
td.cell4 { padding : 0px;  }
-->
</style>

 <table id="main">
<tr>
    <td class="cell1" valign="top">Cell 1</td>
    <td class="cell2" valign="top">Cell 2</td>
</tr>
<tr>
    <td class="cell3" valign="top">Cell 3</td>
    <td class="cell4" valign="top">Cell 4</td>
</tr>
</table>

 haven't fully tested cross browser, but seems to work ok. A side note, I've
always felt cellpadding should of been an attribute of <td>, not <table>,
cellspacing yes, but padding since it's inside could've been different in
each cell. A little late now tho



Tim Medlen
Multimedia Designer
tmedlen at pilotonline
www.pilotonline.com and www.hamptonroads.com