CSS Tableless Templates

Our selection of CSS tableless templates is growing, so I thought that now would be a good time to talk about the difference between tables-based templates and tableless templates.
Tables-based layout describes the use of HTML table tags to create columns and rows for a grid layout that then allows you to have a column layout and more complex interface graphics (like rounded corners or drop shadow info boxes) than you would be able to without a tables-based layout. You can tell if you have a tables-based layout by looking at the HTML code — if you see a lot of <table>, <tr>, and <td> tags in the code, then you have a tables-based layout. Web developers began using tables to “force” layout because of the limitations in HTML for having cool designs. (HTML is primarily a “markup language,” which means that it brings meaning by labeling things as paragraphs, headers, quotes, etc., but within just HTML there is no way to describe how something should then “look.”)
With the advent of cascading stylesheets (CSS) a few years ago, however, and with all the major browsers finally implementing CSS, HTML could go back to doing what it was first intended to do — provide meaning to the content of a site. CSS handles the layout, the colors, the fonts, the interface graphics. So now, we have what we call CSS-based layout, or table-less layout — layouts that are designed and formatted completely with a stylesheet instead of with tables.
CSS-based layouts are more flexible, more powerful — one could easily make a layout change across your entire site by editing the stylesheet, whereas with a tables-based template one would have to go through each page and edit the code (or copy and paste the content from each page into the new layout). CSS-based templates provide cleaner code without all of the <table> and <tr> and <td> tags, which helps with better search engine ranking and accessibility.
At PixelMill, we are encouraging all of our developers to begin developing more and more CSS-based layouts instead of using tables, although we know it will be a slow transition. One of the biggest factors for developers continuing to use tables-based layouts is, frankly, the terrible CSS rendering that FrontPage 2003 Design View has, especially when it comes to relative font sizes (where the fonts can resize when the user changes the text size in their browser).
Customers who are used to using tables-based layouts usually have a bit of a shock when they open their first CSS template, where columns sometimes appear below other columns instead of lining up neatly in a row. It takes a bit of a shift to get used to working to a CSS template, although the benefits (cleaner code, better accessiblity and validation, see above…) far outweigh the initial frustration. (Dreamweaver MX and MX2004 users may experience some frustration as well with shifting content areas, but Dreamweaver 8 is quite solid in its rendering of CSS layouts.)
With the coming release of Expression Web Designer and SharePoint Designer 2007, CSS templates should overtake tables-based templates. EWD and SD2007 were created with powerful CSS layout in mind, and come with many tools to help refine and edit the stylesheet. The templates display perfectly in Design View. Templates made for FrontPage 2002 or 2003 work just fine in EWD and SD2007 so upgrading shouldn’t be a concern.
If you are looking for cleaner code, better search engine ranking, accessibility and validation, CSS templates are worth the look.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch