Old school desks over divs

Question

I am an old school web designer and still prefer to select tables over divs. It’s easier for me to make public websites this way, especially considering the number of current browser platforms that we have.

I can do divs perfectly, but it’s easier to find tables when working in cross browsers

If I deal with professional websites, I will consider how to do it wrong, to be unprofessional or to frown? Will it be classified as non-standard or old-fashioned?

Answer 1

You use semantic tables to get a grid, such as a layout. The reason this is wrong (and frowning) is mainly due to the fact that the layout information is in the wrong place. Html should be used for semantics (content without appearance), and style should be executed in css (look without content). Therefore, only if the information is tabular, you should use the table tag.

However, the question is good, because the really good alternatives are still around the corner (see the suggested CSS layout mechanisms below).

How do you now if you should use a semantic table?

• Each line should represent some topic of the same nature as other lines or topics related to peer topics.
• Each column for each row should be associated with a specific aspect of the topic.
• The decision to place some information in a cell should reasonably be based on 1) and 2), and not on aesthetics.

Modern CSS alternative

W3C has some upcoming solutions. Currently, Chrome, Firefox, and Internet Explorer have one closest need for you ( http://dev.w3.org/csswg/css3-grid-layout ). This CSS is what you are looking for. This winter will be available in all smokers new browsers. So, over the next few years, you should use older (and more bulky) CSS (see below).

Another is CSS Flexbox ( http://www.w3.org/TR/css3-flexbox ).

These specifications are new for general use, though, but that is how these layouts will work correctly.

Current CSS mesh alternative, e.g. layouts

I would use a CSS grid to avoid tables today. You can use this code as a starting point.

http://simplegrid.info

Using CSS, which works in all browsers, as in the example above, is a bit more, but it works in all browsers today.

Answer 2

Tables should only be used to display a tabular data period. Any other use of them is not semantic, wrong and old-fashioned. The only place tables are acceptable for layout - this is HTML email ...

The rule is to use the most semantic element for the situation that Quentin is hinting at, so definitely not:

<table class="header"> 

And try and avoid:

 <div class="header"> 

Choosing instead (if possible) for:

 <header> 

Answer 3

I would not recommend it, but the current HTML 5 Draft specification allows you to use a table for layout.

How to distinguish a layout table from a data table

Possibly layout table

• Using the role attribute with a value representation
• Using the border attribute with an inappropriate value of 0
• Using inappropriate cellpacing and cellpadding attributes with a value of 0

Perhaps a table without a layout

• Using title elements, thead or th
• Using area headers and attributes
• Using the border attribute with a value other than 0
• Explicit visible borders set using CSS

Not a good indicator

(for both layout tables and non-layouts, this attribute has historically been given)

• Using the summary attribute

link: http://dev.w3.org/html5/spec/the-table-element.html#the-table-element

As for the cross-browser website, which should be easily accessible, even if you use tables or divs to build the web page.

But what should make them accessible, focusing on compliance with WCAG level 2.0 level . WCAG 2.0 has a complete set of HTML Methods that can be used as the best HTML coding pratices and create an affordable website.

Short link to guidance and methods: How to Meet WCAG 2.0

:-)