There are two ways we can align the texts in the table.
Let us see them in detail.
CSS provides a text-align property with which we can Horizontally align the texts in the table.
<html>
<head>
<style>
table, th, td {
border: 2px solid red
}
table {
border-collapse: collapse;
width: 50%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, if we look at the above table, its contents are aligned to center. That is because we have used the text-align property and set its value to center.
td {
text-align: center;
}Now, an important point to note is, we haven't used the text-align property for text header(i.e. <th>). Still its contents are aligned to center. That is because for <th> the default horizontal text alignment is center.
Other than center, the text-align property can have the values left and right.
CSS provides a vertical-align property with which we can Vertically align the texts in the table.
<html>
<head>
<style>
table, th, td {
border: 2px solid red
}
table {
border-collapse: collapse;
width: 50%;
}
td {
vertical-align: bottom;
height: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, in the above example, we have used the vertical-align property to vertically align the text for the <td> elements to bottom.
td {
vertical-align: bottom;
height: 100px;
}Other than the value bottom, the vertical-align property can have values top and center.