What is problem with html table as opposed to css?

[socrates]

Hello. I'm creating a template for my web pages and want to put simple navigation links in below the h1 heading. I can do this quite successfully with a very basic html table and some css styling. The only thing that concerns me is that I read so much about replacing html tables with css and I am wondering why a simple html table is such a no-no? To create a basic css equivalent where the column heights always remain equal seems to be quite difficult and requires more code than an html table. Here is my css for the html table:

 

#pagenav {
width:100%;
margin:1em 0;
}
.left {
 width:15%;
 background:#000000;
padding:5px;
color:#ffffff;
}
.right {
width:85%;
background:#EDF4ED;
padding:5px;
}
.right a {
color:#006600; 
text-decoration:none;
}

 

And here is the html:

 

<table summary="" id="pagenav">
<tr><td class="left">Source</td><td class="right"><a href="index.php">Book Title</a> (1888): John Harrison</td></tr>
<tr><td class="left">Section</td><td class="right">CONTENTS</td></tr>
</table>

 

What difficulties might this cause now or in the future? Is there some sort of SEO problem with tables?

 

Thank you!

[LSW]

The term table comes from Tabular data, what you describe is not tabular data and so it is a miss use of tables for layout which is what CSS was meant to do away with. It is not really an issue of SEO as correct coding and usability.

 

Think about what you are discussing, a LIST of Links. The correct format for a menu is a List. This is far more usable for machines and those with disabilities (therefore SEO friends because indexing is done by a machine fallowing code and not vision. A list is easy to tab through for blind users using screen readers).

 

Lists are also very easy to work with and can be horizontal or vertical, can be bulleted or act as buttons or can use graphics. Have a look at Max Design's Listamatic, it is by far the best example and Lists are by far the best choice for menus.

 

As for the H1, there are two schools of thought. A smaller number see the menu as separate from the page and therefore justify the use of H1. I believe as does the majority (in my experience) feel that the menu is part of the page. Each page (comparing to a book) is like a new chapter, so H1 is the chapter title and describes what that one pages content is about. Anything else then would be H2, and if needed each H2 can have multiple H3 etc. The choice is yours and there is no real right or wrong, but I would say use H2 or better off nothing as it is likely in a separate container. If a title is needed than use the title tag or just bold the text.

[socrates]

Okay, thank you very much for that. I can't think why, but I completely overlooked using a list. I can style it to look exactly the same way as the existing table.

[LSW]

Exactly - Listamatic is a must have link.