Avoiding Tables - Use CSS?

[supertrucker]

I've read in many places that using Tables should be avoided to align content. Particularly, avoid at all cost using them in pages that are formatted for mobiles. So, in order to get a higher rating in my ready.mobi score, I would like to remove all tables and replace them with something compliant. I read that I could use CSS as an alternative to tables, but how? I already have a CSS file formatting most of the other properties of my site, but am not sure how to use it to align data, i.e.,

<table> <tr>  <td>1.</td>  <td>Joe Bob</td>  <td>Michigan</td> </tr> <tr>  <td>2.</td>  <td>Billy Bob</td>  <td>Illinois</td> </tr> <tr>  <td>3.</td>  <td>Sandy Bob</td>  <td>Kansas</td> </tr></table>

What's an alternative solution to this not using tables?Thanks,ST

[jeffman]

This layout will simulate a table the full width of your viewport, equally divided into 3 cells per row.1. Turn each row into a div. Think of these as your "container" divs. No special styling required. An unstyled div defaults to the width of your viewport.2. Turn each cell into a div. For the "cell" divs to line up horizontally, they can each belong to the same class, which needs these properties {width: 33.33%; float: left}. For the float property to work correctly on a div (or any block-level element) the element must have a width.3. As in a table, nest the "cell" divs in the "container" divs.

[Ingolme]

I've read in many places that using Tables should be avoided to align content. Particularly, avoid at all cost using them in pages that are formatted for mobiles. So, in order to get a higher rating in my ready.mobi score, I would like to remove all tables and replace them with something compliant. I read that I could use CSS as an alternative to tables, but how? I already have a CSS file formatting most of the other properties of my site, but am not sure how to use it to align data, i.e.,

<table> <tr>  <td>1.</td>  <td>Joe Bob</td>  <td>Michigan</td> </tr> <tr>  <td>2.</td>  <td>Billy Bob</td>  <td>Illinois</td> </tr> <tr>  <td>3.</td>  <td>Sandy Bob</td>  <td>Kansas</td> </tr></table>

What's an alternative solution to this not using tables?Thanks,ST

For the code example you've given, it's actually perfectly valid to use a table. You are working with tabular data there.Developers only recommend not to use tables for laying out content in a page because that's not what they're made for, but in your case tables are fine.Tables aren't "bad", they're just widely misused. In your case it's OK to use a table.Actually, if you want me to put it another way, it would actually be wrong to not use a table in this situation.

[supertrucker]

Ok, that seems to work nicely, here's my code for others, please tell me if it could be improved, and where did you come up with the 33.33% by the way <= EDIT: Nevermind, duh!CSS:

.column{ width: 33.33%; float: left;}.row{}

I'm a visual person, hence the "row" class which does nothing.HTML:

 <div class="row">  <div class="column">1.</div>  <div class="column">Billy Bob</div>  <div class="column">Michigan</div> </div> <div class="row">  <div class="column">2.</div>  <div class="column">Sue Bob</div>  <div class="column">Illinois</div> </div>

[supertrucker]

I missed Ingolme's post before I posted that last one. The consensus is not to use tables for mobile content because not all mobiles can support them, I'm not sure how many mobile devices can't actually support tables, but if using something like this as an alternative could make my site comply, then I suppose I have to do it.Quotes from ready.mobi:

Complex layouts, such as are suggested by nesting tables, are hard to render and are rarely appropriate to the mobile context.

Tables should not be used unless they are known to be supported by the client device WARN near line 37 column 1<table width="100%"> <tr class="odd"><td>1.</td><t...

It also recommends that I get rid of all my <b> tags, and use CSS instead, i.e. (I'm guessing):

<div class="bold">Welcome</div>

[supertrucker]

While we're on the topic, how do you apply more than one class to a single element? I.e., I would need to apply the class "column" as above to format a pseudo table, using the <div>s, but in some instances, I would also need to apply a class I created "odd" and "even" which alternate the colors of the rows.

[boen_robot]

It also recommends that I get rid of all my <b> tags, and use CSS instead, i.e. (I'm guessing):

<div class="bold">Welcome</div>

Strange... <b> is generally supported everywhere. Infact, CSS's font-weight is probably less supported.You could try <strong>, but I'm guessing it will say the same about it. If you really must use CSS, use <span class="bold"> instead of a <div>.Note that it again depends on semantics - if you want to emphasize a piece of text, use <em>, if you want it to be strong (like "loud") text, use <strong>. If it's purely visual boldening, use <b> or <span class="bold">.You can apply several classes by separating them with a space, like:

<div class="odd row">

Note that if there's a certain conflict (in this case if both "odd" and "row" declare a certain CSS property), only the last in the list will apply (in this case "row").

[supertrucker]

Strange... <b> is generally supported everywhere. Infact, CSS's font-weight is probably less supported.

I believe it has nothing to do with whether <b> is supported or not, but merely a rendering issue. It seems that pages on mobile devices will render more quickly when all the formatting is done in CSS, instead of formatting the text and then having to reformat the page again in the browser, does that make sense? I just confused myself I think. EDIT: Pulled this from the ready.mobi report on my site:

Do not use in-line markup such as e.g. <b>bold</b> to vary the presentation of your page. Use of stylesheets helps with consistency of style and centralising style helps to reduce page weight PASS near line 8 column 62ef="xhtml-mp.css" /> WARN near line 36 column 30Style-related tag b detected in markup="section_divider"><b>Directory</b></div>

You could try <strong>, but I'm guessing it will say the same about it. If you really must use CSS, use <span class="bold"> instead of a <div>.

Yes it does.

You can apply several classes by separating them with a space, like:

<div class="odd row">

Thanks!

Note that if there's a certain conflict (in this case if both "odd" and "row" declare a certain CSS property), only the last in the list will apply (in this case "row").

So, in other words, the last CSS property gets the last word?Thanks!

[jeffman]

So, in other words, the last CSS property gets the last word?

Yes. That is the essence of "cascading."FWIW, the way you laid out those divs and CSS in post #4 is exactly what I had in mind when I posted.

[rzea]

I would agree 100% with Ingolme in his post above, no question about it.However, DD's suggestion and your implementation seem proper as well, but what you need to really understand is when to use tables and when to use DIVs for tabular data, as there are many people out there that use tables for layout, and there are many that use DIVs for tabular data as well... because they are 'DIV lovers'.And to answer one of your questions:

While we're on the topic, how do you apply more than one class to a single element?

Here's an example:CSS:

.text-red {  color:#f00;}.font-bold {  font-weight:bold;}

HTML:

<p class="text-red font-bold">Just a simple text</p>

All you have to do is type the following style in the same class. Remember to separate them with a space.