Definition:
CSS vertical alignment is defined by text-align property with top, middle and bottom values.
By default, table header <th> and table data <td> contents are defined in middle.
Syntax:
vertical-align: top | middle | Bottom
Default Vertical Alignment Source Code:
This is the default vertical alignment property where the vertical-align property is not used. See the example below:
!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px dotted red;
}
th, td {
padding: 8px;
}
th {
background-color: darkmagenta;
color: white;
}
tr:nth-child(even){
background-color: cornsilk
}
</style>
</head>
<body>
<h3>Example of CSS Table Default Horizontal Alignment</h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
<tr>
<td>3.</td>
<td>David</td>
<td>Warner</td>
<td>Sports</td>
</tr>
</table>
</body>
</html>
Output:
Top Vertical Alignment Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px dotted red;
}
th, td {
padding: 8px;
}
th {
background-color: darkmagenta;
color: white;
}
tr:nth-child(even){
background-color: cornsilk
}
td {
height: 30px;
vertical-align: top;
}
</style>
</head>
<body>
<h3>Example of CSS Table Default Vertical Alignment</h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
<tr>
<td>3.</td>
<td>David</td>
<td>Warner</td>
<td>Sports</td>
</tr>
</table>
</body>
</html>
Output:
Middle Vertical Alignment Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px dotted red;
}
th, td {
padding: 8px;
}
th {
background-color: darkmagenta;
color: white;
}
tr:nth-child(even){
background-color: cornsilk
}
td {
height: 30px;
vertical-align: middle;
}
</style>
</head>
<body>
<h3>Example of CSS Table Default Vertical Alignment</h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
<tr>
<td>3.</td>
<td>David</td>
<td>Warner</td>
<td>Sports</td>
</tr>
</table>
</body>
</html>
Output:
Bottom Vertical Alignment Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px dotted red;
}
th, td {
padding: 8px;
}
th {
background-color: darkmagenta;
color: white;
}
tr:nth-child(even){
background-color: cornsilk
}
td {
height: 30px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h3>Example of CSS Table Default Vertical Alignment</h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
<tr>
<td>3.</td>
<td>David</td>
<td>Warner</td>
<td>Sports</td>
</tr>
</table>
</body>
</html>
Output:
You may be interested in the following topics: