The text-align property specifies the horizontal text alignment, and the vertical-align property specifies the vertical alignment.
The text alignment in the cells can be specified by applying these properties to the TD or TH element.
td {
text-align: center;
vertical-align: top;
}
| Property | Value | Explanation |
|---|---|---|
| text-align (horizontal) |
left | aligns to the left |
| center | aligns to the center | |
| right | aligns to the right | |
| justify | justifies the text | |
| vertical-align (vertical) |
baseline | aligns to the baseline |
| top | aligns to the top | |
| middle | aligns to the middle | |
| bottom | aligns to the bottom |
The justify value adjust the spaces between the words to justify both left and right side. (However, the last line is not justified.)
About the baseline

The horizontal alignment
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; width: 100%; height: 150px; } td { border: 2px #2b2b2b solid; width: 25%; } #example1 { text-align: left; } #example2 { text-align: center; } #example3 { text-align: right; } </style> </head> <body> <table> <tr> <td>The default</td> <td id="example1">The left</td> <td id="example2">The center</td> <td id="example3">The right</td> </tr> </table> </body> </html>
| The default | The left | The center | The right |
The vertical alignment
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; width: 100%; height: 150px; } td { border: 2px #2b2b2b solid; width: 25%; } #example4 { vertical-align: top; } #example5 { vertical-align: middle; } #example6 { vertical-align: bottom; } </style> </head> <body> <table> <tr> <td>The default</td> <td id="example4">The top</td> <td id="example5">The middle</td> <td id="example6">The bottom</td> </tr> </table> </body> </html>
| The default | The top | The middle | The bottom |
Justifies the text
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; width: 100%; } td { border: 2px #2b2b2b solid; width: 50%; } #example7 { text-align: justify; } </style> </head> <body> <table> <tr> <td>This is example text ...</td> <td id="example7">This is example text ...</td> </tr> </table> </body> </html>
| This is example text. The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. | This is example text. The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. |
Aligned to the baseline (Comparison with the "top" value)
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; height: 100px; } td { border: 2px #2b2b2b solid; } #example8 td { vertical-align: baseline; } #example9 td { vertical-align: top; } </style> </head> <body> <table id="example8"> <tr> <td>abcdefg</td> <td>hijklmn</td> <td style="font-size: 250%;">opqrstu</td> <td>vwxyz</td> </tr> </table> <table id="example9"> <tr> <td>abcdefg</td> <td>hijklmn</td> <td style="font-size: 250%;">opqrstu</td> <td>vwxyz</td> </tr> </table> </body> </html>
| abcdefg | hijklmn | opqrstu | vwxyz |
| abcdefg | hijklmn | opqrstu | vwxyz |