Help converting table layout to CSS

**NightShift** · May 3, 2004 05:12

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???

**benji** · May 3, 2004 05:54

I'm not exactly what you are asking here. Do you want to centre the whole thing using CSS? if you do you could try the techniques described here.

http://dorward.me.uk/www/centre/

**Paul O'B** · May 3, 2004 05:55

Hi,

Do you mean you just want to centre the table using css or do you want the whole table converted into a css layout (without tables)?

If its the latter then we'd need to see the page in action to see what it looks like as obviously all those images (and millions of spacer gifs) don't show up and its hard to tell what's going on.

Or do you just want an outer element that is the same size as the table and horizontally centred?

More infromation (and ideally a link to the page) will result in better responses to your question and hopefully some constructive advice

Paul

**NightShift** · May 3, 2004 06:03

Ok, basicaly, I have created an image slice in Photoshop then placed these images in a table all to form 1 large images.

The table each slice is placed in is then located in another table which is centred on the page, so if you resize the window, the table stays in the centre.

I just can't work out how to create the same using CSS.

**NightShift** · May 3, 2004 06:20

Do you mean you just want to centre the table using css or do you want the whole table converted into a css layout (without tables)?
...

More infromation (and ideally a link to the page) will result in better responses to your question and hopefully some constructive advice

Thank you Paul I didn't explain myself very well. It is the latter I am after, the whole table converted to a css layout but still centered in the page.

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

**Paul O'B** · May 3, 2004 07:44

Hi,

Well the best thing to do is to stitch all your sliced images back up into one graphice and place it in the background.

As this is obviously a splash type page with little content then you can absolutely place the text elements (and images) in the required places.

To centre the page you need to do something like this.

Code:

body {
 margin:0;
 padding:0;
 text-align:center;/* centre for ie5 */
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #CCCCCC;
 background-color: #CC6600;
min-width:766px;/* for mozilla */
}
#wrapper {
 width:766px;
 margin:auto;/* centre for compliant browsers */
 position:relative;/* gain stacking context */
 background:#CC6600 url(images/somelogo.jpg) no-repeat center top;
 height:500px;
}

This will give you a centred page that is 766p x 500px.

You can then place your elements using absolute positioning and they will be placed relative to the top lefty corner of the parent div because it has a position:relative set which gains the stacking context.

Usually I don't recommend absolutely placing a lot of elements as it stops the flow of the document but as this is a splash type page with no content it should be ok.

Heres is a very quick (very rough and ready) example that shows some of the techniques needed.

http://www.pmob.co.uk/temp/somelogo.htm

Hope that's given you food for thought

Paul

**NightShift** · May 17, 2004 05:31

Thanks Paul

User Tag List

Thread: Help converting table layout to CSS

Thread Tools

Display

Help converting table layout to CSS

Bookmarks

Bookmarks

Posting Permissions