#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Sydney, Australia
    Posts
    22
    Rep Power
    0

    Question converting table to CSS??


    Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables.

    I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page

    Code:
    <TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
    	<TR>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
    		<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
    		<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
    		<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%"  border="0" align="center">
              <tr>
                <td><form action="" method="post" name="form1">
                  Login <br>
                  <input name="login" type="text" id="login" size="12" maxlength="6">
                  <br>
                  Password:</span><br>
                  <input name="pass" type="password" id="pass" size="12">
                  <br>
                  <input type="submit" name="Submit" value="Submit">
                            </form></td>
              </tr>
            </table></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top>	<IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
    	</TR>
    </TABLE>
    Any help please???
  2. #2
  3. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
  4. #3
  5. Ituloy AngSulong
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    seocontest2008.org
    Posts
    260
    Rep Power
    11
    converting table to css? hmm... do you want a tableless layout using css?
  6. #4
  7. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    link the page so we can see what it looks like with all the graphics... that code that you put up is generated by fireworks or some other program that creates layout by tabling positions of images... once we can 'see' the page then we can help you define a layout...

    try uploading a screenshot of the page that way others that read this post can understand what we are trying to accomplish
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    144
    Rep Power
    11

    You could use a more direct approach


    Using div's with display: table, display: table-row, and display: table-cell you could get rid of table without much effort. If it's the right way to it is a totally different question.
  10. #6
  11. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    Agreed, it isn't all that difficult to move out of a tabled design, with the use div's and css positioning.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Sydney, Australia
    Posts
    22
    Rep Power
    0
    Originally Posted by 1beb
    link the page so we can see what it looks like with all the graphics... that code that you put up is generated by fireworks or some other program that creates layout by tabling positions of images... once we can 'see' the page then we can help you define a layout...

    try uploading a screenshot of the page that way others that read this post can understand what we are trying to accomplish
    Thank you for your reply. I don't think I explained it too well. And yes the code was generated by Adobe Illustrator.

    I am basicly after a tableless layout so the page will load faster, but I want to keep it centred in different page sizes or resolution monitors

    Here is a link to the page: http://solutiongraphics.com.au/version_2/

    Any help greatly appreciated.
  14. #8
  15. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    bookmark this page --> http://www.bluerobot.com/web/css/center1.html <--- that's a hack that works for IE, and Mozilla browsers for centering page layouts using CSS. It's only a hack becuase IE improperly applies text-align:center; to block level elements rather than just text.

    1. Break the graphics up into squares and rectangles... and export them from illustrator of photoshop ( whichever you wish to use ) as jpeg's.

    2. The colour that you choose for your background can be matched but might not neccessarily be a websafe colour. When defining colors, at least from a photoshop perspective, you can select to use web safe colours only.

    3. Study the box model from w3c, and look at some layout styles that are similar to what you are going to try applying.

    http://www.w3.org/TR/REC-CSS2/box.html <-- Box Model
    http://www.csszengarden.com/ <-- Layouts galore.

    4. Know from the beggining that you are going to rip out your hair A LOT :P

    Once you have a basic layout put together from studying the box model, post your problems, and I will help again.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Sydney, Australia
    Posts
    22
    Rep Power
    0
    Thank you for your help,

    I'll have a look at the sites you've given me and see how I go.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    61
    Rep Power
    0
    Dude just put

    <div align="center">

    blah blah blah

    </div>
  20. #11
  21. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    Sense:
    For the most part that is now invalid code... for any doctype that is post html 4.01... Also, it's easier just to use a pure CSS method anyways.
    Last edited by 1beb; May 12th, 2004 at 01:56 PM. Reason: hit enter too fast ;P

IMN logo majestic logo threadwatch logo seochat tools logo