When making web pages, we often encounter the problem of misaligned table widths. I have looked at the details of the height and width settings of the table tag in HTML in detail, and now I summarize it as follows:
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 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 has no effect, because as can be seen from the first point, the width of the table cannot be changed, and the tr tag will of course have no effect. 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 this is the total height value. When several trs do not set a specific height value, the total height value is evenly distributed. When some TRs are set with specific values and some are not set with specific values as defaults, first ensure the basic needs of each TR, and then the rest will meet the TRs with specific values set, and then all the TRs without specific values will be set. tr. In the last case, we 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 and their functions in the td tag : The width and height in the td tag are both 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 among them 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 the height of 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 set value is larger 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 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 possible 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 naturally expand 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>Using this method, you can hide the excess part. If you need strict 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 use this method. If you set the overflow attribute value to scroll or auto, you can use this method. If set to scroll or auto, you can use the scroll bar to adjust when it exceeds...
SummarizeThe above is the method for setting the width and height of HTML table cells that the editor introduces to you. I hope it will be helpful to you. 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 your support of the VeVb martial arts website!