Tableless Web Design


table-less-design-1024x298 Tableless Web Design

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!

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g Tableless Web Design
CEO, Flying Cow DesignAttended University of Auckland Lives in San Francisco Bay Area
October 18th, 2016


Need help with Web Design?

Write to us with your project details and we will get back to you shortly.


Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
An iframe or inline frame is essentially a browser window set within the web page.
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
Not often are CSS and typography used in the same sentence and in many ways,
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,