Convert 6-column table to CSS layout

[akress]

Hiya,

I'm trying to convert a table with 6 colums that looks like this:

<table class="myTable" width="640px">
<tr>
<td><a href="#">
<img src="../_img/announce.gif" align="middle" border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Announcements
</span></a><br />
Happy Ad; Seminars: Obituaries; Special Announcements
</td>
<td><a href="#">
<img src="../_img/new_icons/auction.jpg" align="middle"
border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Auction/Flea Market/Yard Sale
</span></a><br />
Auctions; Flea Market; Garage Sales
</td>
<td><a href="#">
<img src="../_img/new_icons/Antiques.jpg" align="middle"
border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Antiques/Collectibles
</span></a>
<br />Antiques; Collectibles

</td>
</tr>
<tr>
<td><a href="#">
<img src="../_img/new_icons/appliances.gif"
align="middle" border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Appliances
</span></a>
<br />Appliances
</td>
<td>
<a href="#">
<img src="../_img/transportation.gif" align="middle"
border="0">

</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Automotive/Transportation
</span></a><br />
New; Used; Rental; Motorcycles; Recreational; Repair;
Parts
</td>
<td><a href="#">
<img src="../_img/finance.gif" align="middle"
border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Banking
</span></a>
<br />Banks; Credit Unions; Mortgages
</td>
</tr>

<tr>
<td><a href="#">
<img src="../_img/new_icons/boating.jpg"
align="middle" border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Boating
</span></a>
<br />New; Used; Service; Marinas
</td>
<td>
<a href="#">
<img src="../_img/new_icons/Bridal.jpg" align="middle"
border="0">

</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Bridal
</span></a><br />
Wedding Services
</td>
<td><a href="#">
<img src="../_img/new_icons/childcare.gif"
align="middle" border="0"></a>
</td>
<td><a href="#">
<span style="FONT-WEIGHT: bold; FONT-SIZE: 12px">
Childcare
</span></a>
<br />Preschool; Day Care
</td>
</tr>
</table>
....to a CSS layout. The only catch is I need to keep it within 640px
(630px ideally). The styling associated with "myTable" is mainly font
properties and does not need to be preserved. If anyone has a
suggestion on how to pull this off I would greatly appreciate it.

see it in action here:

http://adamdesigns.com/csstable.html

Sincerely,
Adam

[Andy Dingley]

On 15 Jun, 19:56, [e-mail] wrote:

I'm trying to convert a table with 6 colums that looks like this:

...to a CSS layout.

Why? What are you trying to get from this? There's no point in chasing
a vague "CSS must be better than <table>" goal, because you'll never
know if you've achieved it. What real, concrete benefit are you
expecting to see from re-working this design?

I don't like the 6 column table. This is because adjacent pairts of
columns are being used for a purely-layout purpose that doesn't
require a <table>. This is the case where "<tableis inherently bad".

As to re-doing it with a 3 column <table>, then I'd have no problem
with that. It's a "<tableused for layout", but that's OK so long as
you're only doing it because you want to preserve a grid structure
(i.e. elements are always to be arranged in this 3x2 format).

To do this, find a way to suitably place all three elements of the
"menu item" (image, title, strapline) into a container, i.e. a <div>,
probably with a class on it. Then place 6 of these <div>s into a
<table>, one per cell.

If you want the finished page to behave differently, then you might
use a different design. Coincidentally this would avoid the <table>,
but you're doing it this way _to_get_different_fluid_behaviour_, not
just to mechanically avoid a <table>. Use the same 6 <div>s as before,
but this time make each one float left too. You'll probably set their
widths explicitly too, so that they're consistent. Now place all 6 of
them into a single container, of constrained width according to the
size of the page. They'll now flow and arrange themselves as best they
can, according to the container overall width. They might be 3x2, 2x3
or something else, depending on how they fit. This gives better (i.e.
more flexible) behaviour for varying window sizes.

The only catch is I need to keep it within 640px
(630px ideally).

No you don't. You need to make it work within whatever space _my_
browser says you can have.