Can anyone help me please? I try so hard to change table to div style to get code for my facebok fan page but it didn't work properly. Here is table code <table id="Table_01" width="521" height="892" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" rowspan="2"> <img src="images/facebook_page2_01.jpg" width="358" height="35" alt=""></td> <td colspan="5"> <img src="images/facebook_page2_02.jpg" width="162" height="5" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/facebook_page2_03.jpg" width="59" height="30" alt=""></td> <td colspan="2"> <img src="images/facebook_page2_04.jpg" width="78" height="30" alt=""></td> <td> <img src="images/facebook_page2_05.jpg" width="25" height="30" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_06.jpg" width="520" height="79" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="79" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/facebook_page2_07.jpg" width="272" height="297" alt=""></td> <td colspan="6"> <img src="images/facebook_page2_08.jpg" width="248" height="296" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="296" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/facebook_page2_09.jpg" width="187" height="40" alt=""></td> <td colspan="2" rowspan="3"> <img src="images/facebook_page2_10.jpg" width="61" height="64" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/facebook_page2_11.jpg" width="272" height="63" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="39" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/facebook_page2_12.jpg" width="187" height="24" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="24" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_13.png" width="520" height="16" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="16" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_14.jpg" width="520" height="43" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="43" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_15.jpg" width="520" height="15" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="15" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_16.jpg" width="520" height="112" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="112" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_17.jpg" width="520" height="125" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="125" alt=""></td> </tr> <tr> <td> <img src="images/facebook_page2_18.jpg" width="25" height="17" alt=""></td> <td> <img src="images/facebook_page2_19.jpg" width="157" height="17" alt=""></td> <td> <img src="images/facebook_page2_20.jpg" width="88" height="17" alt=""></td> <td colspan="3"> <img src="images/facebook_page2_21.jpg" width="110" height="17" alt=""></td> <td colspan="4"> <img src="images/facebook_page2_22.jpg" width="140" height="17" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="17" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_23.jpg" width="520" height="29" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="29" alt=""></td> </tr> <tr> <td colspan="10"> <img src="images/facebook_page2_24.jpg" width="520" height="60" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="60" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="157" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="88" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="86" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="37" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="42" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="36" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td></td> </tr> </table>[/CODE [COLOR="red"][SIZE="6"]Thank you very much[/SIZE][/COLOR] Code (markup):
For starters please don't post such a long code it's easier to look at if you just link the webpage . To transition from table to css you need to transform each part of your layout from a row or a column to a <div> . You define as many <div> tags as you need then you format them using basic CSS (width ; heigh ; float; etx.) . And please use external CSS internal CSS tends to get extremely messy .
The table is a sliced image table from photoshop. You need to change this, so that the image is used as a background image in one single div container. The easiest way is to have all text on this background image as well, just as it is now, an then you put in a couple of div containers that will be used for any clickable buttons or links. But the main thing is to save the whole background as one single image, and then put it as background in a div with the same size.