Look at web developer discussion forums or blogs and you might think that tables are about to be prohibited from the internet. There are such strong arguments against their use. Yet, is use of the newish and trendy CSS coding as an alternative to tables all that it is cracked up to be? Or, has it simply gone too far without considering the benefits along the way?
Warning: this topic is for nurds or people who can easily get anal over website mark-up!
There is more emphasis on cascading style sheets (CSS) today than at any time in the past. CSS works in harmony with mark-up languages such as Hypertext Mark-up Language (HTML) and Extensible HTML (XHTML). CSS is used to style X/HTML elements. For example, this paragraph is styled by a CSS file.
CSS is an ingenious partner to X/HTML, as it enables web masters to change the style of their website in a fraction of the time than would be needed to script and change each X/HTML tag.
Prior to CSS, and any major use of it after it arrived on the scene, most web developers would exploit the use of tables to literally create a grid on the page. This enabled them to place, with some degree of accuracy, their text, images, headers, columns, forms, etc.
Today, tables have become a bad word in web developer circles. It’s all about using CSS to style and position X/HTML elements – well mostly the division or section (div) element actually, which is the replacement for table elements.
As a web developer, we support CSS and we exploit it widely. However, we can’t get hung up on the quest to remove tables or to do without tables in our layout designs. In fact, there are some instances when we can’t rely on CSS alone to display fairly basic page layouts.
Consider a web page much the same as what you are looking at. If you came to our blog front-end, you will have seen a number of articles stacked on top of one another. This can be achieved with div elements and CSS styling. However, it can get untrustworthy when we start to add images and other elements, especially in the more advanced XHTML mark-up. In this case, images need to ‘float’ to the left or right. Images will often bleed over the lower boundaries of the div element. If we use the generally accepted ‘clear’ to try and ensure our vertically stacked list is somehow separated from other elements, this can play havoc with our side bars and anything below it. Even if we get it looking right in, say, Internet Explorer, we then find that an alternative browser like FireFox, interprets it quite differently.
Yet, if we save ourselves a great deal of time and effort and use the table elements for vertically stacked items, like record lists, the result tends to be the same across all browsers. So, why is the use of tables considered taboo?
We think that tables still play an important part in website development. By their very nature, they should be used to hold and display tabular data. The vertically stacked list is tabular data – it is a list of grouped records, in our case blog article records. It is therefore appropriate to determine the type of data being presented on the page and then to select appropriate X/HTML elements to present that data in a reliable cross-browser way.
We don’t see anything beneficial in having a web page without tables from one with tables. Over-use of tables might disadvantage web pages, but then over-use of other elements can have the same effect. So, we tend to use tables and div elements sparingly.
It is also necessary to determine the overall file size. For example, div element styling tends to use a great deal more CSS code than for a table and its elements, assuming the table is used appropriately.
Life is full of challenges, but there is no need to make up worthless hurdles and expect people to jump over them. We think that tables are still in. With CSS, tables rock!
You may reproduce this article and share it on any site you choose on the basis that the copyright details below remain intact and unchanged.
SilkLink is a web design and development business based in Cornwall, UK. Over 25 years experience in IT, web development and business analysis. Get webbed with SilkLink.
