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
Detailed explanation of the benefits of PNG in various network image formats
BMP is an image file format that is independent o...
Vue Router vue-router detailed explanation guide
Chinese documentation: https://router.vuejs.org/z...
A brief discussion on the execution details of Mysql multi-table join query
First, build the case demonstration table for thi...
Detailed explanation of the difference between run/cmd/entrypoint in docker
In Dockerfile, run, cmd, and entrypoint can all b...
Detailed explanation of the implementation of shared modules in Angular projects
Table of contents 1. Shared CommonModule 2. Share...
Solution to the error when importing MySQL big data in Navicat
The data that Navicat has exported cannot be impo...
Causes and solutions for front-end exception 502 bad gateway
Table of contents 502 bad gateway error formation...
Solution to Docker disk space cleaning
Some time ago, I encountered the problem that the...
About MySQL innodb_autoinc_lock_mode
The innodb_autoinc_lock_mode parameter controls t...
Solution to the problem that the MySQL database cannot be accessed by other IP addresses
Preface Still referring to the project mentioned ...
js learning notes: class, super and extends keywords
Table of contents Preface 1. Create objects befor...
Introduction to the usage of exists and except in SQL Server
Table of contents 1. exists 1.1 Description 1.2 E...
Detailed explanation of the idea of querying the difference between hourly data and last hourly data in MySQL
1. Introduction The requirement is to obtain the ...
Detailed explanation of how two Node.js processes communicate
Table of contents Preface Communication between t...
vue3+ts+EsLint+Prettier standard code implementation
Table of contents use Use of EsLint Add a profile...