Use CSS to design HTML table column to align the text at the bottom

 Use CSS to design the bottom-alignment technique of the text in the HTML table field, which is the same as the technique used in the previous article " Text-top alignment in the HTML table field ". Both use the built-in vertical-align property of CSS . Control, the parameter value bottom of the vertical-align attribute can be used to set the downward alignment of the elements in the table field. Whether it is to align the text in the table field up or down, it is indispensable for organizing web pages. The effect of CSS vertical-align bottom is equivalent to the effect of traditional HTML Table's valign bottom, which can align the text in the field vertically downwards. The new generation of browsers support vertical-align bottom is quite common. Use CSS to design HTML table column text alignment example

<table border="1" style="width:500px;height:100px; vertical-align:bottom; " valign="bottom" >
<tr>
    <td style="vertical-align:bottom;" >This column text Align bottom </td>
    <td valign="bottom" >The text in this column is aligned bottom </td>
    <td>The text in this column is not aligned</td>
</tr>
</table>

The actual effect of the example

Align the text in this column below

Align the text in this column below

The text in this column is not aligned

The example has three table fields in total. We first use the CSS syntax of "style="vertical-align:bottom;"" in the <td> tag at the beginning of the first table field to declare the text in the table field. Align vertically to the bottom, the second field uses the traditional HTML valign="bottom" to declare the same effect. Indeed, the performance results of both are the same, but the vertical-align property of CSS is already a future web page The mainstream design, please try to use vertical-align instead of valign to design. The third field to show is that the text in the table field is not affected by the vertical-align and valign in the <table> tag at the beginning of the table . This also means that the functions of these two attributes must be They are only effective if they are written directly in the <td> tag of the table column. This is something that many web designers often ignore. There are many design techniques for web forms, please refer to the topic description of " HTML Table ". ➤Extended reading: Use CSS to design HTML table fields to align the text on the top.