Use html tables and CSS for hybrid webpage design

Source: Internet
Author: User

A recent article on trim (Frames) gave me the idea of the current state of web design. Not long ago, many web page standards were published. The advantages of developing web applications using CSS and XHTML are gaining popularity, but many developers still rely more on HTML tables to control page output. Let's take a look at the advantages of using HTML tables and CSS methods.
The old method may not be bad
When I first started designing web pages, I was surprised by the strength and elasticity of HTML tables. They can be infinitely nested to achieve the expected design results, and the problem that the original blank table cannot be correctly displayed in the browser can be corrected through the blank GIF. However, the meaning behind HTML and tables is not the appearance.
HTML tables are used to design and present tabular data. Therefore, if you want the data to look like in Excel, using a table is the best answer. In addition to dealing with this data effortlessly, web page developers in their early years quickly discovered that forms are an excellent way to control the output and appearance of web pages.
It is easy to cut a webpage design into different tables, but it is troublesome to manually code the same output. In addition, countless nested tables in web design become a headache when they need to be changed. Fortunately, visual design tools like Frontpage can also help you. A good way to display table-based output is to use an example.
Table design provides the expected design results, but the final HTML code is a bit hard to understand. One advantage of using tables is that many browsers support all of them, including old browsers like IE 5.0. This is obviously different from the CSS design, but CSS has some different advantages.
Break through new applications
A few years ago, when CSS was just formed, the web page standards began to be implemented. It is based on the fact that HTML is designed to process web content. This means that it is not designed to process data. CSS inherits this design principle, allowing you to easily differentiate the design (HTML) from the appearance (CSS.
First, CSS is used to process the appearance of text, such as color and font, but gradually grows to support various appearance factors. In addition to simplified text appearance and color, CSS also provides layout functions. The problem with CSS-based output design is browser support. Browser support is slowly reaching expectations, but it is never supported by old browsers. With limited support, there are a variety of different workspaces and revisions.
Let's take a look at the HTML example developed using CSS and compare it with the HTML table. In the HTML source code in list B, its browsing appearance is identical to the effect of defining the main areas (headers, menus, content and footer) of the page using the DIV tag. In addition, an unordered list is used in the menu area. CSS is included in the "head" section of HTML. It defines the appearance rules of different DIV tags. This includes color and white space.
The final result of CSS output is simpler design, because the content will be controlled by HTML (without a table, HTML source code is much easier to read ), the appearance is simply controlled by CSS. Because CSS supports different browsers, you must make unremitting efforts to test and deploy many CSS modifications to adapt to known browser differences. These modifications (and how to work in older browsers) are beyond the scope of this article.

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.