Web designing has evolved since the days of predominantly text based websites. With evolving technologies and increasing bandwidths, web programming techniques and the HTML language also have evolved. One of the most common elements in websites is the need to handle data that is presented in rows and columns — or, in other words, in tables.
In the 1990s, before the development and wide-spread acceptance of cascading style sheets (CSS), whenever information had to be presented in rows and columns, HTML tables were the automatic choice. Many web developers still use tables for presenting information in rows and columns — either because of their ignorance of tableless web design or because they are more familiar with HTML tables.
What is tableless web design?
Ever since CSS was developed and all browsers started supporting it, it has become possible to present information in rows and columns without the use of HTML tables. Simply put, creating web pages without the use of HTML tables is called tableless web design.
In tableless web design, the various elements of a web page are arranged using cascading style sheets (CSS) instead of using tables. This eliminates a number of <table>, <tr> and <td> tags in the page source code, making it leaner and the page faster to load.
Advantages of tableless web design
Using CSS-based tableless code is a far more flexible method of designing web pages as compared to the rigid tables of the past and has become the preferred form of designing web pages for a number of reasons. Below are five of the most compelling reasons why you should move to tableless web design.
Tableless web design is more accessible
Be it search engines or screen readers, they all read a web page in the way they are displayed in the page code. So, when content is accessed left to right, top to bottom, tables don’t always make sense to screen readers. Add nested tables to the mix with different spans and the page can be extremely different to figure out. This is why HTML5 recommends the use of tableless layouts.
Tableless web design is more flexible
When you create tables, the elements of the page need to be coded in a certain way for them to appear the way you wanted them to. However, with tableless layouts, if you wanted the navigation links on the left, you can use CSS to define where they should appear but the code itself can be at the end of the document. That way, search engines and screen readers would find the more important content first and the less important navigation elements later.
Tableless web design is easier
When you are creating the page, tables may seem easier. However, in reality, tableless designs are significantly easier — especially when you need to maintain pages. Figuring out the code with tables can be quite confusing, but with CSS, it is significantly simpler. Likewise, making changes are much easier with CSS as compared to tables.
Tableless web design is faster
The number of lines of code you need is significantly more with tables. With nested and complex tables, executing the code and accessing the content can take significantly longer than with a tableless layout. This means that the page load time improves when you use tableless web design.
Tableless web design is more search engine friendly
With faster page load time and the ability to let search engines access the more important content first, CSS based tableless web design is significantly more search engine friendly as compared to tables.
Besides these, there are other reasons to opt for CSS and tableless web design like: tables don’t always print well when you want to take a printout of a page; tables are invalid in HTML 4.01 and are not recommended in HTML5; and if you are a web designer, a portfolio that contains tableless websites will significantly improve your chances of finding work.
In conclusion, tables are seen as an old technology that is no longer relevant today. Leaner, cleaner, faster and flexible CSS based tableless designs are the new standard for web design and the increasingly preferred method of coding for professional web design firms around the world.
Professional Web Design Services from Flying Cow Design
Flying Cow Design has a track record of over 20 years of professional web design. What differentiates us from most web design companies is that our focus is not only on web design, but on building a strong online presence for our clients. Understanding the changing web development standards and search engine guidelines has helped us build a strong web presence for many of our clients through a combination of our web design and internet marketing services. To see how we can help you build a strong web presence, write to us today!
CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area
