Div Getting Started tutorial using table layout is unwise

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags browsers change content data design display display content example

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

There are many problems with using a table for page layout:
* Mix the 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).
* It also makes it extremely difficult and expensive to keep our entire site visually consistent.
* The tabular page also significantly reduces its affinity for people with disabilities and browsers using mobile phones or PDAs.

and using CSS for page layout, it will:
* Make your Page load faster
* Reduce your traffic costs
* Make your design more efficient and less costly
* Help your entire site maintain visual consistency
* Let your site be better found by search engines
* Make your site 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 the line, the form of art to the CSS to deal with. The generated HTML file code is streamlined and smaller to open faster.
2, the revision of the site easier, no need to redesign the page, or even do not move the original site of any HTML and program pages, just to change the CSS file to complete all the revision. For the portal site, the revision is just as easy as changing clothes.
3, search engine more friendly, ranking easier to lean 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 prominent feature of Div technology, but also the root of the existence 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 words, 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 website is simpler and easier
Do not redesign the page of typesetting, and even do not move the original site of any HTML and program pages, just to change the CSS file to complete all the revisions.
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, it can certainly help the SEO.
Through Div the layout of the Web page, you can let some important links, text information, priority 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 Web page an important auxiliary is very powerful and convenient. Can make up for table production frame and form a lot of deficiencies and the shortcomings of the art, but completely only use it to do, too time-consuming and laborious, for the national Small and medium web site long, really not very suitable. I personally think that using TABLE+DIV+CSS is the best combination, but also the most time-saving method.

Also need to explain, this section is a Table layout page and CSS layout page problem, the discussion is "layout page" on who better, not to say in the CSS layout of the page can not use Table, really powerful characters are Div, Table, CSS used just right, They three each do each thing, Div layout page, table storage data, CSS to dress the page!

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.