Line height of text in HTML TABLE

 HTML Table can be used to fill in a lot of text content. It is a very traditional planning method in web design and content layout. However, the height of the text in the HTML table often causes visual discomfort without beautification. In order to provide better reading comfort, web designers can adjust the line height of the text in the HTML Table through the line-height property of CSS . The technique is very simple. We will teach you how to use the line-height property and Apply to the application example of adjusting the text line height in the table. Basic syntax of CSS line-height property

line-height: line height setting value;

The line height setting value can use the default normal, number plus unit, percentage or inherit (inherited from the line height value of the parent layer), etc. For the detailed setting method, please refer to the introduction of our " CSS line-height " article, and then we Just try to apply it to HTML Table to see the effect!

Use CSS line-height to design an example of text line height in HTML TABLE

<table style=" line-height:25px; "border=1>
<tr><td>This is the first line of the field content<br>This is the second line of the field content</td><td> This is the first line of the field content<br>This is the second line of the field content</td></tr>
<tr><td>This is the first line of the field content<br>This is the column The second line of the bit content</td><td>This is the first line of the field content<br>This is the second line of the field content</td></tr>
</table><br>
< table style=" line-height:40px; "border=1>
<tr><td>This is the first line of the field content<br>This is the second line of the field content</td><td>This Is the first line of the field content<br>this is the second line of the field content</td></tr>
<tr><td>this is the first line of the field content<br>this is the field The second line of the content</td><td>This is the first line of the field content<br>This is the second line of the field content</td></tr>
</table>

Effect of the example

This is the first line of the field content This is the second line of the field content	This is the first line of the field content This is the second line of the field content
This is the first line of the field content This is the second line of the field content	This is the first line of the field content This is the second line of the field content

This is the first line of the field content This is the second line of the field content	This is the first line of the field content This is the second line of the field content
This is the first line of the field content This is the second line of the field content	This is the first line of the field content This is the second line of the field content

We prepared two similar HTML Table tables in the example. The only difference is that the row height of the first table is set to 25px, and the row height of the second table is set to 40px. It is obvious that the content of the two tables The visual effect of the difference, the line height can be changed by adjusting the number. This is the technique of using the line-height property of CSS to adjust the line height of the text in the HTML Table. Is it very simple?