DIVS vs Table

randombar

Hey Just a question for everyone, I know divs are the way to go this day and age, I was just wondering do people still use tables within these divs for basic layouts and calendars and the likes or are tables completely avoided or what? What's good web design?

Thanks
Gary

Eoin

GaryCocs wrote: »

Hey Just a question for everyone, I know divs are the way to go this day and age, I was just wondering do people still use tables within these divs for basic layouts and calendars and the likes or are tables completely avoided or what? What's good web design?

Thanks
Gary

Tables certainly aren't deprecated (if that's the right word) - they just shouldn't used for layout.

I think a calendar could be considered tablular data, in which case a table would be appropriate.

Goodshape

As eoin_s said, just avoid them for layout.

If the actual data you're presenting fits naturally into a rows and columns format, then a table is alright to use, imo.

randombar

Cool that kinda puts my mind at ease a small but!

Do ye protect ye're css styles or is there a way of doing that?

forbairt

pretty much as eoin_s said

If its data .. it uses tables a calandar is data so it uses a table


Think to yourself if this was done with tables ...
http://www.csszengarden.com/
there would pretty much be only one example

forbairt

GaryCocs wrote: »

Cool that kinda puts my mind at ease a small but!

Do ye protect ye're css styles or is there a way of doing that?

What do you mean by protect your CSS Styles ?

you could give them all extremely silly names which would make it tricky for people to copy it but once you can see a website ... you have the css / images and so on of the website. If you really want to protect your CSS ... don't put it online

Eoin

forbairt wrote: »

Think to yourself if this was done with tables ...
http://www.csszengarden.com/
there would pretty much be only one example

And on the flip side, think of what would be involved with using CSS to layout a calendar!

GaryCocs wrote:

Do ye protect ye're css styles or is there a way of doing that?

There are CSS obfuscators out there, but I've never bothered with that kind of stuff.

Winters

Tables are perfect to be used for tubular data and information.

A lot of designers seem to be dropping tables everywhere and overusing CSS where it is not ment to be. Tables are there for showing tubular data and should be used as so. Trying an over-exagrant css and div system to replace it is just adding bloat.

DIV's and CSS are perfect for 90% of layouts. But there is no problem with using tables where necessary.

louie

I totaly agree with Winters here. Div's are the way to go, but don't over do it.

BRENSH

I also agree with winters idea. Tables are still here although I think w3c are thinking about a new type of 2 dimensional list tag that will be used instead of tables in the future. A layout was never built for a table. However there is no point in spending time constructioning advanced nested css with divs or uls when you can use a table.

ConsultClifford

eoin_s wrote: »

And on the flip side, think of what would be involved with using CSS to layout a calendar!

Hi eoin

try this for starters : http://mikecherim.com/experiments/css_list_calendar.php

Eoin

ConsultClifford wrote: »

Hi eoin

try this for starters : http://mikecherim.com/experiments/css_list_calendar.php

A bit less markup than I expected alright, but I'd say a table is still quite appropriate for a calendar?

forbairt

I like it ... but ... whats the point.

In my eyes a calendar is data and is to be displayed in a fixed format of one week per line (though I will semi contradict myself in a bit)

To be honest you can probably make WAY less markup there by simply having unordered lists with a class name and therefore be able to do away with the extra spans used all over the place, I don't like the fact that he has introduced an character | which is adding to the required data to be displayed but which is really a visual element. This is similar to using >> or similar instead of a graphic in a link

I guess where this technique would come in useful would be if you decided I no longer want to display the header / days and just have a long list of the days all the way across the page you can simply change your css to do this. With a standard table you'd be forced to restructure your table.

Eoin

forbairt wrote: »

I guess where this technique would come in useful would be if you decided I no longer want to display the header / days and just have a long list of the days all the way across the page you can simply change your css to do this. With a standard table you'd be forced to restructure your table.

Yeah, I suppose if you wanted a list view, like the "day view" in Outlook, you could just change styles.

It's definitely an alternative way of doing it, and a lot cleaner than I expected (though my CSS knowledge isn't great at the best of times).

PixelTrawler

On the css protection...

For my next site I plan to use this http://www.cssdrive.com/index.php/main/csscompressor/

Buts its not that my css is so mighty complex I dont want anyone finding my secrets, its simply to reduce the white spaces and get the file size down...

Experimented with it yesterday and it halved my css size... which over the life of a site could be a nice bit of bandwidth..

My css is controlling my layout and drop down menu system (nice and neat, no javascript) so it was getting close to 11k

forbairt

I would like to think my css is pretty good ...

personally if it had been up to me I would have used list items for each day .. which would be similar to table rows and cells ... so pretty much no saving there though I would prefer it to his version.

He's added in anchor elements for each of the days which is fine assuming that your days link to something if not then you are creating useless elements. As I said I don't like the fact he has added in | characters and spans after each of the days which to me is really a no no as he's using text for display (while I know I'm guilty of it too as separators between links from time to time in this instance I think its a bit stupid)

