Convert Table(2,7) into CSS

@MololoFeb 11.2009

Hello,

I need to convert a 2 rows, 7 columns Table into CSS but I have no idea how to deal with the tags and containers blablabla.
Any help would be very appreciated for this.
Currently, I have it in basic HTML and this is how it looks like:

to post a comment

CSS

9 Comments(s) _↴

@FangFeb 11.2009 — #What's wrong with using a table?

@MololoauthorFeb 11.2009 — #Tables are nice unless you start having too many or them... which badly slows down your browser.

@FangFeb 11.2009 — #You only need 1 table 4 x 14

@MololoauthorFeb 11.2009 — #

[CODE]<table width="750" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="750" height="1" bgcolor="E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 </tr>
 </table>
 <table width="750" height="125" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="1" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="111.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644BDWa.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644DWa.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351BDW9a.jpg" width="75" height="75" border="0" /></a></div></td>
 <td width="8">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351BDW9a.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351DW11a.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644BDWa.jpg" width="75" height="75" border="0" /></a></div></td>
 <td width="1" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 </tr>
 <tr valign="top">
 <td width="1" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">7MM White Gold </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center" class="style1"> <a href="http://www.taobao.com" target="_blank">In Motion WG Akoya </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">In Motion White Gold </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"><a href="http://www.taobao.com" target="_blank" class="style1">8MM White Gold</a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">8MM White Gold</a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">8MM Silver </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"><a href="http://www.taobao.com" target="_blank" class="style1">In Motion WG Akoya</a></div></td>
 <td width="1" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 </tr>
 </table>
 <table width="750" height="125" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="1" height="80" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" /></td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644DWa.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80"><img src="../../spacers/transparent_1_1.gif" alt="" /></td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351DW11a.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="111.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644BDWa.jpg" width="75" height="75" border="0" /></a></div></td>
 <td width="8">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351BDW9a.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8" height="80">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PEL644BDWa.jpg" width="75" height="75" border="0" /></a><br />
 </div></td>
 <td width="8">&nbsp;</td>
 <td width="100" height="80"><div align="center"><a href="http://www.taobao.com" target="_blank"><img src="PPL351BDW9a.jpg" width="75" height="75" border="0" /></a></div></td>
 <td width="1" height="80" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 </tr>
 <tr valign="top">
 <td width="1" height="20" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" /></td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">7MM White Gold </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center" class="style1"> <a href="http://www.taobao.com" target="_blank">In Motion WG Akoya </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">In Motion White Gold </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"><a href="http://www.taobao.com" target="_blank" class="style1">8MM White Gold</a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">8MM White Gold</a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"> <a href="http://www.taobao.com" target="_blank" class="style1">8MM Silver </a></div></td>
 <td width="8" height="20">&nbsp;</td>
 <td width="100" height="20"><div align="center"><a href="http://www.taobao.com" target="_blank" class="style1">In Motion WG Akoya</a></div></td>
 <td width="1" height="20" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" width="1" height="1" /></td>
 
   </tr>
   </table>
   </td>
 </tr>
 <tr>
 <td width="750" height="1" bgcolor="#E0E0E0"><img src="../../spacers/transparent_1_1.gif" alt="" /></td>
 </tr>
 </table>[/CODE]

@MololoauthorFeb 12.2009 — #Please, someone help me with this CSS.

These tables are out-dated and it's not realistic to simply suggest me to stick with my table as Fang did.

If I came on a forum it's to learn how to do things right; not to be told to do it the jurassic way.

@FangFeb 12.2009 — #If I came on a forum it's to learn how to do things right; not to be told to do it the jurassic way.[/QUOTE]
Tables are for tabulated data; that's what you have.

@MololoauthorFeb 12.2009 — #Please, don't answer here anymore. You're just making it messy for people who might be willing to help me. My question is clear, I want to convert a table into CSS and nothing else.

Thank you for your understanding Fang and bye bye~

Xie xie li jie, zai jian~

@mintedjoFeb 12.2009 — #There's nothing wrong with using a table for this.

Tables aren't jurassic - they just aren't relied on for layout purposes as much as they used to be.

I would say use a table and separate all the style information from the table.

And you can remove some div elements as well, looks like you have divs wrapped around the links inside your table cells.

Also, Fang obviously knows more than you about this topic so perhaps you should take some notice of what he says :-P

I want to convert a table into CSS and nothing else.[/QUOTE]
If you can make a table using ONLY css and no HTML then WOWz!

Anyway here's one way to replicate the look. Notice how I used "display: inline-[B]table[/B]" as part of the style definition :-D

[CODE]<html>
 <body>
 
 <style type="text/css">
 *{padding: 0;}
 div#main{border: 1px solid #000; display: inline-table; position: relative; width: 750px; text-align: center;}
 div.img_box{display: inline-table; width: 80px; margin: 5px 10px;}
 img{border: 1px solid #000; height: 80px; width: 80px;}
 span.txt1{float: left;}
 span.txt2{float: right;}
 </style>
 
 <div id="main">
 <div class="row">
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 </div>
 <div class="row">
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 <div class="img_box"><img src="#" alt="myImage" />
 <span class="txt1">txt1</span>
 <span class="txt2">txt2</span>
 </div>
 </div>
 </div>
 
 </body>
 </html>[/CODE]

@MololoauthorFeb 12.2009 — #Thank you very much for taking the time to reply me with such detailed information. I'll study it now.

Also in #CSS _↴

CSS rollover issue with IE, and positioning problem with Opera...Are there a hack for Safari 3 ?IE / FF / Safari CSS Help Needed

Success!

Help @Mololo spread the word by sharing this article on Twitter...

Tweet This

Convert Table(2,7) into CSS

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Convert Table(2,7) into CSS

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