How to convert this TABLE to a proper DIV?

Question

I am having trouble getting the right set of DIV's for what I have in tables. Apparently, the table version doesn't "scale" or resize nicely.

I, the developer, am old school, so I use Tables (the parts of my brain that work, know how to logically format them), but my wife, the designer, like's and uses DIV's (but fully understands tables).

I don't really use DIVs much, so I don't really like them. Add to the that the fact that some users really abuse DIV's and absolute them all over the show to the extend that you cannot figure out your uncle from your aunt. I recently had a very heated discussion with another SO user regarding DIV vs. HTML - he was right (but I was also right).... DIV = WORD, TABLE = EXCEL...

The sample below shows what I have done using a table. No fancies, but it is obvious to see what the "blocks" must look like. For me, the big issue is I cannot see any clear grouping, whereas the tables allow me to use rowspan and colspan to group, but still cheat. The other big problem is the rows won't really resize or scale, and will stay the same height with tables - whereas apparently DIV's won't do that. Obviously the vertical lines must stay grouped - and NO-NO absolute.

Table Code as follows:

<html>
<head/>
<body>
    <table style="width:100%">
        <tbody>
            <tr>
                <td colspan="3" style="width:66.7%">
                    <div id="TopSlidePane" runat="server" style="border:5px solid black;"/>
                </td>

                <td rowspan="3" style="width:33.3%;background-color:blue;height:100%;">
                    <div id="EventDiv" runat="server" style="border:5px solid black;height:100%;"/>
                </td>
            </tr>
            <tr>
                <td rowspan="2" style="background-color:purple;height:100%;">
                    <div id="PolDiv" runat="server" style="border:5px solid black;height:100%;"/>
                </td>

                <td rowspan="2" style="background-color:turquoise;height:100%;">
                    <div id="ResourceDiv" runat="server" style="border:5px solid black;height:100%;"/>
                </td>

                <td style="background-color:purple;">
                    <div id="TelDiv" runat="server" style="border:5px solid black;"/>
                </td>
            </tr>
            <tr>
                <td style="background-color:lime;">
                    <div id="CalDiv" runat="server" style="border:5px solid black;"/>
                </td>
            </tr>
            <tr>
                <td style="background-color:orange;">
                    <div id="ResDiv" runat="server" style="border:5px solid black;"/>
                </td>
                <td style="background-color:purple;">
                    <div id="EduDiv" runat="server" style="border:5px solid black;"/>
                </td>
                <td colspan="2" style="background-color:lightgreen;">
                    <div id="VacDiv" runat="server" style="border:5px solid black;"/>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <table style="width:100%">
                        <tbody>
                            <tr>
                                <td style="width:40%;background-color:red;">
                                    <div id="AmbDiv" runat="server" style="border:5px solid black;"/>
                                </td>

                                <td style="width:60%;background-color:aquamarine;">
                                    <div id="GalDiv" runat="server" style="border:5px solid black;"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Thanks in advance and holler if I have missed some pertinent info.

For Ref: Now in jsfiddle. To truly appreciate, it will be better to see it in an offline version that you can resize at will.

http://jsfiddle.net/Fd53f/

