View video tutorial
CSS Tables Alignment
CSS
CSS table alignment positions the entire table horizontally, as well as aligning the content within individual table cells horizontally and vertically.
CSS Table alignment.
➔ The margin property positions the entire table horizontally.
table {
margin-left: auto;
margin-right: auto;
width: 80%; /* Set a width lower than 100% */
}
➔ The the text-align and vertical-align properties position the content within the table cells.
td, th {
text-align: center;
}
Syntax
table { margin-left: auto; margin-right: auto; width: 80%; }
td, th { text-align: center; }
CSS text-align property (horizontally)
| Value | Description |
|---|---|
| left | Aligns the text to the left. |
| right | Aligns the text to the right. |
| center | Centers the text in the cell. |
| justify | Stretches lines to equal width. |
/* Left-align content in the First column */
table td:nth-child(1), table th:nth-child(1) {
text-align: left;
}
/* Right-align content in the second column */
table td:nth-child(2), table th:nth-child(2) {
text-align: right;
}
CSS text-align property (vertically)
| Value | Description |
|---|---|
| top | Aligns the content with the top of the cell. |
| middle | Places the content in the middle of the cell. This is the default. |
| bottom | Aligns the content with the bottom of the cell. |
| baseline | Aligns the element's baseline with the parent's baseline. |
td {
vertical-align: bottom;
height: 40px; /* Give the cells enough height so that the effect is visible. */
}
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table alignment Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width: 80%;
margin-right: auto;
margin-left: auto;
font-size: 10pt;
table-layout: fixed;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 2px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
td {
vertical-align: bottom;
height: 40px;
}
table th:nth-child(1),
table td:nth-child(1) {
text-align: right;
}
table th:nth-child(3),
table td:nth-child(3) {
text-align: right;
}
</style>
</head>
<body>
<h3>CSS Table alignment Example</h3>
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>David</td>
<td>Jones</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>George</td>
<td>Taylor</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Arthur</td>
<td>Brown</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Harry</td>
<td>Wilson</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Emily</td>
<td>Taylor</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Sarah</td>
<td>Johnson</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Daisy</td>
<td>Jones</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Olivia</td>
<td>Williams</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Sophie</td>
<td>Brown</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.