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. Today, CSS how to give you some guide for to make tableless Web design considerably improves Web accessibility in this respect.
Screen readers and braille devices have fewer 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, e.g. 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.” The guideline’s checkpoint 3.3, a priority-2 checkpoint, says “use style sheets to control layout and presentation.”
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.
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. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.
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.
On the other hand, 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.
The use of tables
On the one hand, 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 control graphic and page layout. Some sources clarify this distinction by using the more specific term “tableless web layout”.
On the other hand, using tables in web design, although most common, does not necessarily equate to using the table element (and related elements, such as the div element) defined in HTML 4.0. CSS also specifies a “table model” which allows the semantics of “tabular representation” to be applied: the “display: table” element. In this way, the decision and definition for tables is transferred from HTML to CSS. One reason this distinction is sometimes overlooked is the lack of support for the CSS table model in Internet Explorer. Internet Explorer 8 is the first version of the browser to support the CSS table model.
