What's the difference between tables and CSS templates?
Article ID: KB101638
Question: What's the difference between a tables template and a CSS template?
First, the terms may be confusing because a template may use tables and CSS.
A tables-based template is a web template where the layout is based on a grid
created with HTML tables (
<table> ... </table>). A tableless
CSS template, or a template with CSS-based layout, is a web template where the layout
is not achieved with tables but purely through a Cascading Style Sheet.
Some web templates may have tables-based layout, but use CSS to define some fonts
and colors, so it is important to first know if you're dealing with a CSS-based layout
or not. Usually the template details will tell you.
Note: The PixelMill search options allow you to narrow your search by tables or tableless.
Open the General Options section and look for the "Layout Type" dropdown.
You may select CSS layout (tableless), Tables-based layout.
Official web standards recommend the use of CSS to achieve layout,
rather than using tables for layout. However, developers who are used to
tables-based layout may find it challenging to get used to CSS. Fortunately
web editors are making it easier and easier to have CSS-based layouts.
Pros and Cons
- Tables-based layouts
- Pro: Some people are used to working with tables-based layouts.
- Pro: Older web editors, such as Microsoft FrontPage, display tables-based layouts better in the design editor view.
- Con: Tables are no longer recommended for layout by current web standards.
- Con: Tables-based layouts can be less optimized for search engines.
- Con: Tables-based layouts often involve more code and increase bandwidth.
- Con: Tables-based layouts do not allow for global design updates the way CSS does.
- CSS layouts
- Pro: CSS layouts are recommended by current web standards.
- Pro: Because the layout definitions are centralized in a stylesheet, global design changes are easier to make.
- Pro: By separating the layout and design from the actual content of a page, the page code can be more optimized for search engines.
- Pro: CSS layouts usually result in more streamlined code, decreasing bandwidth.
- Con: Some older editors such as Microsoft FrontPage do not display CSS layouts properly in the Design View. While it is still possible to work with older editors, the user will have to get used to working in Split View and refreshing frequently in a browser instead of depending on the Design preview.
- Con: As with any technology, there is a learning curve for CSS. Developers who are used to using tables may not want to invest the time to switch over to CSS.
CSS templates and web editors
Microsoft Expression Web and Adobe Dreamweaver do a very good job of rendering CSS layouts.
Microsoft FrontPage, which has an older display engine, has some challenges with displaying CSS layouts;
most notably, some fonts may seem extra-large, content areas may fall underneath each other instead of laying side-by-side, and content areas may overlap.
Developers who continue to use FrontPage will have to learn to work around these limitations by working in Split View and previewing the site frequently in a browser instead of trying to depend on the Design View or Preview.
PixelMill templates are designed with clean X/HTML and CSS code to provide the basic layout and styles; adding text and image content without additional formatting (trying to add more columns, for example) is recommended for people who don't have any knowledge of CSS.
Advanced users can modify the styles to create additional desired layout.
Simply using Expression Web and Dreamweaver to try to create formatting may cause some unintended results and unoptimized code.
PixelMill is committed to providing customers with education for learning more CSS through its newsletter, webinars, and support articles.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
permalink to this article:
Back to top