Use CSS to design HTML table fields to align text on top

 Using CSS to design HTML table fields to align the text on top is very simple. You can use the built-in vertical-align property of CSS to control. The parameter values ​​of the vertical-align property, text-top and top, can be used to set the elements in the container to go up. Alignment, but it must be noted that CSS vertical-align must be used in a single table column (td) to have an effect. The effect of CSS vertical-align top is equivalent to the effect of valign top of traditional HTML Table. The table text is aligned vertically upwards.

For the detailed syntax of the vertical-align property, please refer to the introduction in " CSS vertical-align property ".

Use CSS to design HTML table column text top alignment example

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

The actual effect of the example

Top align text in this column

Top align text in this column

The text in this column is not aligned

The table in the example has a total of three fields (<td>) to show the vertical alignment of the text. The first field (that is, the leftmost field) uses the CSS vertical-align property to make the field the text is aligned on the vertical edge of the column, the middle column is used in the conventional HTML of valign treated, the effect is the same, but a new generation of web design has been almost using CSS 's vertical-align treated against the vertically aligned The effect is also supported by most mainstream browsers. It is recommended to use CSS as the main design axis. The third field does not set any vertical alignment effect, so the text is centered, which is also the default value of most browsers.

In order to clearly show that the setting of valign in the beginning <table> is invalid, we also do it once in the example. The third field does not produce the effect of vertical upper alignment. In other words, valign is also the same as the vertical-align property of CSS , Must be written directly in the <td> tag of the table field to have an effect. 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 below.