Getting Started with CSS beginners: It's unwise to use a table layout page

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags beginners can make change content data design display display content

Why is it unwise to use the table layout page?
You see the title, do not think that the table can not be used in the page, but to use the table, but try not to use table to layout the page, why do you say so, because using the table layout page will lose the flexibility of the page, how a flexible method, For example, today you have to make the page, the next day the boss said I do not like the login module to put to the right, or put to the left, the notice plate to the right, the page style best one months, if encountered such a boss, put forward this request, and your page is the table layout, then you will collapse, The workload that is big drop ~, if you do not believe that, you can find a page, with a table layout, and then change the plate and style, you will realize the table layout of the inflexible, this is why, because the birth of the table is for storing data, function and Execel almost, Not used for layout, only later we found that the table can put the page elements, such as pictures, put to any place you want to put, and made out of the page can be compatible with a variety of browsers, so the table has assumed the burden of the layout page, this is for several years ... Until the arrival of the Web2.0 era, table is gradually freed from the work of the layout page, concentrating on storing the data ^_^

Since the table was born for storing data, who was born to page layout?
The answer is: Div,div is born for the layout of the page, but has been not recognized, the reason is that DIV to layout pages need to match the CSS, the use of more cumbersome, as well as table drag and drop page on the layout ok, feel better than table convenient, Thus Div was placed in a dim corner of the people, secretly waiting for the emergence of Bole, until the 2003 California Scott Design Company in San Francisco to participate in the Web page layout and designed a seminar on the speech, so that Div saw the sun, out of the haze ... ...

Say so much, we compare the advantages and disadvantages of the table layout page and Div layout page

using tables for page layouts can pose many problems:


* Mix format data into your content. This makes the file size unnecessarily large, and users must download the format information once they visit each page, bandwidth is not free.


* This makes the redesign of existing sites and content extremely labour-intensive (and expensive).


* This also makes it extremely difficult and expensive to keep our entire site visually consistent.


* The Tabular page also greatly reduces its affinity for people with disabilities and viewers of mobile phones or PDAs. and using CSS for page layout, it will:


* Make your page load faster


* Reduce your flow cost


* Allows you to modify your design more efficiently and at a lower cost


* Help your entire site maintain visual consistency


* Allows your site to be better found by search engines


* Allows your site to be more approachable to viewers and browsers


* As more and more people in the world adopt WEB standards, it can also improve your competitive power in the workplace (and, in fact, reduce the risk of unemployment).

There is an article on the internet turn around, the article focuses on the introduction of div three points, perhaps after reading the article, as the community veteran Heflyaway said the feeling of the author is more infatuated with the table, each article is inevitable with personal color, and turned out the purpose, in fact, is to give everyone to reduce the temperature of div , lest "go mad", depending on the div is omnipotent, if you want to learn CSS layout page, it is necessary to look at it from a number of aspects, well, not to say, the following is the author of the CSS layout Page three points of advantage and understanding:

1, Content and form separation, the front page only need to display content on line, the form of art to CSS to deal with. The generated HTML file code is streamlined and smaller to open faster.


2, the revision of the site easier, without redesigning the page, or even without moving the original site of any HTML and program pages, just to change the CSS file on the completion of all the revisions. For the portal site, the revision is just as easy as changing clothes.


3, search engine more friendly, ranking more easily forward.

    1th, content and form separation
The front page only needs to display content on the line, the form of art to CSS to deal with. The generated HTML file code is streamlined and smaller to open faster.
This is the most notable feature of Div technology, and also the source of CSS. Completely subvert the current traditional (table) Web design technology. All the content now made with table can be solved with CSS, and the solution is more perfect and more powerful. Do not need everyone to form a table, so that the resulting web page file size is more concise, smaller. Table era, a page table to achieve more than 10 is very common things, but now with Div, a table can not be used to fully achieve the previous effect, which directly results in the Web page file size than the use of table when the reduction of 50%-80%, save the webmaster's hard disk space , visitors open the page faster, and with Div, unlike the previous use of table, must be read all the table to display the page content, it is now possible to read a div to show an effect, we open the page do not have to wait. The benefits are obvious and powerful.
This advantage is indeed significant, the use of traditional table-built web pages, the content of many, sometimes up to 30K or so may be, the file opened, there must be 0.0 seconds delay. Using Div, you open the front desk to see all the direct content, CSS files are imported links, is another file, the basic and HTML file size does not matter, this generated HTML file, one also about 10K size.


    2nd, the revision of the site is simpler and easier
do not need to redesign the page layout, or even do not move the original site of any HTML and program pages, just to change the CSS file on the completion of all the revision.
Div for the portal site revision is like changing clothes as simple and easy, when the revision, do not change the entire station HTML page, just need to write CSS, and then with a new CSS overlay the previous CSS can be achieved. It's convenient.

    3rd, the search engine is more friendly and can certainly help SEO.
by div The layout of the Web page, you can make some important links, text information, and give priority to search engine spiders crawl. This is also helpful for SEO.

To sum up, personal feeling div not too superstitious it's very good very strong, it as the production of web pages, beautify the page is an important auxiliary is very powerful and convenient. Can make up for the table to make the frame and form a lot of shortcomings and art shortcomings, but only use it to do, too time-consuming and laborious, for the nationalSmall and medium sized website long, really not very suitable. I personally think that using TABLE+DIV+CSS is the best combination, but also the most time-saving method.
 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.