About Lesson
Table Cell Alignment (vertical-align for table cells):
Definition:
Table cell alignment using the vertical-align property is a CSS technique used to control the vertical alignment of content within individual cells of an HTML table. This property is applied to the content within a <td> (table cell) or <th> (table header) element.
Syntax:
HTML
td, th {
vertical-align: value;
}- The
vertical-alignproperty is applied to table cells (td) and table headers (th). - The
valuecan be one of the following:baseline,top,middle,bottom,text-top,text-bottom, or a length value.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 300px;
border-collapse: collapse;
margin: auto;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
<title>Table Cell Alignment Example</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>Output:
