A brief discussion on how to choose and combine div and table

Page layout has always been my concern since I started dealing with webpages. From the early table-structured pages to DIV and then to DIV+Table, it can be said that our needs have been changing, but the purpose has not changed. Why do I say this? It is obvious that from simple to complex, and then from complex to simple; from simple application to complex application; everything is done around demand. Many developers and designers have to consider several points when developing page layouts: whether the layout is reasonable, whether the structure is compact, whether it has sufficient scalability, and whether it is readable. The reasonable use of Table and DIV to construct our web is an important issue we discuss. This can be viewed from several different perspectives:

1. Positioning

First of all, strictly speaking, both tables and divs are reasonable layout methods. You cannot deny the value of tables, or that divs only have advantages and no disadvantages. It can be said that web architecture can use both tables and divs. Then the key is your positioning of your web needs.

We need to consider how much impact a web page will have on our site. For example, if our site targets massive amounts of visits and data (of course, cache issues are not discussed here), then the architecture will usually reduce the use of tables, especially when there are a lot of loops. Of course, tables are also useful. For complex sites, div+css is sometimes difficult to accurately define the content we want to express. In this case, table is a good choice. This is also an issue that needs to be considered before development, to ensure the required costs while achieving the development goals. Similarly, using div+css to implement a complex page is often not as simple as using a table.

2. Features

table and div have their own characteristics. This also means that they have different value orientations, which is very important for developers and designers.

Tables can easily build structured interfaces. By defining the table's own parameters, we can quickly define the page layout to the effect we need. Of course, the coordination of CSS can be relatively reduced. The disadvantage is that the scalability and readability are relatively poor. The poor scalability is reflected in maintenance and modification. For a site with a complex table layout and a large number of pages, developers will be at a loss as the requirements change. A large number of modification requirements will completely destroy the web interface development work. Poor readability, this is also relative, let's take an example: we use the same effect table and div to display a page

－－－－table－－－－

<table width="300" border="0" cellspacing="0" cellpadding="0">

<tr>

<td rowspan="3" bgcolor="#FF0000"> </td>

<td> </td>

<td rowspan="3" bgcolor="#0000FF"> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

－－－－table－－－－

－－－－div 1－－－－

<div style="width:100px;background-color:red;"></div>

<div style="width:100px;background-color:white;">

<div></div>

<div></div>

<div></div>

</div>

<div style="width:100px;background-color:blue;"></div>

－－－－div 1－－－－

－－－－div 2－－－－

<div style="display:inline-table; width:300px;">

<div style="float:left; width:200px; clear:left">

<div style="display:inline-table;">

<div style="float:left;clear:left;width:100px; background-color:red;"></div>

<div style="float:right; clear:right; width:100px;">

<div></div>

<div></div>

<div></div>

</div>

</div>

</div>

<div style="float:right; width:100px; clear:right; background-color:blue;"></div>

</div>

－－－－div 2－－－－

...

Table is more " rigorous " in expression and has limitations. It can be very difficult to understand when representing complex structures. Often the program content of our website is very large, and it is very difficult for developers to immediately have a clear outline of the code in their minds.

As for div, we know the meaning and function of div in HTML syntax. If we use it to implement page layout, it is almost entirely supported by CSS. It can be said that div cannot be used alone, especially for the highly targeted web, which has very strict requirements on the visual effect for users. The use of div must be implemented in conjunction with professional CSS parameters. From the previous examples, we can see that div layout is more flexible and can be simple or complex. The same display effect can be achieved in different ways by combining CSS and DIV. Its advantage is its strong expansibility . Developers and designers can make the layout look brand new by simply adjusting the corresponding CSS, which is far beyond the reach of tables. However, for parts with relatively complex structures, div+css development is often difficult . It takes half a day to write a simple div and css effect. Table is much better in this regard. Using WYSIWYG software such as dw, we can easily make something that takes half a day to make with div+css.

3. Compatibility

This is an important topic for every website, browser compatibility. In terms of compatibility between table and div, table has more advantages.

The IE and FF browsers we commonly use are very picky about DIV CSS settings. Often the same CSS will have different results on two browsers, which is a terrible problem for developers. It is impossible for us to exclude users' browsers, so we can only adjust our syntax and layout methods during development. Div requires us to strictly support CSS, but table does not need to consider so much. The rigor of the table is well reflected in different browsers.

After considering our positioning, features, and compatibility issues, I think everyone should be clear about how to layout and what architecture to adopt. I would like to say that for real developers, making good use of it is the most important concept. Instead of blindly preferring or demonstrating one's own technical ability to do development and design work. For div, we can give full play to its flexible and clear architectural characteristics, and cooperate with the rigor of table to meet the needs of various webpages.