worldofitech
In this article, you will learn-
CSS Table Alignment
Horizontal Alignment
CSS Table Alignment: The text-align property sets the horizontal alignment (like left, right, or center) of the substance in <th> or <td>.
By default, the substance of <th> elements are center-aligned and the substance of <td> elements are left-aligned.
To center-align the substance of <td> elements also, use text-align : center:
The text-align Property
This property sets the horizontal alignment (like left, right, or center) of the content in th or td.
| Firstname | Lastname | Savings |
|---|---|---|
| Sohail | Khan | $100 |
| Haroon | Khan | $150 |
| Asad | Khan | $300 |
| Jawad | Khan | $250 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Sohail</td>
<td>Khan</td>
<td>$100</td>
</tr>
<tr>
<td>Haroon</td>
<td>Khan</td>
<td>$150</td>
</tr>
<tr>
<td>Asad</td>
<td>Khan</td>
<td>$300</td>
</tr>
<tr>
<td>Jawad</td>
<td>Khan</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
To left-align the substance, force the alignment of <th> elements to be left-aligned, with the text-align: left property:
The text-align Property
This property sets the horizontal alignment (like left, right, or center) of the content in th or td.
| Firstname | Lastname | Savings |
|---|---|---|
| Sohail | Khan | $100 |
| Haroon | Khan | $150 |
| Asad | Khan | $300 |
| Jawad | Khan | $250 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Sohail</td>
<td>Khan</td>
<td>$100</td>
</tr>
<tr>
<td>Haroon</td>
<td>Khan</td>
<td>$150</td>
</tr>
<tr>
<td>Asad</td>
<td>Khan</td>
<td>$300</td>
</tr>
<tr>
<td>Jawad</td>
<td>Khan</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the substance in <th> or <td>.
By default, the vertical alignment of the substance in a table is middle (for both <th> and <td> elements)
The accompanying example sets the vertical text alignment to bottom for <td> elements:
The vertical-align Property
This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.
| Firstname | Lastname | Savings |
|---|---|---|
| Sohail | Khan | $100 |
| Haroon | Khan | $150 |
| Asad | Khan | $300 |
| Jawad | Khan | $250 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Sohail</td>
<td>Khan</td>
<td>$100</td>
</tr>
<tr>
<td>Haroon</td>
<td>Khan</td>
<td>$150</td>
</tr>
<tr>
<td>Asad</td>
<td>Khan</td>
<td>$300</td>
</tr>
<tr>
<td>Jawad</td>
<td>Khan</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
