Tables are still needed ?

[Chris Leonard]

I'm looking at redesigning my site without using tables and just using DIVs
with CSS.

Question: I have at the moment a menu bar running from top to bottom on the
lefthand side of the page. The whole bar is made of one table with each item
sitting in it's own cell. when ever you move the mouse over the cell the
background changes colour - it's not as tacky as it sounds!

So, how would I still do this without using tables ? lots of small boxes ?

Any ideas of help would be appreciated please, thanks

Chris

 

[rf]

I'm looking at redesigning my site without using tables and just using DIVs
with CSS.

Question: I have at the moment a menu bar running from top to bottom on the
lefthand side of the page. The whole bar is made of one table with each item
sitting in it's own cell. when ever you move the mouse over the cell the
background changes colour - it's not as tacky as it sounds!

So, how would I still do this without using tables ? lots of small boxes ?

Yep, lots of small boxes. Don't throw <div>s at it though. Make the boxes
out of the links themselves:

..nav {width: 6em; position: absolute;}
/* don't use float: left for this, this makes IE only change the colour if
the cursor is over the actual text of the link, not within the entire box */
..nav a
{
margin: .5em;
border: solid 1px black;
background-color: #f8f0c0;
padding: .5em;
display: block;
}
..nav a:hover {background-color: #cfc;}

<div class="nav">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">a very long link that uses up more than one line</a>
</div>

With the above it's a simple matter to, say, decide to have the navigation
bar horizontal and at the top of the page. Just change the CSS and every
page on the site changes.

Cheers
Richard.

 

[Nico Schuyt]

Question: I have at the moment a menu bar running from top to bottom
on the lefthand side of the page. The whole bar is made of one table
with each item sitting in it's own cell. when ever you move the mouse
over the cell the background changes colour - it's not as tacky as it
sounds!
So, how would I still do this without using tables ? lots of small
boxes ?

http://www.alistapart.com/stories/taminglists/
Look at "In the Real World", almost at the end of the page.
Good luck!
Nico

 

[Leif K-Brooks]

Don't throw <div>s at it though. Make the boxes
out of the links themselves:

What about browsers that don't support CSS (or have it disabled)?

 

[David Dorward]

Question: I have at the moment a menu bar running from top to bottom on
the lefthand side of the page. The whole bar is made of one table with
each item sitting in it's own cell. when ever you move the mouse over the
cell the background changes colour - it's not as tacky as it sounds!

So, how would I still do this without using tables ? lots of small boxes ?

Same as always - start by describing the semantics of the data.

What is a menu? Its a _list_ of choices.

So you'd have:

<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">A</a></li>
<li><a href="#c">A</a></li>
</ul>

Then you can style it to look nice:
http://www.maxdesign.com.au/presentation/listamatic/vertical08.htm

 

[rf]

They would see:

link 1link 2link 3

Nope.

Link 1 link 2 link 3

There is whitespace between the links.

Cheers
Richar.

 

[Dylan Parry]

Link 1 link 2 link 3

There is whitespace between the links.

Still not ideal though. IIRC both the WCAG 1.0 and Section 508
accessibility guidelines state that links should be separated by more than
just whitespace.

 

[Chris Leonard]

Thanks for your thoughts everyone.

One question I have however, which browsers now-a-days don't support CSS and
why bother with those who use them ? Don't mean to sound "off" just
wondering if it's like writing code to compensate for about 1% of your
viewers.

Chris

 

[David Dorward]

One question I have however, which browsers now-a-days don't support CSS
and why bother with those who use them?

Googlebot, my palmtop browser, my cellphone browser...

Don't mean to sound "off" just wondering if it's like writing code to
compensate for about 1% of your viewers.

If you start with good HTML then they are compensated for automatically.

 

[Isofarro]

Still not ideal though. IIRC both the WCAG 1.0 and Section 508
accessibility guidelines state that links should be separated by more than
just whitespace.

Since there are a list of links (also known as a menu), using a list
structure sounds about right. That solves the accessibility problem.

 

[Kris]

One question I have however, which browsers now-a-days don't support CSS and
why bother with those who use them ? Don't mean to sound "off" just
wondering if it's like writing code to compensate for about 1% of your
viewers.

Not necessarily 1%. But it is shrinking. Usage of UA's that have CSS
support is growing. But don't loose track of alternative devices either.
Mobile connectivity is on the move and due to the nature of these
gadgets (mobile phones, PDA, etc.), full-fledging desktop browsers is a
bit too much for them yet. Expect that these devices will not have
widespread support for CSS soon.