Is it ok to use tables with html5 and css3?

[MAX WSD]

I am taking a new course in HTML5 and CSS and we are required to use the book, "HTML5 and CSS, Comprehensive" 7th edition by Shelly Cashman Series. By page 200 it starts saying to create a nav menu using a table with images for the words in the table (in case some browsers don't have the font you want to display). It's also showing how to use tables for non-tabular data. I'm very concerned because this class starts in a couple days and I don't want to learn the wrong way.

I previously learned to use a list and display the line items: inline, for a navigation menu, but that was several years ago. Do I need to be concerned with this book and course or is the new HTML5 and CSS good for using tables in this manner and it's ok with browsers for small tables? The tables don't appear to be used for page layout as a whole, but it seems to suggest it for certain displaying of images or some other non-tabular data, rather than CSS and divs.

And if I use text images in my nav bar, won't that affect accessibility and hurt my seo? I thought the google font library solved small font issues across browsers.

Anyway, any thoughtful insights into these matters would be greatly appreciated. This course is required for further courses (Concordia Web Development Diploma). Should I just go through the motions to complete the course and learn or understand the "right" way to do it on my own. Will I pick up too many bad habits?

Thanks for any help,

Max

[ralph.m]

Hi MAX WSD. Welcome to the forums.

Do I need to be concerned with this book and course or is the new HTML5 and CSS good for using tables in this manner and it's ok with browsers for small tables? The tables don't appear to be used for page layout as a whole, but it seems to suggest it for certain displaying of images or some other non-tabular data, rather than CSS and divs.

You definitely need to be concerned—at least about the book. That's a terrible use of a table—utterly unwarranted. It's hard to believe a new book could even suggest such a thing.

And if I use text images in my nav bar, won't that affect accessibility and hurt my seo? I thought the google font library solved small font issues across browsers.

Whenever you put text in images, you should use a text fallback—so it's not necessarily an SEO / accessibility issue if you do it right. Tables makes it harder, though. And yes, @font-face is well supported now, so this is another reason not to use that book.

Should I just go through the motions to complete the course and learn or understand the "right" way to do it on my own. Will I pick up too many bad habits?

Only you can answer that ... but first impressions are powerful, so be careful. The course organizers should be taken to taks for using such a questionable resource*, though. (Educational institutions have a pretty bad reputation for living in the dark ages ... and it's not hard to see why.)

[* OK, I guess I shouldn't judge a whole book on one issue, but really, it's not a book I could recommend now, knowing about that. I've had a "look inside" on Amazon, and it certainly is a big book with a lot of information, so I guess they chose it because it covers so much. It would be a good exercise to cross reference every topic with online resources, like the SitePoint HTML/CSS reference, to get some perspecitive on all this. And of course, feel free to run things past these forums, too!]

[MAX WSD]

Thanks Ralph, that confirms my suspicions. Maybe I shouldn't judge the course too quickly either as it hasn't even begun, I just wanted to get a head start. Maybe the teacher will say that's the wrong way to do things as well and just chose the book because it's a large reference.

Either way, I'll just keep my mouth shut and double check what I'm learning. Thank you for the reply!

[felgall]

While the HTML 5 spec allows using HTML tables for layout it is specifically for use by WYSIWYAG web editors where the person using it doesn't even know that web pages use a markup language.

Anyway now that all browsers support CSS tables for layout there is no real reason for HTML 5 to allow HTML tables for layout under any circumstances whatsoever.

Just one example of HTML 5 deciding to allow something long after the last reason for using it has gone. Another example of HTML 5 introducing something after the need for it has finally completely gone is the introduction of the EMBED tag - which is only needed to support IE6 without having to use two object tags and conditional comments - with all current browsers you can use a single object tag without needing to cater for browsers that don't understand it.

[Dr John]

"HTML5 and CSS, Comprehensive" 7th edition by Shelly Cashman Series.

7th Edition??? Who are they trying to kid!
How long has HTML5 been around and used? The oldest books I could find on amazon with html5 in the title were dated 2010.
Are they writing a new edition every four months?
Or did they just stick a 5 into the title of a much older book - visit amazon and search on html comprehensive shelly cashman and you'll find that 6th ed is from 2010, with no html5 in the title. 5th is from 2008.

[xhtmlcoder]

HTML5 isn't even fully normative. Though whatever they are teaching; if they really are using TABLE for layout? Then something is seriously wonky. If they also don't ever consider @font-face or image replacement obviously it doesn't sound like the book has much worth.

From the preview sample pages online I have seen it looks like they suggest Notepad++ for the editing and supposedly aren't using deprecated elements. Though of course there is no such thing in HTML5 anyway. It looks like they have just slapped HTML5 everywhere in the text and based it on some polygot.

Looking at Contents page for Chapter 4, it does indeed look like it sayeth "Using a table to create a Horizontal Navigation bar" and other such weirdness. I only hope that chapter is supposed to be explaining bad practice or how you can misuse tables.