Saturday, March 7, 2009

CSS Tables (1)



Here is a simple css table, I have more complicated tables that I'll be uploading shortly. The main point to get across here is the border:collapse style - this means when we have a border for the rows and columns we do not have the little white space between each of them. Due to the size of the screen shot it may be hard to tell but the colum headers (th) have a background-image and if the collapse style was not set, this background would not be fluid across the top of the table

I have also include the shade image at the bottom of this post.
Here is the css:

#listings {border:1px solid #620a0b;border-collapse:collapse;}
#listings th {background-image: url(../images/shade.jpg);color:#ffffff;}
#listings td {border:1px solid #620a0b;padding:13px;color:#373b44;}
#listings td img {border:0px;}
#listings td a {text-decoration:none;color:#373b44;font-size:.9em;}
#listings td a:hover {text-decoration:underline;}

Here is the (shortened)html:

<table id="listings" width="95%">
<tr><th>Address</th><th>Details</th><th>Image</th></tr>
<tr align="left" valign="top"><td><b>50 Fell St (for lease)</b></td>
<td>17,707 Sq. Ft. Available for Lease $1.50 Industrial Gross <br /><a href="#"><img src="images/adobe_reader_20.jpg" style="float:left;"/></a><div style="float:left;margin-left:2px;"><a href="">Download PDF (253k)</a></div></td>
<td><img src="images/test_1.jpg"/></td>
</tr>
</table>
Here is the background image:

No comments:

Post a Comment