Tableless with CSS vs.Tables for Web Design
Most web browsers out on the market now have to wait to load all the tables before the content. This can make your page render slower. In some case web developers will have tables nested in tables nested in tables. This can be a problem when a web browser is reading your code, not to mention a search spider.
Tables are Slower than CSS
You can put absolute widths and heights on your tables to have them reader quicker. But doing this you will have your webpage a fixed size. In most cases this isn’t a big deal. If you are coding to a liquid base webpage, where it adjusts itself to the resolution, keep this in mind.
Accessibility
When using tables you take away the different columns of your page, making the code layout out of order. If someone is using a screen reader and they come to your website. Your navigation is on the left column, content in the middle and extra links on the right. You would want your visitor to hear all the navigation, the all the content and last the external links.
If you have a table, it is going to read the first row of the navigation, content and external links. Then the second row of the navigation, content, and external links. This can be a problem. Tableless CSS everything is laid out in order and a screen reader can read the content without any confusion.
Different Web Browsers
When a visitor accesses your site they might be using Internet Explorer (most likely), Firefox, or maybe Safari. Tables do hold their sizes on different browsers. Different web browsers render tables very similar. With CSS, browsers like to render elements differently. This can be frustrating when learning CSS, margins and padding could size differently. More you code in CSS, the less this is a problem.
Clean Code
When using tables instead of CSS you find yourself filling your page full of code. In a table situation you need to have a <table><tr><td>Content</tr></td></table>. Having the same effect in CSS you only need <div class="content">Content</div>. CSS has less coding and a cleaner fill. Also with this example you have your class element, ready to stylize.
Tableless with CSS or Tables is Fine
Both of these elements can be used and are used throughout the internet. As the internet is moving forward, there are less websites using the table layout method. There are places for both elements. You need to develop a way that you are comfortable. Keep in that CSS is moving forward with new techniques and will keep your web site accessible friendly
Related Web Design Articles
