Should I convert my layout template from table to div

Question

I am using Cobalt 8 CMS and previously article layout was very simply designed by tables.

I've added an example below. The thought of converting all tables (and learning how) is daunting, but I want to do what is best. The table fields display the result of a submission form. There is a mixture of multiple rows and multiple columns and some spanning of both.

I'm now using Joomla 3 as well, so perhaps divs is the better option.

I'd appreciate your advice,

Example:

<table id='display' width=648 border=0 summary="">
    <tr>
        <td rowspan=7 width=228><?php echo $item->fields_by_id[3]->result; ?></td>
        <td width=200><b>Author:</b></td>
        <td width=220><?php echo $item->fields_by_id[1]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Publisher:</b></td>
        <td width=220><?php echo $item->fields_by_id[2]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Genre:</b></td>
        <td width=220><?php echo $item->fields_by_id[9]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>CRR Heat Rating:</b></td>
        <td width=220 width=420><?php echo $item->fields_by_id[11]->result; ?></td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[12]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[10]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[13]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[4]->result; ?></td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[5]->result; ?></td>
    </tr>
</table>

[Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — Olexander Ivanitskyi, Sep 29 '13 at 06:44

score 2 · Answer 1 · answered Sep 29 '13 at 06:39

2

Tables are for tabular data - Not presentation.

So the data in your example is not tabular. So use CSS

answered Sep 29 '13 at 06:39

Ed Heal

59,252
17
87
127

I'm using this to reply to all the good people who responded. First, thank you. Though I was hoping you'd all say "stick with table" I guess I'm going to just have to do a crash course in divs. Was hoping to have all of this ready to roll by tonight, but I guess not. I do appreciate the input, thank you one and all. – Judah Raine Sep 29 '13 at 09:39
Yes, you need to learn how to float. These tutorials are great: http://css.maxdesign.com.au/floatutorial/ – Ringo Sep 30 '13 at 21:37

score 2 · Answer 2 · answered Sep 29 '13 at 07:31

Short Version: Table should just be used to display data, if you use it for layout purpose screen readers could have a problem to navigate through the page.

Long Version:

The table element represents data with more than one dimension, in the form of a table. Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.

http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-table-element

So I'm sure this is breaking the don't answer yourself rule, but I don't know how else to paste the code so please forgive me... Ok, I have made an attempt (which will no doubt elicit a laugh from you all) and so far so good... the information is displaying (always a good sign) but one below the other instead of the image on the left with two columns each with seven rows on the right. The code is as follows: — Judah Raine, Sep 29 '13 at 10:59

score 0 · Answer 3 · answered Sep 29 '13 at 06:41

0

The amount of rows and columns with span used, make it a valid choice to use Table. I have always faced problems with div.

answered Sep 29 '13 at 06:41

Ammar Bukhari

2,082
2
16
16

score 0 · Answer 4 · answered Sep 29 '13 at 06:44

0

This way you're doing it is very old-fashioned. I think you should use divs. If you were showing several books, then that would be good for table layout.

Also, I think you should try to put quotes around all your attribute values. That's a basic good practice to get into.

answered Sep 29 '13 at 06:44

Ringo

5,097
3
31
46

Ok, I have made an attempt (which will no doubt elicit a laugh from you all) and so far so good... the information is displaying (always a good sign) but one below the other instead of the image on the left with two columns each with seven rows. I'm not quite sure how to post the code here but I'll try.... It says the code is too long. Can I post it through answer your own question? – Judah Raine Sep 29 '13 at 11:00
You can post your code on jsfiddle and share the url here. I think you want to use float: left to get separate divs to sit on the same line. And then you use clear: left to force a new line. Might be good for you to do a CSS tutorial on floating. – Ringo Sep 30 '13 at 21:34

Should I convert my layout template from table to div

4 Answers4