Click to See Complete Forum and Search --> : Weird Table Code


netzeye
11-20-2008, 12:59 PM
Hi guys. I saw some table codes online that I found fascinating, and have been trying to "decode" it. The way it's laid out seems awkward, so I was wondering if anyone can tell me how it's done. Here's the code:


<table width="100%" height="100" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="1" bgcolor="#999999" rowspan="3">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="1" height="1"><br>
</td>
<td height="1" bgcolor="#999999">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="1" height="1"><br>
</td>
<td width="1" bgcolor="#999999" rowspan="3">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="1" height="1"><br>
</td>
<td height="1">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="1" height="1"><br>
</td>
<td width="9000" colspan="2" bgcolor="#999999" height="1">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="1" height="1"><br>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="150" height="1"><br>
Item Image Here</td>
<td rowspan="2">
<img src="http://www.unixcctv.com/theme/51/x.gif" width="10" height="1">
</td>
<td colspan="2" valign="top">
<span id="ctl00_cphMain_ctl00_dlDept_ctl00_lblName" class="prodName" style="font-weight:bold;">Product Description here</span></td>
</tr>
</table>

emoritz
11-20-2008, 01:03 PM
its weird alright. looks like a really crappy way to make borders

netzeye
11-20-2008, 01:10 PM
Is there another way to make an identical table without using that method?

emoritz
11-20-2008, 01:31 PM
this looks pretty much the same
you can add margins or padding as neccesary


<style type="text/css">

#item_image {

border: 1px solid #999999;
border-bottom: none;
text-align: center;
width: 150px;

}

#prod_descr {

border-top: 1px solid #999999;

}

#prod_title {

font-weight: bold;

}

</style>

<table style="width:100%;">

<tr>

<td id="item_image" valign="center"> Item Image Here </td>

<td id="prod_descr"> <div id="prod_title">Product Description here</div> blah blah blah <br /> blah blah blah <br /> blah blah blah</td>

</tr>

</table>