When to use table and when to use CSS (experience sharing)
|
The main text page of TW used to have a width of 850px to take into account users with small monitors and low resolutions. Now that more and more users are using large resolutions, in order to be consistent with the homepage, it has to be changed to 950px. Because CSS layout was used when the page was made two years ago, even though there were hundreds of thousands of main text pages, only one CSS file and a few related images were modified and everything changed. If the table layout had been used, the consequences would have been disastrous... A few years ago, there was a debate on the Internet about CSS layout and table layout. Some people disagreed and thought that CSS was just a hassle, time-consuming and laborious. Some people were tortured to death by the lingering IE6 and finally gave up on CSS layout. Of course, this does not mean that CSS is absolutely superior to tables. Tables and divs have their own characteristics. This also means that they have different value orientations, which is very important for developers and designers. Whether the layout is reasonable, whether it is sufficiently scalable, and whether it is efficient, you must use tables and CSS reasonably for layout. Based on my experience, let me tell you when to use table and when to use CSS. 1. CSS layout should be used as much as possible in the following situations 1. Pages with large views: such as the homepage. CSS has few codes, compact structure, fast loading, and can greatly improve the page access speed. For important pages such as the homepage, CSS must be used for layout 2. Pages that need to display lists in a loop, such as list pages. It is of great benefit to the CEO and very helpful for programmers to nest programs. 3. Apply the same template to pages, such as the main text page. You can see it from the example I gave above. 4.… 2. Where table is needed 1. For complex advertisements and promotional pages that are only used once, table has more advantages than div in terms of compatibility. For pages that do not require post-maintenance, first use the table layout. 2. For special pages, because you need to expand information at any time and if you need to change the layout frequently, using CSS will make you very frustrated. 3. Various control parts such as forms in other pages. 4.… In fact, for real developers, making good use of its benefits 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 achieve various complex requirements. |
<<: 7 ways to vertically center elements with CSS
>>: Detailed explanation of Vue element plus multi-language switching
Recommend
11 Examples of Advanced Usage of Input Elements in Web Forms
1. Cancel the dotted box when the button is press...
Reasons and solutions for MySQL selecting the wrong index
In MySQL, you can specify multiple indexes for a ...
Vue+Openlayer batch setting flash point implementation code (based on postrender mechanism)
Effect picture: Implementation code: <template...
Example code for evenly distributing elements using css3 flex layout
This article mainly introduces how to evenly dist...
Summary of 28 common JavaScript string methods and usage tips
Table of contents Preface 1. Get the length of a ...
HTML table tag tutorial (44): table header tag
<br />In order to clearly distinguish the ta...
Detailed explanation of the reasons and solutions for Docker failing to start normally
1. Abnormal performance of Docker startup: 1. The...
How to delete folders, files, and decompress commands on Linux servers
1. Delete folders Example: rm -rf /usr/java The /...
Detailed steps for manually configuring the IP address in Linux
Table of contents 1. Enter the network card confi...
How to use Docker Compose to implement nginx load balancing
Implement Nginx load balancing based on Docker ne...
Installation and use tutorial of Elasticsearch tool cerebro
Cerebro is an evolution of the Elasticsearch Kopf...
MySQL 5.7.21 decompression version installation and configuration method graphic tutorial
Since I often install the system, I have to reins...
(MariaDB) Comprehensive explanation of MySQL data types and storage mechanisms
1.1 Data Type Overview The data type is a field c...
Linux common basic commands and usage
This article uses examples to illustrate common b...
Ubuntu 20.04 Best Configuration Guide (Newbie Essential)
1. System Configuration 1. Turn off sudo password...