Tag Archives: HTML

Code

Why You Shouldn’t Use Tables for Web Layouts

During my whole lifetime as a web designer or better as a front-end developer, I have coded only one site using tables for layout, the first one. It was the time when I had just began to do web stuff and I did not know very much about CSS and its potential, if not nothing at all. After that, I got introduced to CSS and ever since I have never used table in any of my site development projects I have worked on. I thought it would be a good idea to write something about this subject for the guys who still use tables for web design layouts, especially those that develop wordpress themes. So, let’s begin:

1. Tables are hard to code and difficult to maintain

Let’s suppose you are a hand-coder, how do you manage to write all those <tr>’s and <td>’s without errors? It is a common error when you code with tables to have missing tags or misused ones. It is even more difficult when one uses a WYSIWYG. WYSIWYG editors operate with table layouts and usually, the code that they generate is very messy. The same occurs when you slice a design with Photoshop or GIMP. Using CSS, you will code at least half less tags than coding with tables. Managing <div>’s through CSS is a far more easier, fun and creative process.

2. Tables are slow to load

The web site created in tables will take more time to appear on the screen

that CSS based one.When using using tables, the page won’t show up until the browser parses the last closing </table> tag. Moreover, the more table you nest within each other, the more the content will break until the images and text figures out where they belong to in the site. Well, this is a solved problem with CSS, just tell it where to be and there it will.

3. Tables can hurt your SEO

The more code that is in the way, the more junk they have to plow through to get to your content. Nested tables, which are usually used in table-based website layouts, would hurt the content that is inside it. There are more HTML tags than content.

There is another widespread idea about tables that use left-hand navigation (very common in table layouts) hurt the SEO, by telling the search engines that content is less important that navigation which appears before the main content in the HTML. This will distort search engines and mislead them in indexing your site. On the other hand, with CSS, you can make the navigation bar appear on top, but you can put it at the bottom of your HTML.

4. Tables lack accessibility

The same as it hurts SEO, it distorts screen readers. Most screen readers read pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation. Through CSS, you can display the anything on the top, but leave the most important part at the top of your HTML.

5. Tables don’t print well

Another problem with tables is that they don’t print well. With CSS, you can use a print style sheet to give another look to the page. You can also have elements that only show up when rendered to a screen, but not to a printer such as headers and footers. CSS is great for printing.

6. Tables make site redesigns much harder than semantic HTML+CSS

Through CSS, you can twist your site look so much, that you won’t resemble with the old site at all. The most important part is that, all this can happen without touching the HTML part at all. You can even have several different skins for your site and allow your users to select one of them. This can happen only in dreams, if you are using tables. You cannot alter the layout at all, expect colors and font size, when you are using tables, even though you might be using CSS. Get rid of tables.

7. Conclusion

It might be hard to make CSS-controlled layouts cross-browser compatible, which is often used as the main argument against switching to pure CSS. True. But as soon as you finally do it, the experience is great. The more CSS tricks you learn, the funnier it becomes to test them and play with them to see what other effects you can achieve. Tables could never be so much fun.

Read More
Code

I’m Sad to See WordPress Themes Using Tables

When I decided to begin a new project of mine, Open Book Critic, for time reasons, I just browsed the WordPress Themes Directory, typed ‘book’ in the search and some four or five themes appeared in the results. I chose one, NoteBook 1.0 theme. Well, my intention was that this would be a temporary theme, until I would find some time to design and code one myself. That is why I was not interested in retouching the code. Well, this did not change until my fiancee had a look at Open Book Critic and decided to have that same template for the site of her new English teaching center ‘Smart Center‘. And here begins the sad story.

Expect that I had to give up from my original theme for Smart Center, I had to redesign the template in Inkscpe as it had to be my fiancée’s favorite color, pink. For this reason I had a look at the xhtml/css code to grasp the designing manner. Well, this was the most bitter part; I came across with a painful TABLE-TR-TD mosaic. This made me pessimistic.

To make the situation less terrible, I begun to rewrite the xhtml/css from the beginning, following another layout principle with the image layout. And you can have a look at it at Smart Center and another at Open Book Critic to see the difference in look and in code. The look is almost the same, but the code very very different.

So, if you are someone who uses table-based design user, try to keep up with web standards and new tech. Make a Google search and don’t get back look back; tables belong to the past. And than none will dare to call you a terrible person.

Read More