Eogen: 1 revision imported

2018-09-19T08:19:01Z

1 revision imported

Bonadea: Reverted edits by 196.194.175.155 (talk) to last version by ARK

2018-03-08T08:18:11Z

Reverted edits by 196.194.175.155 (talk) to last version by ARK

New page

{{CSS}}

'''Tableless web design''' (or '''tableless web layout''') is a [[web design]] method eschewing the use of [[HTML table]]s for [[page layout]] control purposes. Instead of HTML tables, [[style sheet (web development)|style sheet]] languages such as [[Cascading Style Sheets]] (CSS) are used to arrange elements and text on a [[web page]].

==History==
HTML was originally designed as a semantic [[markup language]] intended for sharing scientific documents and research papers online. Visual presentation was left up to the user. However, as the [[Internet]] expanded from the academic and research world into the mainstream in the mid-1990s, and became more media oriented, graphic designers sought ways to control the visual appearance of their Web pages. As popularised especially by the designer [[David Siegel (entrepreneur)| David Siegel]] in his book ''Creating Killer Web sites'', tables and [[spacer GIF|spacers]] (usually transparent single pixel [[GIF]] images with explicitly specified width, height or margins) were used to create and maintain page layouts.<ref>{{Cite news| last = Gruber| first = Jordan S.| title = Outta Site| work = Wired| accessdate = | date = 1997-02-01| url = https://www.wired.com/1997/02/outta-site/}}</ref>

The CSS1 specification was published in December 1996 by the [[World Wide Web Consortium|W3C]] with the aim of improving [[web accessibility]] and emphasising the separation of presentational details in style sheets from [[semantics#Computer science|semantic]] content in [[HTML]] documents. CSS2 in May 1998 (later revised in CSS 2.1 and CSS 2.2) extended CSS1 with facilities for positioning and table layout.

The preference for using HTML tables rather than CSS to control the layout of whole web pages was due to several reasons:
* the desire of content publishers to replicate their existing [[corporate design]] elements on their web site;
* the limitations at the time of CSS support in browsers;
* the new web designers' lack of familiarity with the CSS standards;
* the lack of knowledge of, or concern for the reasons (including HTML [[Semantic Web|semantics]] and [[web accessibility]]) to use CSS instead of what was perceived as an easier way to quickly achieve the intended layouts, and
* a new breed of [[WYSIWYG]] web design tools that encouraged this practice.

In the late 1990s the first reasonably powerful [[WYSIWYG]] editors arrived on the market, which meant Web designers no longer needed a technical understanding of HTML to build web pages.<ref>{{cite web|last1=Maas|first1=Benard|title=A Brief History of WYSIWYG Editors|url=http://1percentmarketingwebdesign.com/brief-history-wysiwyg-editors/|publisher=1PMWD|accessdate=10 February 2015|quote=Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.}}</ref> Such editors indirectly encouraged extensive use of nested tables to position design elements. As designers edited their documents in these editors, unnecessary code and empty elements were added to the document. Furthermore, unskilled designers were likely to use tables more than required when using a WYSIWYG editor. This practice frequently led to many tables nested within tables, as well as tables with unnecessary rows and columns. The use of graphic editors with slicing tools that output HTML and images directly also promoted poor code with tables often having many rows of 1 pixel height or width. Sometimes many more lines of code were used to render content than the actual content itself.

The reliance on tables for layout purposes caused a number of problems. Many web pages were designed with tables nested within tables, resulting in large HTML documents that use more bandwidth than documents with simpler formatting. Furthermore, when a table-based layout is linearized, for example when being parsed by a screen reader or a search engine, the resulting order of the content can be somewhat jumbled and confusing.

Landmarks in the adoption of CSS-based layouts include the [[Web Standards Project]]'s Browser Upgrade campaign of February 2001 and the web design magazine ''[[A List Apart]]'''s subsequent redesign, followed by the ''[[Wired (magazine)|Wired]]'' redesign in 2002.<ref>{{Cite book| edition = 1st| publisher = New Riders| isbn = 978-0-7357-1201-0| last = Zeldman| first = Jeffrey| title = Designing With Web Standards| location = Indianapolis| date = 2003-05-14| pages=120-134}}</ref> The [[CSS Zen Garden]] website, launched in 2003, has been credited with popularising tableless layouts.<ref>{{Cite book| edition = 2nd| publisher = New Riders| isbn = 978-0-321-38555-0| last = Zeldman| first = Jeffrey| title = Designing with Web Standards| location = Berkeley| date = 2007|page=137}}</ref>

Cascading Style Sheets (CSS) were developed to improve the [[Separation of presentation and content|separation between design and content]], and move back towards a semantic organization of content on the Web. The term "tableless design” implies the use of CSS rather than layout tables to position HTML elements on the page. HTML tables still have their legitimate place when presenting tabular information within web pages,<ref name="Kyrnin"/> and are also sometimes still used as layout devices in situations for which CSS support is poor or problematical, like vertically centering an element.

Some developers are now afraid to introduce a simple HTML table even where it makes good sense,<ref name="Kyrnin">
{{cite web
| url=http://webdesign.about.com/od/tables/a/aa122605.htm
| title= Tables for Tabular Data — What is Tabular Data? When to Use Tables in a Standards-Based XHTML Document
| author=Jennifer Kyrnin
| publisher=About.com, a part of The New York Times Company
| accessdate=2009-10-22
}}</ref>
some erring by the overuse of [[span and div]] elements, perhaps even with table-like rules applied to them using CSS.<ref>
{{cite web
| url=http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
| title=17.2.1 Anonymous table objects
| work=Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
| date=2009
| publisher=[[W3C]]
| accessdate=2009-10-23
}}</ref>

== Rationale ==
The intended and semantic purpose of HTML tables lies in presenting [[Table (information)|tabular data]] rather than laying out pages.<ref>
{{cite web
| title = Tableless layout HOWTO
| url = http://www.w3.org/2002/03/csslayout-howto
| date = 2005
| author = Dominique Hazaël-Massieux
| publisher = [[W3C]]
| accessdate = 2007-09-08
}}</ref>
The benefits of using CSS for page layout include improved accessibility of the information to a wider variety of users, using a wide variety of [[user agent]]s. There are bandwidth savings as large numbers of semantically meaningless {{tag|table|o}}, {{tag|tr|o}} and {{tag|td|o}} tags are removed from dozens of pages leaving fewer, but more meaningful headings, paragraphs and lists. Layout instructions are transferred into site-wide CSS stylesheets, which can be [[HTTP|downloaded]] once and [[web cache|cached]] for reuse while each visitor navigates the site. Sites may become more maintainable as the whole site can be restyled or re-branded in a single pass merely by altering the mark-up of the specific CSS, affecting every page which relies on that stylesheet. New HTML content can be added in such a way that consistent layout rules are immediately applied to it by the existing CSS without any further effort.

== Advantages ==
=== Accessibility ===
{{main|Web accessibility|Search engine optimization}}

Because of the Internet's rapid growth, expanding [[Disability discrimination act|disability discrimination legislation]], and the increasing use of [[mobile phone]]s and [[Personal digital assistant|PDAs]], it is necessary for Web content to be made accessible to users operating a wide variety of devices beyond the relatively uniform [[desktop computer]] and [[CRT monitor]] ecosystem the web first became popular on. Tableless Web design considerably improves [[Web accessibility]] in this respect.

[[Screen reader]]s and [[braille]] devices have fewer problems with tableless designs because they follow a logical structure. The same is true for [[Web search engine|search engine]] [[Web crawler]]s, the software agents that most web site publishers hope will find their pages, classify them accurately and so enable potential users to find them easily in appropriate searches.

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. [[Handheld device|handhelds]], mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page.

The W3C's [[Web Content Accessibility Guidelines]]' guideline no. 3 states "use markup and style sheets and do so properly."<ref>
{{cite web
| url=http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation
| title=Web Content Accessibility Guidelines 1.0
| publisher=W3C
| date=1999
| quote=Guideline 3. Use markup and style sheets and do so properly.
| accessdate=2009-09-19
}}</ref>
The guideline's checkpoint 3.3, a priority-2 checkpoint, says "use style sheets to control layout and presentation."<ref>
{{cite web
| url=http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets
| title=Techniques for Web Content Accessibility Guidelines 1.0
| publisher=W3C
| date=2000
| quote=Use style sheets to control layout and presentation.
| accessdate=2009-09-19
}}</ref>

=== Bandwidth savings ===
Tableless design produces web pages with fewer HTML tags used purely to position content. This normally means that the pages themselves become smaller to download. The philosophy implies that all the instructions regarding layout and positioning be moved into external style sheets. According to the basic capabilities of [[HTTP]], as these rarely change and they apply in common to many web pages, they will be cached and reused after the first download. This further reduces bandwidth and download times across the site.<ref>
{{cite web
| url=http://www.alistapart.com/articles/slashdot/
| title=Retooling Slashdot with Web Standards
| author= Daniel M. Frommelt
| date=2003
| publisher=A List Apart Magazine
| accessdate=2009-09-20
}}</ref><ref>
{{cite web
| url=http://www.sitepoint.com/print/css-4-css-website-design/
| title=HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design
| author= Dan Shafer
| date=2003
| publisher=SitePoint Pty
| quote=...on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.
| accessdate=2009-09-20
}}</ref>

=== Maintainability ===
Maintaining a website may require frequent changes, both small and large, to the visual style of a website, depending on the purpose of the site. Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as [[HTML editor]]s, changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing [[sed]] or similar global find-and-replace utilities cannot alleviate the problem entirely.

In tableless layout using CSS, the layout information may reside in a CSS document. Because the layout information may be centralized, it is possible that these changes can be made quickly and globally by default. The HTML files themselves may not need to be adjusted when making layout changes.

Also, because the layout information may be stored externally to the HTML, it may be quite easy to add new content in a tableless design, whether modifying an existing page or adding a new page. By contrast, without such a design, the layout for each page may require a more time-consuming manual changing of each instance or use of global find-and-replace utilities. However site owners often want particular pages to be different from others on the site either for a short period or long term. This will often necessitate a separate style sheet to be developed for that page. The page (or template) content usually can remain unaltered however, which is not the case in a tables-based design.

==See also==
*[[Framing (World Wide Web)]]
*[[Responsive web design]]
*[[Web literacy|Web literacy (design and accessibility)]]
*[[Holy Grail (web design)]]

==References==
{{reflist}}

== External links ==
* [http://www.w3.org/2002/03/csslayout-howto.html.en W3C Tableless layout HOWTO]
* [https://web.archive.org/web/20090216193839/http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ 13 Reasons Why CSS Is Superior to Tables in Website Design]
* [http://www.opendesigns.org/website-templates/ Open Designs] (A collection of W3C-compliant tableless web templates)

[[Category:Web design]]
[[Category:Web accessibility]]
[[Category:Cascading Style Sheets| ]]
[[Category:Responsive_web_design]]

← Older revision	Revision as of 08:19, 19 September 2018
(No difference)

Tableless web design - Revision history

Eogen: 1 revision imported

Bonadea: Reverted edits by 196.194.175.155 (talk) to last version by ARK