Advantages of using css over table layout

I knew about very little before I came to know in details while studying this in a book. Some points that were mentioned are as follows:

* If we use DIVs(and similar html tag elements) and a separate style sheet file(.css file) to define appearance and position, we won’t need to repeat this definition further more, for each and every page of our site. This leads to a site that is both faster to develop and easier to maintain later.

* The site will load much/significantly faster for end users! We should remember that the style sheet file will be downloaded by the client only once, and then loaded from the cache for subsequent requests of pages until it changes on the server. If we define the layout inside the HTML file using tables, the client browser instead will download the table’s layout for every page, and thus download more bytes, with the result that downloading the whole page will require a longer time and cost we more in bandwidth. Typically, a CSS-driven layout can trim the downloaded bytes by up to 50%, and the advantage of this approach becomes immediately evident. Furthermore, this savings has a greater impact on a heavily loaded web server — sending fewer bytes to each user can be multiplied by the number of simultaneous users to determine the total savings on the web server side of the communications.

* Screen readers, software that can read the text and other content of the page for blind and visually impaired users, have a much more difficult job when tables are used for layout on the page. Therefore, by using a table-free layout, we can increase the accessibility of the site. This is a very important requisite for certain categories of sites, such as those for public administration and government agencies. Few companies are willing to write off entire groups of users over simple matters like this. An easy way to see how a screen reader for the blind will read our site is to remove all the style sheets from our website. If it doesn’t flow straight down and is broken up into content sections, they are going to have a tough time figuring out which content is important and how it should be read.

* CSS styles and DIVs provide greater flexibility than tables. we can, for example, have different style sheet files that define different appearances and positions for the various objects on the page. By switching the linked style sheet, we can completely change the appearance of the page, without changing anything in the content pages themselves. And it’s not just a matter of colors and fonts — we can also specify positions for objects in CSS files, and thus have a file that places the menu box on the upper-left corner of the page, and another one that puts it on the bottom-right corner. Because we want to allow users to pick their favorite styles from a list of available themes, this is a particularly important point.

* CSS even enables we to create a specific layout for the printer. This is a very important point, because the user is usually interested in printing only the content of the page and not the sidebars and login information that is presented in the browser. These elements of the page can be easily set to not be displayed through CSS when they are being printed. Also, if we use a lot of dark background colors that would just use up ink, we can change the dark backgrounds to white to save the end user some money on the cost of ink and still have our website print in a way that we control.

* CSS enables us to target different classes of devices in some cases without requiring new HTML markup, such as mobile devices like PDAs or smartphones. Due to their constrained screen size, it is necessary to adapt the output for them, so that the content fits the small screen well and is easily readable. we can do this with a specific style sheet that changes the size and position of some containers (placing them one under the other, rather than in vertical columns), or hide them completely. For example, we might hide the container for the banners, polls, and the header with a big logo. Try to do this if we use tables — it will be much more difficult. we’ll have to think about a custom skinning mechanism, and we’ll need to write separate pages that define the different layouts available; this is much more work than just writing a new CSS file.