[thelist] formatting tables with css

Tim Medlen tmedlen at pilotonline.com
Wed Oct 2 11:21:01 CDT 2002

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

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

 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

More information about the thelist mailing list