How to set the width and height of html table cells

When making web pages, you often encounter the problem of misaligned table widths. After looking at the details of the height and width settings of the table tag in HTML, the following is a summary:

1. The width and height settings in the table and their functions : The height set in the table actually sets a minimum value. That is, when the total value of the content or row height in the table 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 width of the table and cannot be changed, even if the width of the internal content exceeds it. (If the internal content is a picture, the width of the table can be changed.)

2. The width and height settings in the tr tag and their functions : The width setting in the tr tag has no effect, because as can be seen from the first point, the width of the table cannot be changed, so the tr tag certainly has no effect. Therefore, we can only discuss the possibility of height setting in tr, and the height setting in tr is related to the settings between several trs. When several tr's have specific height values ​​set, the height of each tr is distributed according to the proportion of the set value to distribute the total height value. Note that this is the total height value. When no specific height value is set for several tr elements, the total height value is evenly distributed. When some tr's are set with specific values ​​and some are not set with specific values ​​as default, first ensure the basic needs of each tr, and then satisfy the remaining tr's that have been set with specific values, and then all are given to the tr's that have not been set with specific values. The last case also needs to consider the situation where the total width is not enough for the total setting value of tr. If it is not enough, the basic needs of tr must be met, and the height of the table will be automatically extended here. Then consider the tr with heightr set, and finally consider the 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 both effective. Let's look at the width of td first. The width of a td is related to the width of every td in the column it is in. The largest width is taken as the width of each td in this column. This is the most confusing part for us. We must grasp the width of a td from a global perspective. We cannot assert its width based on the width setting of this one. This is inaccurate. Once we figure out the width of each column, things will be easy. At this time, the width distribution between each td follows the height distribution rule of each tr in the second article. One difference is that in the default case, the width of each td is not evenly distributed, but proportionally distributed according to their actual content. 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 the same as the height allocation principle in tr. 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 is determined according to the set value. The one with the larger set value is followed. If one has a set value and the other has not, then the set value is used.

1. Use traditional methods

<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 problem with the above two methods is that if the content exceeds the setting, such as the image width is greater than 100, it will expand naturally and automatically adjust the table width.

3. Use CSS

<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>

This method can be used to hide the part that exceeds the limit. If strict control is required, this method can be used. If the overflow attribute value is set to scroll or auto, this method can be used. If the overflow attribute value is set to scroll or auto, the scroll bar can be used to adjust the part when it exceeds the limit....

Summarize

The above is the method of setting the width and height of HTML table cells introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!