Advantages and disadvantages of Table layout and why it is not recommended

Disadvantages of Tables

1. Table takes up more bytes than other HTML tags. (Delay download time and occupy more traffic resources of the server.)

2. Tablle will block the rendering order of the browser rendering engine. (It will delay the generation of the page and make the user wait longer.)

3. When displaying pictures in a table, you need to split a single, logical picture into multiple pictures. (Increases design complexity, increases page load time, and increases the number of HTTP sessions.)

4. There may be problems copying text in the Table in some browsers. (This will annoy users.)

5. Table will affect the effectiveness of some of its internal layout attributes (such as the height: 100% of the element in <td>) (this will limit your page design freedom.)

6. Once you learn CSS, you will find that using tables for page layout becomes more troublesome. (Take the time to learn some CSS first, it will save you a lot of time later.)

7. Table is semantically incorrect for page layout. (It describes the presentation, not the content.)

8. Table code drives readers crazy. (Not only can you not use CSS, but you will also be confused)

9. Once the table is designed, it becomes dead and it is difficult to give it a new look through CSS.

Advantages of Tables

In some situations, using Table is 100% appropriate, proper, and correct. For example, it is completely correct to use table to make a table.

If you can't decide whether you should use a table, refer to the above points and I believe you will find the answer.

<<: Use momentJs to make a countdown component (example code)

>>: Detailed installation process of Jenkins on Linux

Detailed explanation of HTML's <input> tag and how to disable it

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

Blog

Advantages and disadvantages of Table layout and why it is not recommended

Detailed explanation of HTML's <input> tag and how to disable it

Summary of common operation skills of MySQL database

Example code for using CSS to implement the style of logistics progress

Sample code for CSS image animation effects (photo frame)

Nginx dynamically forwards to upstream according to the path in the URL

How to change the root password in MySQL 5.7

How to implement remote automatic backup of MongoDB in Linux

js to achieve the effect of light switch

The difference and reasons between the MySQL query conditions not in and in

CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged

Recommend

How to implement the observer pattern in JavaScript

Graphic tutorial on configuring nginx file server in windows 10 system

React+Antd implements an example of adding, deleting and modifying tables

vsCode generates vue templates with one click

CSS position fixed left and right double positioning implementation code

js implements array flattening

Detailed explanation of how to customize the style of CSS scroll bars

Docker-compose creates a bridge, adds a subnet, and deletes a network card

Detailed explanation of Docker container cross-host multi-network segment communication solution

How to write the Nofollow tag and how to use it

WeChat applet Amap multi-point route planning process example detailed explanation

How to install Docker on Windows 10 Home Edition

JavaScript static scope and dynamic scope explained with examples

Mysql 5.7.17 winx64 installation tutorial on win7

How to use Nginx to solve front-end cross-domain problems