How to replace table tags with nested div tags?

Hi, first post and I’m not sure if this is the right place, so sorry if not.

Anyway I have a client who’s seo guy told him I need to make some design changes. To me the site looks good like it is but as they say the client is always right.

The site is a football site that has up to date information about teams, game scores, players etc. I think it gets good enough traffic considering the number of competition sites, but of course clients always want more.

He wants to get rid of the nice almost black background and wants it to be mint green - ugh - but I can change that easy.

He also wants me to change the font from Verdana to BlackJack. I took a look and it will work OK I guess http://www.fontsquirrel.com/fonts/BlackJack
Again, I can change that easy enough too.

The site has several short videos and he says they need “transcripts”. Since all the videos are about football I can spend a little time coming up with something and add that to them.
Not so easy, I know design, not writing content, but I can do it.

Sooooo - to get to my problem.
The site has quite a few tables with season game scores etc. and now he says the table tags must go!
I have seen a lot of people say that tables are bad, so his request is valid even if I’m not happy about it.
I can replace the tables with a bunch of nested div tags, but this will be a lot of work and I’m not sure how to go about it. I want to do it once - the right way - and not end up doing it again.

So anyone that has already done this got any tips that can help me not waste my time?

Hi Mittineague. Welcome to the forums. :slight_smile:

Hey, not so fast. :slight_smile: Tables are an important part of HTML and are not bad. The only bad thing is using them for the wrong purpose. If you have tabular data (that is, data arranged in rows and columns) then a table is the right HTML element to use, and anything else is wrong. So take a look at what the table is being used for before you decide to throw it out. :slight_smile:

The correct tags to use for tabular data are table tags. Season game scores are tabular data therefore using any tag for them other than table tags would be incorrect.

It is the use of table tags in the HTML for page layout that is wrong as all of the page content should be marked up using the most semantically correct tags available (with div being the fallback for when no other tag is suitable).

Where a table is being used for layout then you can still create a table like layout after replacing the table tags with more semantically correct ones by applying display:table, display:table-row and display:table-cell in the CSS (although if you do that then you retain all the disadvantages that table layouts have other than having fixed the HTML.

Tags that do not semantically identify their content such as a table identifying the page layout or tabular data wrapped in div tags are bad. Tags that semantically identify their content such as a table identifying tabular data are good.

Sounds to me as if Mittineague’s client is worrying about the effects of Google’s Puffin update:

Welcome to the Forums, @Mittineague;
Considering the constant flux in Web “standards”, the concern for Search Engine Ranking and the fickle nature of most web-savvy users, I would recommend you simply IGNORE YOUR CLIENT.
Just tell him directly that YOU ARE THE WEB EXPERT and he has hired you to make these sort of decisions; not based on “the winds of change” but on your hard-earned experience.

Sounds that way to me, too.

I think the client might have misunderstood that part. My reading of it is that Google are penalising sites using tables for layout, not all sites using tables. The first thing I would fix would be the colour scheme, which is easy, followed by the video transcripts.

Thank you for the welcome ralph.m and ParkinT
Unfortunately the seo guy also claims to be an expert going on about some “puffin update” nonsense.

But if I give my client a link to this thread it should help my case some.

edit – I see TechnoBear has posted a link, I’ll check that now.

As a web designer/developer it isn’t really your job to write transcripts for a subject which you probably know nothing about. If the client really wants these I would tell them to write the transcripts themselves and they will be added. However, having you write them is probably as good as not having them at all, realistically speaking.

That sounds like tabular data as it should be. So changing it to nested divs would be incorrect as others have said.

A SEO professional who suggests/pushes tables be replaced with nested divs when they are being used to represent tabular data is a fraud. I mean this is some bare bone basic semantic stuff that any web professional should know…

Since a transcript is simply a written copy of whatever is said in the video it shouldn’t matter whether you actually know any of it or not. You are just typing what someone else said.