CSS
Cascading Style Sheets Comparison of layout engines (CSS) CSS framework CSS Zen Garden CSSTidy Tableless web design  This box: view • talk • edit

Tableless web design (or tableless web layout) is a method of web design and development without using HTML tables for page layout control purposes. A CSS Framework is a pre-prepared library that is meant to allow for easier more Standards-compliant styling of a Webpage using the The CSS Zen Garden is a World Wide Web development resource The goal of the site is to showcase what is possible with CSS -based design CSSTidy is an Open source Cascading Style Sheets Parser and optimiser written by Florian Schmitz Web page design is a process of conceptualization planning modeling and execution of Electronic media content delivery via Internet in the form Web development is a broad term for any activity related to developing a Web site for the World Wide Web or an Intranet. In Computing, an HTML element indicates structure in an HTML document and a way of hierarchically arranging content Page layout is the part of Graphic design that deals in the arrangement and style treatment of elements (content on a page ^[1] Instead of HTML tables, style sheet languages such as CSS (Cascading Style Sheets) are used to arrange elements and text on a web page. Web style sheets are a form of Separation of presentation and content for Web design in which the markup (i A web page or webpage is a resource of information that is suitable for the World Wide Web and can be accessed through a Web browser. CSS was introduced by the World Wide Web Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational. Web accessibility refers to the practice of making Websites usable by people of all abilities and Disabilities. HTML, an initialism of HyperText Markup Language, is the predominant Markup language for Web pages It provides a means to describe the structure Semantics is the study of meaning in communication The word derives from Greek σημαντικός ( semantikos) "significant" from

Early in its advent, many web developers considered CSS a more powerful and easier to use way of formatting, and considered the <FONT> tag obsolete. On the other hand early CSS had very limited and difficult to use layout capabilities and many common page layouts (like the 3-column design) that were very easy to implement with tables had no obvious equivalents in CSS.

As of 2006, CSS layout capabilities improved considerably. Year 2006 ( MMVI) was a Common year starting on Sunday of the Gregorian calendar. However, some popular browsers (notably Internet Explorer) still have limited or buggy support for CSS, which has slowed the adoption of tableless web design. Windows Internet Explorer (formerly Microsoft Internet Explorer abbreviated MSIE) commonly abbreviated to IE, is a series of graphical A software bug (or just “bug” is an error flaw mistake Failure, fault or “undocumented feature” in a Computer program that prevents it Many websites still use CSS for text formatting only, while using tables for layout.

Contents 1 Rationale 2 Advantages 2.1 Accessibility 2.2 Bandwidth savings 2.3 Maintainability 3 Problems 3.1 Alternatives 4 The use of tables 5 Notes and references 6 External links

Rationale

HTML was originally designed as a semantic markup language intended for sharing scientific documents and research papers online. A markup language is an Artificial language using a set of annotations to text that give instructions regarding the structure of text or how it is to be displayed 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 the Web pages presented to end users. The Internet is a global system of interconnected Computer networks To this end, tables and spacers (usually transparent single pixel GIF images with explicitly specified width and height) have been used to create and maintain page layout. Prior to the adoption of Cascading Style Sheets (CSS the spacer GIF was a transparent Image, often used to control blank space within a Web page, that

This causes a number of problems. Many Web pages have been designed with tables nested within tables, resulting in large HTML documents which 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.

In the late 1990s the first reasonably powerful WYSIWYG (what you see is what you get) editors arrived on the market which meant Web Designers no longer needed a good (or any) understanding of HTML to build web pages. Such editors indirectly encourage extensive use of nested tables to position design elements. As designers edit their documents in these editors, code is added to the document which is sometimes unnecessary. Furthermore, unskilled designers may use tables more than required when using a WYSIWYG editor. This practice can lead 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 promote poor code with tables often having many rows of 1 pixel height or width. Sometimes many more lines of code are used to render content than the actual content itself.

As the dot com boom receded in 2001, the Web Development industry shrank leaving the more skilled coders. It was around this time that many became critical of the above messy coding practices and the idea of tableless design began to grow.

Cascading Style Sheets (CSS) were developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web. Separation of presentation and content (or "separate content from presentation") is common Idiom, a Design philosophy, and a methodology applied The term "Tableless" design implies the use of CSS to position HTML elements on the page but it should be noted that tables and CSS are not mutually exclusive. Many experienced HTML coders use CSS to manipulate tables frequently.

Advantages

Accessibility

Main article: Web accessibility

Because of the Internet's rapid growth, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Web accessibility refers to the practice of making Websites usable by people of all abilities and Disabilities. In the late 20th and early 21st centuries a number of countries have passed laws aimed at reducing Discrimination against people with disabilities. Tableless Web design considerably improves Web accessibility in this respect. Web accessibility refers to the practice of making Websites usable by people of all abilities and Disabilities. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure. A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen (or more accurately sent to standard output The Braille system is a method that is widely used by blind people to read and write

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. handhelds, mobile phones, etc. A mobile device (also known as cellphone device, handheld device, handheld computer, "Palmtop" or simply handheld) is a pocket-sized 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. Web Content Accessibility Guidelines (WCAG are part of a series of Web accessibility guidelines published by the W3C 's Web Accessibility Initiative. 3 states "use markup and style sheets and do so properly. "[1] The guideline's checkpoint 3. 3, a priority-2 checkpoint, says "use style sheets to control layout and presentation. "[2]

Bandwidth savings

Clever implementation of tableless design can produce web pages with fewer HTML tags thus reducing page download times. Using external style sheets to position page elements means more mark up language may be cached and further reduce download times for subsequent pages using the same resources.

Poor implementation of tableless design can result in many more lines of code used per page element which can increase download time. Tables have a defined set of rules which are clear and concise while tableless design often involves working around browser inconsistencies.

There is no correlation between tableless design and bandwidth savings. If implemented correctly, the bandwidth savings are generally minor at best. The use of WYSIYG editors or perhaps the competency of the web page's author has a much greater influence on page download times. It is perfectly possible to build a web page with tables that is lightweight.

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 on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. An HTML editor is a software application for creating Web pages Although the HTML markup of a web page can be written with any Text editor, specialized Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely. sed ( S tream ED itor refers to a Unix utility which (a parses text files and (b implements a Programming language which can apply textual transformations

In tableless layout using CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

Also, because the layout information is stored externally to the HTML, it is 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.

Due to browser inconsistency and a particular web designer's implementation of tableless design, it may not be clear at first glance exactly how a tableless web page is constructed. While it is convenient to have markup language residing in a single CSS file, it can split layout logic unnecessarily. Browser inconsistencies can increase the risk of web pages failing to render properly which increases the need for maintainability.

Problems

The main problem with tableless design is the wide differences that are to be found in browser support. There are considerable differences in implementing a CSS layout for multiple browsers due to bugs and mis-interpretation of the standards by different browser developers. These necessitate a large number of complex hacks and workarounds in the CSS files, and Web pages need to be tested much more carefully on a wider variety of devices than with table-based design, as some of these bugs can render the content illegible on some browsers.

In addition, CSS support in some older browsers such as Netscape 4 is very incomplete, which can cause major problems if these browsers also need to be targeted.

Conversion to tableless web design has been slow also because of table to layer/css conversion software. HTML editors such as Adobe Dreamweaver can convert tables to layers back and forth. Adobe Dreamweaver is a Web development application originally created by Allaire Systems who was acquired approximately 1998 by Macromedia and is now owned Though this would ease the conversion a little, complications exist in the exactness of the conversion. The centering of tables centers them on the page, but the centering of layers together on different screen resolutions requires some tinkering.

Just as different browsers may interpret tableless design differently, different web designers implement tableless design with varying methods and degrees of skill. As a result, it can sometimes be difficult to read tableless code as compared to a web page with good use of tables which follow a well defined set of rules.

If a web designer has positioned block elements on a web page using the "float" attribute it isn't always clear how these elements are positioned and what parts of the related CSS file should be edited if adjustments are needed. Adjustments are often needed to widths of block elements in tableless design as browser support is not yet reliable.

Positioning an element on a web page using the "float" attribute encourages the browser to render many pages unintelligible if an error occurs because "float" gives the browser permission to reorganise the web pages by pushing page elements downwards rather than making user friendly adjustments.

There are clear benefits to removing or reducing the use of excess tables on web pages but as a consequence, many web designers are avoiding the use of tables completely. While tables are frowned at in the web design community, they are often the best tool for certain layouts. Often tableless design can offer no benefit at all but require many extra hours of work during website production and maintenance.

Alternatives

There are clear advantages to centralizing document mark-up across one or two CSS files. Global edits and simple adjustments are simplified this way. However with the advent of server side languages like PHP and ASP it became possible to centralize CSS and HTML with include files.

Nowadays, most high quality web applications use a presentation layer or templating system which applies HTML and CSS to the application logic in a simple fashion rather than duplicating mark-up language throughout many files in a website. The Presentation Layer is the sixth level of the seven layer OSI model.

Web applications using a presentation layers have their CSS files applied to a few HTML documents.

The use of tables

Because of the term "tableless web design", some have interpreted this design strategy as an unconditional repudiation of all tables in web design. This has caused some to avoid tables even when tables are appropriate. Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to simulate a division. Some sources clarify this distinction by using the more specific term "tableless web layout". ^[1]

Additionally, one distinction is sometimes missed: using tables in web design does not necessarily equate to using the table element (and related elements) defined in HTML 4. 0. Although the table element is by far the most common means of specifying tables in web design (both for "layout" and "tabular data") CSS also specifies a "table model" which allows the semantics of "tabular representation" to be applied using other elements as well. ^[2] One reason this distinction is sometimes overlooked is because of the lack of support for the CSS table model in Internet Explorer. Windows Internet Explorer (formerly Microsoft Internet Explorer abbreviated MSIE) commonly abbreviated to IE, is a series of graphical

Notes and references

External links

• CSS Zen Garden (CSS-based tableless design)
• Position Is Everything (explains many browser bugs and workarounds)
• Web Aim: An Introduction to Web Accessibility
• How to convert tables to layers on Dreamweaver
• W3C Tableless layout HOWTO
• No More Tables | CSS Layout Techniques (a 72-slide presentation by Douglas Bowman, also available on Google Video)
• 13 Reasons Why CSS is Superior to Tables in Website Design

---

© 2009 citizendia.org; parts available under the terms of GNU Free Documentation License, from http://en.wikipedia.org
Dapyx Software network: MP3 Explorer | Ebook Manager | Zenithic