Well if you have tabular data, it's better to use a table (that's what they're for, after all). But if you just want to display stuff in a grid layout, then use divs for that. Also, there's nothing wrong with using `position: absolute;` like you seem to think there is. It isn't "cheating", at least. It's part of the spec. — TylerH, May 22 '14 at 13:07
@TylerH - Beat me to it.... OP: You need to write semantic code. If you are trying to show a tabular data format then use a table. As Tyler said, if you're simply trying to show a grid then use DIVs and CSS. — Kinnectus, May 22 '14 at 13:08
DIVs are used for layout. TABLES should be used to display datas. That's all. Not really much else to argue about. As some SO user said once.. "Tables are not evil".. nor DIVs are — Kevin Cittadini, May 22 '14 at 13:08
TylerH/Big Chris: It just seems that as soon as you use absolute, you are saying that it cannot be logically laid and it MUST be "there" - and you end up having too keep track of that item that you have positioned absolutely thereafter. — Anthony Horne, May 22 '14 at 13:10
Have a look at the html table - very simple one. Maybe you can suggest how you would do it in DIV. — Anthony Horne, May 22 '14 at 13:11
I believe this question is too broad. Yes you can use tables, no it is not to format a page with them. [See this](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) for more info. Tables were used for layout when layout otherwise was not understood. Your wife is more correct to be using divs, ask her to teach you how to use them, she seems very smart (: — Zach Saucier, May 22 '14 at 13:13
@ZachSaucier Are you able to convert it? If you look at the rowspans, it will be troublesome. — Anthony Horne, May 22 '14 at 13:17
@ZachSaucier I did ask her - things get heated, in a bad way.. — Anthony Horne, May 22 '14 at 13:17
@AnthonyHorne For rowspans you can use percent width. If you'd like to discuss this we can in [the CSS chat room](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) — Zach Saucier, May 22 '14 at 13:18
@ZachSaucier Even if the "rowspan" falls outside of the "DIV"? — Anthony Horne, May 22 '14 at 13:24
@AnthonyHorne Join me [in chat](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) if you'd like to talk about it — Zach Saucier, May 22 '14 at 13:25
I am at work. I will join chat when I am at home and time-zone dependent. — Anthony Horne, May 22 '14 at 13:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54226/discussion-between-anthony-horne-and-zach-saucier). — Anthony Horne, May 22 '14 at 17:34
@ZachSaucier I really like the shared "why not use..." article. Still need to learn DIV's. w3c is taking away all my formatting tools in HTML.. — Anthony Horne, May 22 '14 at 18:52

score 1 · Answer 1 · answered May 22 '14 at 14:42

Yes, with pinch of CSS, DIV's can do all that Tables can do. (I think this answers the question).

Best practices recommend to use DIV than Tables for layout. (Tables should only be used to display tabular data).

Why DIV's are prefered?

Page loads quicker
Better control over elements
Less code, may help you save few bytes
More flexible, moving elements from one part to another or creating new elements (especially programatically using JS) is easier
In terms of SEO

How can you be DIV friendly?

If you are not comfortable using DIV's take a look at front-end framework like Twitter Bootstrap or Foundation.

Although I find your answer informative (I have marked it up), I would still like an answer in the form of example, i.e. to give me the best possible version of what I have (but in div form). On your note: I am not DIV unfriendly, per se, I am just really used to working with tables (when I am not doing SQL and .NET Service). — Anthony Horne, May 22 '14 at 15:18

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

In your case if you need your cell to extend vertically you are better off using tables, especially since your layout is not really a simple one.

To get some advantages of tables for simple layout see this blog post Replace HTML Table with Divs

To come back to your example here is an equivalent build using div and CSS only http://jsfiddle.net/6bKeY/

This example uses absolute positioning, mostly because it was faster and without knowing the behaviour of the cells it's hard to say which methods to use.

Also you should avoid the usage of the style attribute and use CSS instead (see Inline <style> tags vs. inline css properties) and div elements are elements which expect a tag body and therefor you must use a closing tag for your HTML to validate so

<div />

becomes

<div></div>

edited May 23 '17 at 12:20

Community

1
1

answered May 25 '14 at 07:28

GillesC

10,647
3
40
55

I see a lot of "manual" setting of heights, widths and tops to get the div to look like my tables, which I am not 100% happy with, but I appreciate you taking the time. I was more expecting some for me of nesting with percentages or something. Clearly I need to learn DIV's better. As a side note, I don't normally use inline style - it was for the purposes of this example - I ALWAYS use classes in the styles, etc. For now, I expect this is the best answer I am likely to get. – Anthony Horne May 25 '14 at 12:43
I will award the bounty as soon as I can (apparently 3 hours) – Anthony Horne May 25 '14 at 12:44
That's the trouble you will get with div, they don't handle percentage based heights which is why in your example table is probably better, also there is some more recent CSS which allows you to make div behave like table cell, I never tried but using that you might be able to achieve the percentage height too. I might try to update it later and try would love to know too as the result would be much cleaner. – GillesC May 26 '14 at 15:11

How to convert this TABLE to a proper DIV?

2 Answers2