so all in all its nice but if I were to do it I'd have each day as a list item which would hopefully allow you to create the borders with css and not with characters. Though once you go down this route you are pretty much replacing the table rows and cells with unordered lists and list items so why not just use tables ... well to be able to create a long listing of the days.

forbairt

Joebloggs4817 wrote: »

For my next site I plan to use this http://www.cssdrive.com/index.php/main/csscompressor/

Cheers for the link .. I know I'm guilty of having fairly bloated css line spaces / indents and so on and it does affect the load time for sites thankfully or unfortunately as the case may be none of my sites receive more than a few hundred hits a day so it hasn't been that much of an issue yet though I guess anything to reduce load time for visitors.

reitoei

GaryCocs wrote: »

Hey Just a question for everyone, I know divs are the way to go this day and age, I was just wondering do people still use tables within these divs for basic layouts and calendars and the likes or are tables completely avoided or what? What's good web design?

Thanks
Gary

Tables should be used for displaying tabular data (what they were designed for), so something like a calendar is fine. They should not be used as a layout tool in this day and age.

Serbian

forbairt wrote: »

personally if it had been up to me I would have used list items for each day .. which would be similar to table rows and cells ... so pretty much no saving there though I would prefer it to his version.

He's added in anchor elements for each of the days which is fine assuming that your days link to something if not then you are creating useless elements. As I said I don't like the fact he has added in | characters and spans after each of the days which to me is really a no no as he's using text for display (while I know I'm guilty of it too as separators between links from time to time in this instance I think its a bit stupid)

so all in all its nice but if I were to do it I'd have each day as a list item which would hopefully allow you to create the borders with css and not with characters. Though once you go down this route you are pretty much replacing the table rows and cells with unordered lists and list items so why not just use tables ... well to be able to create a long listing of the days.

A table is the most semantic way of presenting a calendar in my opinion. Using a list item for each day is not going to work semantically speaking. If you were to view a calendar that uses list items for each day without css, it would look something like this:

• Monday
• Tuesday
• Wednesday
• Thursday
• Friday
• Saturday
• Sunday

• 1
• 2
• 3
• 4
• 5
• 6
• 7

etc.

As you can see, there's no correlation between the day and the date. That's also what the bar character in the linked calendar is used for. It's not to add borders to each list, but to actually separate each date for visual correlation with each day.

All this could be achieved in a much more stable format: i.e. a table. A semantic calendar would look like this in my opinion (obviously in its most basic format - you can add classes for styling):

<table summary="The day and dates of December 2007">
    <caption align="top">
    December 2007
    </caption>
    <tr>
        <th scope="col"><abbr title="Sunday">Sun</abbr></th>
        <th scope="col"><abbr title="Monday">Mon</abbr></th>
        <th scope="col"><abbr title="Tuesday">Tue</abbr></th>
        <th scope="col"><abbr title="Wednesday">Wed</abbr></th>
        <th scope="col"><abbr title="Thursday">Thu</abbr></th>
        <th scope="col"><abbr title="Friday">Fri</abbr></th>
        <th scope="col"><abbr title="Saturday">Sat</abbr></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
    <tr>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
    </tr>
    <tr>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
    </tr>
    <tr>
        <td>30</td>
        <td>31</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

democrates

I still use tables for some layout jobs because it's easy to get the same appearance across browsers.

Yes I could do it with divs, but the testing and tweaking workload goes through the roof, thanks to the diversity in browser rendering. Take all the variances in versions of IE, Firefox, Camino, Safari, and consider that some of these also render differently depending on the underlying OS.

No wonder we have sites where people worship the fact that someone managed to achieve the zen three column layout with header and footer that fills the screen, executed in cross-browser css. And IE7 changes from IE6 so the experiments begin again, as they will with each new browser.

That layout is simple with a table, but a black art in divs where there are no end of 'workarounds' for browser inconsistencies. To hell with that, I'm not doing it.

Aside from pc-based clients, we have pda's, blind readers etc. Small screen devices need smaller images, some users with poor eyesight need larger images. A blind reader needs careful positioning of navigation links and page content, a different flow to the regular browser layout.

Templates allow customisation that is far more fitting to the target client, and that makes a lot more sense to me than trying a one size fits all approach in tables let alone divs.

I don't think the W3C got it too wrong, it could be great and easy, whereby for any given markup and style, what you see in one browser on one OS is what you'll see in any other on any OS. The assertion that divs should be used for all layout ought to be weighed against the fact that not all clients render the same, and also the economic cost of other work that is displaced by spending ages on what has degenerated into a puritanical pursuit.

Our biggest problem is that the W3C have allowed MS to set a retarded development pace, so badly that exasperated stakeholders have given up on them and run with the ball themselves.