The world of website development continues to remain divided on the topic of CSS and tables. Specifically, countless developers ask, Which is better, CSS or tables? And quite simply, the answer is not clear, thus the reason for such a divide. One side argues for the use of CSS, while the other cheers for tables. It’s a cycle that shows no sign of stopping, so we think it’s time to add our opinion into the mix: CSS is better than tables.
The Top 10 Benefits of Using CSS:
Faster Load Times
Users hate long load times. So much so, in fact, that 40% of users abandon a website that takes more than 3 seconds to load. Moreover, a 1 second delay decreases customer satisfaction by approximately 16%. Don’t let this happen.
CSS websites display content as soon as it’s loaded, so users see the top of the website while the bottom may still be loading. Tables, on the other hand, display content all at once, requiring all content to be loaded before it can be displayed.
When comparing load times between CSS and tables, a table-based website may take 2 to 4 times longer to load (.25 – .4 seconds vs. 1 – .12, respectively). As mentioned before, even a 1-second delay can lead to a drastic decrease in customer satisfaction, and you run this risk using tables.
Lower Hosting Costs
Many hosting companies offer varying payment plans, which are often based upon the amount of bandwidth a specific website uses each month. Bandwidth is the amount of traffic occurring between the website and the Internet, and the more traffic, the more bandwidth being used.
Now, let’s examine two identical websites, one built using CSS and the other using tables: the table-based website and the CSS-based website. First, notice that the table-based website’s file size is approximately 16kb (not including images) while the CSS-based website’s file size is 8kb (not including images).
So, let’s say that your hosting plan allows for 1 gigabyte of bandwidth per month. If you were using the table-based website, you would be allowed around 65,536 views. For most hosting plans, going over this amount would result in either (1) additional charges or fees based on the volume of additional traffic or (2) a temporary shutdown of your website until the monthly bandwidth limitations reset or you pay for more bandwidth.
However, if you were using the CSS-based website, you would be allowed approximately 131,072 views before reaching the 1 gigabyte limitation. That’s twice the amount of traffic.
Save Money with Redesigns
Redesigning a table-based website requires much more time than redesigning a CSS-based website, because table-based websites mix visual data with content. CSS-based designs separate visual imagery from content, making it easier for designers or developers to change or alter the website’s format. And the less time a web development project takes to complete, the less cash a website owner has to shovel out. Using CSS is a long-term investment into the weight of your wallet.
Better Search Engine Optimization
Almost everyone will agree that an increase in traffic is a great thing. However, if you are using a table-based website, you are drastically decreasing your website’s potential for search engine optimization (SEO).
Here are the reasons why CSS is better than tables for SEO purposes:
- A smaller website file size increases the chances of a search engine spider crawling through the entire website. This leads to more keyword opportunities and faster index times, both of which are beneficial for search engine optimization.
- The excessive code in a table-based website can make it difficult for search engine spiders to differentiate between code and content. This decreases the website’s SEO potential, as it throws off the website’s perceived code-to-content ratio.
- CSS gives website designers the ability to program a wide range of rollover effects, which are defined within the CSS style sheet. This allows search engine spiders to focus on the website’s actual content, not a cluster of Javascript code. Plus, you can get the same fancy rollover effects as Javascript by using jQuery.
Quite simply, CSS offers more opportunities for search engine optimization, and these opportunities run deeper than surface content. Optimizing a website’s code is crucial for increasing traffic.
Multi-Medium Support
One of the biggest advantages of using CSS over tables is the ability to provide accessibility to numerous devices and mediums. Websites display differently on computer monitors than tablets or cell phones, and it’s important to provide your audience with appropriate versions of your website for each format. With CSS, you can include alternative style sheets for each particular device.
For example, a website viewed using a tablet may be drastically different than the one seen while using a cell phone. Both are versions of the same website, but their format has been optimized for their respective device. You don’t get that with tables, and that inaccessibility can scare away customers trying to view your site using devices other than a computer.
Visual Consistency
Using tables, one has to edit each and every page, adjusting spacer gifs, column heights and widths, and lots of other table-specific things. With CSS, on the other hand, one can use external CSS style sheets to maintain visual consistency across the whole site.
Let’s say you decide on altering the background image of your website’s header, which is found on every page of the site. With CSS, all you need to do is find the header div in the external CSS style sheet, change the header’s values, and then upload the new sheet. Done.
The same scenario for a table-based website would require editing the header’s values on each and every page. Miss one page and the website’s visual consistency is thrown off, and you may not discover it for days or weeks. CSS provides security for making website alterations.
Quick Website Updates
As mentioned briefly before, making changes to a CSS-based website requires less time and less money spent on paying designers. But it goes further than that: quick website updates ensure your site operates as you desire.
For example, say you want to change all of the font color of your website. With a table-based website, this would require an extensive period of time, because the developer has to change each and every page on the website. With CSS-based websites, the developer alters the external CSS style sheet – that’s it.
Rapid turnaround times for updates ensure your website keeps up with your demands. Want to change a header size? Easy. Want to change the font style? Simple. CSS-based websites fall under the “work smarter, not harder” school of thought and this benefits the overall operation of your site.
Beautiful Designs
For web designers, the creative possibilities of CSS greatly outweigh the possibilities of tables, and that alone should encourage individuals to lean toward using CSS.
When using tables, web design layouts are limited to grid-based, rigid, and inflexible designs. They must work within the confines of the code, rather than the confines of their own creativity. With CSS, however, the absolute positioning of elements and the z-index property gives designers the ability to layer elements on top of each other. Quite simply, CSS acts as a tool, not a hindrance, and allows the designer to create complex, intricate, and beautiful designs.
If you want a website that stands out from mainstream masses, go with CSS, because it allows a designer to truly create a unique and eye-grabbing interface.
No Spacer GIFs
Basically, a spacer gif is a transparent image that was once used to control blank space within a web page. Spacer gifs were transparent so that a table cell could be created to fill the background with a specific color, which was viewed through the transparent spacer gif.
Sound complicated? It was. And thanks to CSS, it’s dying, which is great because many now view spacer gifs as extraneous code that bloated a website and increased load times. It needs to die.
With CSS, background colors can now be defined using the “background” property. It’s easier, doesn’t bog down load times, and allows for faster updates or changes made to the website.
Competitive Edge
Remember, all of the aforementioned benefits of using CSS have been discussed as parts of a greater whole. Together, these parts culminate into a total package that provides you with a website built for muscling out the competition. From more opportunities for search engine optimization to an improved visual design, a CSS-based website will almost always beat out a table-based website. That’s just how it goes.