Three methods to solve table width and height alignment problems in HTML

Many programmers will encounter the problem that tables cannot be aligned when making websites. So, how to set the width and height of cells in tables in HTML? Let's summarize the three methods of setting table width and height alignment in HTML.

When programmers are making web pages, they often encounter the problem of misaligned table widths. I have looked at the details of the height and width settings of the table tag table in HTML, and now summarize it as follows:

1, The width and height settings in table and their functions: set in table height actually sets a minimum value, that is, when the content in the table or the total row height exceeds this set value, the height value of the table will be automatically extended. When the content or row height in the table does not reach this value, it will automatically expand to this value. The width value set in the table is generally the maximum value of the table width and cannot be changed, even if the internal content width exceeds it. (If the internal content is a picture, the table width can be changed.)

2. The width and height settings in the tr tag and their functions: The width setting in the tr tag does not have any effect Function, because as can be seen from the first point, the width of the table cannot be changed, and the tr tag will of course not work. Therefore, it is only possible to discuss the height setting in tr. The height setting in tr is related to the settings between several tr. When several trs are set with specific height values, the height of each tr is allocated to the total height value in proportion to the set value. Note that the total height value is mentioned here. When several trs do not set a specific height value, the total height value is evenly distributed. When some TRs have specific values ​​set and some do not set specific values ​​as defaults, first ensure the basic needs of each TR, and then satisfy the rest of the TRs with specific values ​​set, and then all the TRs without specific values ​​set. tr. In the last case, we also need to consider that the total width is not enough for the total setting value of tr. If it is not enough, it must meet the basic needs of tr. The height of the table will be automatically extended here. Then consider tr with height set, and finally consider tr without height set.

3. The width and height settings in the td tag and their functions: The width and height in the td tag are all effective. Let’s look at the width of TD first. The width of a certain TD is related to the width of each TD in the column. The largest width is taken as the width of each TD in this column. This is what confuses us the most. Where, you must grasp the width of a certain TD from a global perspective. You cannot determine its width from the width setting of this one. This is inaccurate. Once we figure out the width of each column, things will be easier to handle. At this time, the width distribution between each TD is based on the height distribution rule of each tr in the second article. The one difference is that by default, the width of each TD is not distributed equally, but in proportion according to their actual content. distribute. Let's take a look at the height setting of td. This is relatively simple. However, the height of each td depends on the maximum height of the row where the td is located to determine the height of each td in this row. Then the height of each row is determined by tr. The height allocation principle is the same. Another thing to note is the relationship between the height of td and the height of tr. First of all, it must be based on the needs of the content. On this basis, it will be determined based on the set value. Whichever setting has a larger value will be used. If one has a set value and the other does not have a set value, then the set value will be used.

1, use the traditional method

 <table width="400"> 
<tr> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
</tr> 
<table>

2, use css

<style>
.td{width:100px;}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

The possible problem with the above two methods is that if the content exceeds the setting If the image width is greater than 100, it will naturally expand and automatically adjust the table width

3, use css to align

<style>
.td{width:100px;overflow:hidden}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

In this way, the excess part can be hidden If you need to strictly control, you can use this method. If you set the overflow attribute value to scroll or auto, you can use this method. If you set the overflow attribute value to scroll or auto, you can set the overflow attribute value to scroll or auto. Use the scroll bar when adjusting.

The above is a complete introduction to the three methods to solve the problem of table width and height alignment in HTML. If you want to know more about HTML tutorials, please pay attention to the PHP Chinese website.

The above is the detailed content of Three methods to solve table width and height alignment problems in HTML. For more information, please follow other related articles on the PHP Chinese website!