Tableless web design (or layout tableless web ) is a web design method eschewing the use of HTML tables for page layout control practical purposes. Instead of HTML tables, style sheet languages Such As Cascading Style Sheets (CSS) are used to arrange text Elements and we webpage .

History

HTML was originally designed as a semantic markup for scientific documents and research papers online. Visual presentation was left up to the user. However, as the Internet grew from the academic and research world into the mainstream in the mid-1990s, it was becoming more media oriented, graphic designers sought ways to control the visual appearance of their Web pages. As popularized by the designer David Siegel in his book Creating Killer Web sites , tables and spacers (usually transparent single pixel GIF images with variable width, height or margins) have been used to create and maintain page layouts. [1]

The CSS1 specification was published in December 1996 by the W3C with the aim of improving web accessibility and emphasizing the separation of presentational details in style sheets from semantic content in HTML documents. CSS2 in May 1998 (later revised CSS 2.1 and CSS 2.2) extended CSS1.

The preference for using HTML tables rather than the following:

  • the desire of content publishers to replicate their existing corporate design elements on their web site;
  • the limitations of the 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 semantics and web accessibility ) to use CSS INSTEAD of What Was Perceived as An Easier Way to Quickly accomplish achieve The Intended layouts, and
  • a new breed of WYSIWYG web design tools that encourages this practice.

In the late 1990s, the first reasonably powerful WYSIWYG editors arrived on the market, which meant that Web designers no longer needed a technical understanding of HTML to build web pages. [2]Such editors are proposing extensive use of nested tables to position design elements. As designers edited their documents in these editors, they were added to the document. Furthermore, unskilled designers were more likely to use tables when using a WYSIWYG editor. This practice is frequently used in many tables, tables and columns. The use of graphic editors with slicing tools that output 1 pixel height or width. Sometimes many lines of code have been used to render content than the actual content itself.

The reliance on tables for layout purposes caused by a number of problems. Many web pages were designed with tables nested within tables, resulting in large HTML formatting. Furthermore, when a table-based layout is used, for example when being parsed by a screen reader or a search engine, the resulting order of the content may 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 Wiredredesign in 2002. [3] The CSS Zen Garden website, launched in 2003, has been credited with popularizing tableless layouts. [4]

Cascading Style Sheets (CSS) were developed to improve the separation between design and content , and move back to a semantic organization of content on the Web. The term “tableless design” implies the use of CSS rather than the layout of HTML tables on the HTML page, [5] and are also sometimes used as layout tools in situations for which CSS support is poor or problematic, like vertically centering an element.

Some developers are now afraid to Introduce a simple HTML table Even Where It Makes Good Sense, [5] Some erring by the overuse of span and div Elements, Perhaps Even with table-like rules applied to ’em using CSS. [6]

Rationale

The Intended and semantic purpose of HTML tables lies in presenting tabular data Rather than laying out pages. [7] The benefits of using CSS for the layout of a user’s organization of the user . There are large numbers of semantically meaningless pages <table><tr>and <td>tags are removed from the list of pages leading to fewer pages. Layout instructions are Transferred into Site-wide CSS stylesheets, qui peut être downloaded once and cachedfor each visitor navigates the site. Sites may become more maintainable as a whole or may be restyled or re-branded in a particular way by the specific CSS. CSS without any further effort.

Advantages

Accessibility

Main articles: Web accessibility and Search engine optimization

Because of the Internet’s rapid growth, Expanding disability discrimination legislation , and the Increasing use of mobile phones and PDAs , it is Necessary for Web content to be made available 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 improves Web accessibility in this respect.

Screen readers and braille devices have their problems with tableless designs because they follow a logical structure. The same is true for search engine Web crawlers , 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, eg handhelds , mobile phones, etc. It is also possible to specify a different style for print, eg to hide or modify the appearance of advertising or navigation elements that are irrelevant and a nuisance in the printable version of the page.

The W3C Web Content Accessibility Guidelines ‘ guideline no. 3 states “use markup and style sheets and do so properly.” [8] The guideline’s checkpoint 3.3, a priority-2 checkpoint, says “use style sheets to control layout and presentation.” [9]

Bandwidth savings

Tableless design produces web pages with fewer HTML tags. This page is intended to 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 , they will be cached and reused after the first download. This is a little bit more bandwidth and download times across the site. [10] [11]

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 editors , changing the positional layout of elements were whole website May require a great deal of effort DEPENDING on the amount of repetitive exchange required. Even employing sed or similar global find-and-replace utilities can not alleviate the problem entirely.

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

Also, because the layout information can be stored externally to the HTML, it may be quite easy to add a new content in a tableless design. By contrast, without such a design, the layout for each page may require a more time-consuming manual changing of each instance of global find-and-replace utilities. However, site owners often want to be a part of the site. This will require a separate style for this page. The page (or template) is usually unaltered however, which is not the case in a tables-based design.

See also

  • Framing (World Wide Web)
  • Responsive web design
  • Web literacy (design and accessibility)
  • Holy Grail (web design)

References

  1. Jump up^ Gruber, Jordan S. (1997-02-01). “Outta Site” . Wired .
  2. Jump up^ Maas, Benard. “A Brief History of WYSIWYG Editors” . 1PMWD . Retrieved 10 February 2015 . 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 … the WYSIWYG MS FrontPage software would have a backend FPSE in place it would have 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.
  3. Jump up^ Zeldman, Jeffrey (2003-05-14). Designing With Web Standards (1st ed.). Indianapolis: New Riders. pp. 120-134. ISBN  978-0-7357-1201-0 .
  4. Jump up^ Zeldman, Jeffrey (2007). Designing with Web Standards (2nd ed.). Berkeley: New Riders. p. 137. ISBN  978-0-321-38555-0 .
  5. ^ Jump up to:b Jennifer Kyrnin. Tables for Tabular Data – What is Tabular Data? When to Use Tables in a Standards-Based XHTML Document . About.com, a part of The New York Times Company . Retrieved 2009-10-22 .
  6. Jump up^ “17.2.1 Anonymous table objects” . Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification . W3C . 2009 . Retrieved 2009-10-23 .
  7. Jump up^ Dominique Hazaël-Massieux (2005). “Tableless layout HOWTO” . W3C . Retrieved 2007-09-08 .
  8. Jump up^ “Web Content Accessibility Guidelines 1.0” . W3C. 1999 . Retrieved 2009-09-19 . Guideline 3. Use markup and style sheets and do so properly.
  9. Jump up^ “Techniques for Web Content Accessibility Guidelines 1.0” . W3C. 2000 . Retrieved 2009-09-19 . Use style sheets to control layout and presentation.
  10. Jump up^ Daniel M. Frommelt (2003). “Retooling Slashdot with Web Standards”. A List Apart Magazine . Retrieved 2009-09-20 .
  11. Jump up^ Dan Shafer (2003). “HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design” . SitePoint Pty . Retrieved 2009-09-20 . … top of the list of the above, the browser has less code to download. These sites may have a significant impact on both the user experience and your bandwidth costs.