Table FAQs and solutions

When using tables, beginners may encounter various problems. Because they are not very familiar with tags, they are often confused about these problems. Sometimes, even if you are confused about these issues, you may lose your interest in continuing learning. Therefore, we have listed the most common problems in table usage for analysis, hoping to help you.

1. Table deformation

Webpage page deformation often occurs in different screen resolutions or window changes. This is also the most annoying thing. What should I do? Qiu Shi wrote an article on the Tianji website Tao BA to elaborate on this problem in detail. Let's see how he solved it.

A. Misplacement in different resolutions due to table arrangement settings

This deformation is:

1. When the resolution is 800*600, everything is normal. When the resolution is 1024*800, multiple tables or some tables are centered, but some are left or right, which is ugly, why?

Before solving this problem, let's talk about the arrangement of tables. The table can be arranged on the left, middle, and right. If no special settings are made, the table is arranged on the left by default. Needless to say, this is the problem. At a resolution of 800*600, the table is as wide as the editing area and is not easy to detect. When the resolution is 1024*800, the solution is simple, that is, both are set to center, left, or right.

2. In this resolution switch, tables are arranged up and down differently.

What we mentioned above is horizontal dislocation, which is vertical dislocation. Most of them occur when another table is embedded in one table unit. The reason is that the embedded table is arranged vertically in the center by default. When the resolution is 800*600, this dislocation cannot be seen, but it appears at 1024*800. The solution is as follows, set the arrangement as needed, instead of using its default settings.

B. Deformation due to percentage

The percentage here refers to the percentage of the table's height or width set to the upper-layer label's area height or width, for example, the width of a table unit is 600, another table is embedded in it. If the table width accounts for 50% of the table unit, the table width is 300, if a table is not embedded in another table unit, the percentage of the table is relative to the window width at that time. It is often displayed in IE browser. You can change the size of the homepage window as needed, the table content is also misplaced and deformed, because the percentage of the table also needs to change to the corresponding percentage width with the size of the window.

Of course, the solution is not to set the percentage. I advocate that if the table does not have a peripheral nested tag, set the width to a fixed width. If there is a peripheral nested tag, set the width of the external to nested tag to a fixed value, and the width or height of the table can be set as a percentage, so that no deformation will occur.

C. Deformation caused by mutual interference between table cells

This kind of deformation usually occurs when there is no gap in the preparation of the homepage in the tool, but it is annoying to find some gaps while browsing.

I often encounter similar situations. The solution is to first check whether the table settings have the two situations mentioned above. If not, it may be that when table partitioning, the issue of mutual restraint between cells in the same row.

We know that table cells in the same row are often split frequently in DreamWeaver or FrontPage. Therefore, the width and height of cells in the same row are different from those in the other cell, pay attention to two cell attributes: colspan and rowspan. Colspan indicates horizontal expansion, while rowspan indicates vertical expansion. This extension means the number of horizontal and vertical table units adjacent to the current table unit, it can also be understood that the height or width of a table unit is the addition of the height or width of several adjacent table units, as shown in the following figure.

The horizontal width of this cell is the width of the three table cells (the maximum value here), that is, colspan = 3; while the vertical height is the sum of the heights of the three table cells, that is, rowspan = 3.

<