Advanced Search
Keywords

Should I Care if My Website is Table Based or Table Free?

This entry was posted By geekitdown on Wednesday, January 13th, 2010 at 10:03 pm and is filed under Web Markup. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Professional website designers are already familiar with concepts such as table free css div coding, table based layouts, css, html, xhtml, and valid markup. However, if you’re not yet as experienced in website design, these may all be foreign terms to you. In this post I’ll help sort out these meanings for you, explain some of the pros and cons of each style of markup, and give you the skinny on whether any of these things will really matter to your website.

Website Markup Code

Definitions:

First, let’s get some practical information out of the way. HTML stands for Hyper Text Markup Language and XHTML stands for eXtensible Hyper Text Markup Language. The X in XHTML does not indicate a more risqué type of markup, in fact other than the slight variation in name, the only difference between the two is that XHTML is stricter and more definitive with its use of tags. Both serve the same purpose, put all website elements in order for display through browsers to the end user screen.

So which should I use?

Webmasters need to choose between HTML and XHTML and the choice will largely come down to personal preference. Sure you’ll hear debate between those who believe HTML is practical, reliable and sufficient as we await the arrival of HTML 5 and those who regard XHTML as the well formed successor and heir to the HTML throne. HTML is the predominant markup language but don’t let that exclude XHTML from your choices. In the end there’s no right or wrong choice so you’ll have to decide what the right choice is for you. Let’s examine some of the pro’s and con’s to help you decide.

To Table or Not To Table:

Table based layouts have been around for a long time. Tables are typically used by new web designers to create their websites and page layouts. With programs like Dreamweaver making table based design easier, tables continue to provide a fast and easy way to create web pages. While tables have their place, they are slowly being replaced with CSS positioning and modern browsers have accepted this transition. The transition stems from several reasons. Problems with table based layouts can include gaps in certain browsers when tables are nested inside other tables, accessibility issues for users who are visually impaired and excessive HTML code content versus website content. Tables are a great way to get started and familiarize yourself with the overall feel and develop of web pages. Ideally, though, developers should move towards using CSS for positioning and layout and leave the tables in the dining room. CSS allows for attribute setting while creating the layout, whereas with table based layout the setup is completed and then CSS stylizing is added to elements.

CSS Layout:

CSS (Cascading Style Sheets) has, in the past, been used to modify font attributes and the look of content but designers and developers have moved more towards layout and positioning. The main reasons include flexibility in positioning, modern browser support and decrease in HTML code to actual content ratio. Possibly the most attractive reason for using CSS is that changing a single stylesheet can change the entire website. Initially the setup for a CSS based layout will take a bit longer than table based but once finished will provide for much simpler and easier editing in the future. Along the way developers will gain valuable knowledge and learn to simplify their code for a more readable, streamlined site.

The XHTML debate:

A lot of debate has come from the W3C’s decision to focus support and development towards HTML 5 instead of XHTML 2. But basically all that means is that XHTML becomes XHTML 5 upon the arrival of HTML 5. XHTML in many senses is a more practical choice for developers. The strict nature of XHTML means developers learn to close tags properly, use proper syntax and eliminate the more permissive nature of HTML. The old adage of ‘do it right the first time’ rings true when determining your start path on web development. Just as it’s important to use CSS right from the get go, so is it to know strict XHTML.

Conclusion:

For now your best bet is to use validated XHTML with CSS for layout and positioning. Always use CSS, there really is nothing like modifying a single element and changing the entire look or feel of your site. Upon the arrival of HTML 5, developers will likely make great use of some of the new video and audio embed tags as well as some of the other enhancements but until then make sure your code is always validated and that your website is visually accurate in as many browsers as possible. If you do those things, when HTML 5 is ready you will be too.

About the Author:

The GeekITDown team. The team at GeekITDown provide computer services and technology solutions based in Central Florida. The team has more than 10 years experience in the computer services and repair industry and post articles, blogs and how-to’s on their website, GeekITDown. You can follow them on Twitter or contact them through the website.

Your Thoughts:

Tell us which markup language you think new developers should be using.  Let us know what works or doesn’t work for you.  Got an experience or opinion of your own to share?  Write it in the comments.

Tags: , , , , , , , , ,

('DiggThis') StumbleDelicious

Comments

I had a project a while back when all I knew was table based website design, I had to work with a back end programmer on a site, and early on he mentioned I had to use a tableless design using css and divs and boy was that a shocking learning curve. I felt I had the table approach locked down and I was in my website design prime. So I set out to learn what the div stuff was all about, and about 4 very long days later I was still just as confused as the first day. The project feel through and I couldn’t complete the project, which made my wallet very sad, But I was determined to climb the learning curve, the problem was that this approach design meant that I would have to understand some complicated programming terms such as relative positioning vrs. absolute, and floats, and margins. too much for a designer that is concerned about elements of a layout and how they relate…

Good bless cs4 fireworks and its ability to export css code. No I layout my designs then build the css div through fireworks then update the css code in dreamweaver with css text and the individual images.

Its w3.org compliant and I do love the flexibility divs have, you can layer them where tables you could not., but if fireworks didn’t have that capability I don’t think I would have been able to get on the other side of the learning curve.

Thanks and Regards

Noel for Nopun.com

Thanks for sharing your experience Noel. I’m sure others, including myself *cough*, have had to switch our design approach and undoubtedly will again.

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost