CSS Layout Vs Tables based Layout

There are a number of differences between creating layouts in CSS compared to tables. Here are some of them.

CSS

CSS stands for “Cascading Style Sheets” and is a language created to be in a good way of separating HTML structure from design.

Benefits

• By separating HTML structure from design, it is much easier to understand code. Style sheet is preferably in a separate file.
• The layout is “fluid” which means that you can position elements freely, as opposed to tables that use a fixed grid.

Cons

• All browsers do not read the CSS the same way. Internet Explorer is a browser that has long lagged behind in terms of being compatible with CSS. With Internet Explorer 9, Microsoft will catch up with other browsers, although not the browser supports the latest in CSS.
• To center elements vertically with only CSS is not an easy task. On the Theme Forest is a good guide that shows five different ways of how to do.

Tables

Benefits

• It is easy to center the contents of a cell.
• Since the entire table is seen as a device keeps track of the columns relate to each other. In practice this means that if a column is pulled out on the hill, follow the others. It can be advantageous if, for example, want one column repeating background should follow all the way down.

Cons

If you have a complex site and create it with tables, it can easily become a viper’s nest of td and tr (table data and table rows). Should you then add more td or tr in the already complex layout can be in big trouble because you may need to make more adjustments several different places for it to work.

It is considered as “best practice” to avoid tables for layout / design. Since it is not recommended should instead embrace the new technology.

The golden mean

There is, as I have described both the advantages and disadvantages of both CSS and tables.

There is a variant which is a mixture of both. You can create the tag in the stylesheet and set up so that it behaves like a table, table cell, or table-row. It can make you a less messy code-free tables, but still take advantage of, for example, get two columns of equal length.

Here are the different cases as they appear in the stylesheet:

  display: table;
 display: table-cell;
 display: table-row;