Setting the width and height of an HTML table cell

When doing Web pages, you often encounter the problem of the width of the table is not aligned. The details of the height and Width settings of table tabs in HTML are detailed, as summarized below:

1, table width and height settings and their role:the height set in table is actually set a minimum value, that is, when the contents of the table or the row height value exceeds this setting, the table height is automatically extended, When the table content or row height does not reach this value, it is automatically expanded to this value. The width value set in table is generally the maximum of the table width and cannot be changed, even if the internal content width exceeds it. (This internal content, if it is a picture, can change the width of the table.) ）

      the width and height settings in the  2, TR tags, and their effects: the width setting in the TR tag does not have any effect, As you can see from the 1th, the width of the table cannot be changed, and the TR tag will of course not work. Therefore, only the possibility of height setting is discussed in TR, and the height setting in TR is related to the setting between several tr. When several TR sets the specific value of height, the height of each TR is assigned the total height value in proportion to the set value, note that the total height value is said here. When several TR do not have a height specific value assigned, the average total height value is allocated. When some TR set a specific value, some do not set a specific value for the default, the first to ensure that the basic needs of each TR, the remaining to meet the specific value of the TR set, and then all to not set the specific value of tr. The final case should also consider the total width is not enough TR total setting value of the case, enough to meet the basic needs of TR, here will automatically extend the height of the table. Then consider setting the TR of the HEIGHTR, and finally consider the TR without setting the height.

       3, the width and height setting in the TD tag and its effect: the width and height of the TD tag are all working. First look at the width of TD, a TD width is and the width of each TD is related, take one of the largest width as the width of each TD in this column, this is to let us the most confusing place, must be from the global grasp of a TD width, It is not accurate to assert that the width of this one is as wide as it is. When we figure out the width of each column, it's a good idea. At this time the width of each TD distribution according to the height of each tr in the second rule, there is a difference is all the default case, the width of each TD is not evenly distributed, but according to their actual content proportional distribution. Look at the height setting of TD, this is relatively simple, but the height of each TD is to see the maximum height of the TD's Row to determine the row of each TD height, and then the heights of the individual rows and the principle of allocation of the height of TR is the same. Another thing to note is the relationship between the height of the TD and the height of the tr. First of all must be based on the needs of the content, on this basis, and then according to the set value to determine, which set the value of a large according to which, if a set value is not set value, then according to set the value of the calculation.

1, using the traditional method <table width= "> <tr> <td width=" "></td> <td width=" "></td> <TD width= "2" ></td> <td width= "" "" ></td> "</tr> <table>" Css<style> ", with the use of;. td{width:100px;} </style><table width= "> <tr> <td class=" TD "></td> <TD class=" TD "></td> <TD class= "TD" ></td> <TD class= "TD" ></td> </tr> <table> The above two methods may be the problem is that if the content exceeds the set , sheet width greater than 100, will naturally open, automatically adjust the table width 3, with 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> in this way, you can hide the excess, and if you need tight control, you can use this method, If you set the property value of overflow to scroll or auto, you can use the scroll bar to adjust when you are over ....

　　

Setting the width and height of an HTML table cell