HTML and CSS Reference
In-Depth Information
You can override the row alignment for individual cells by adding
align
to the
<td>
or
<th>
elements:
<tr align=“center” valign=“top”>
<td>
14
</td>
<td>
16
</td>
<td align=left>
No Data
</td>
<td>
15
</td>
</tr>
The following input and output example shows the various cell alignments and how they
look (see Figure 10.20). I've added a style sheet that sets the cell heights to 100 pixels to
make the vertical alignments easier to see:
Input
▼
10
<!DOCTYPE html>
<html>
<head>
<title>
Cell Alignments
</title>
<style type=”text/css”>
td { height: 100px; }
</style>
</head>
<body>
<table border=”1” cellpadding=”8” width=”100%”>
<tr>
<th><br /></th>
<th>
Left
</th>
<th>
Centered
</th>
<th>
Right
</th>
</tr>
<tr>
<th>
Top
</th>
<td align=”left” valign=”top”><img src=”star.png” alt=”” /></td>
<td align=”center” valign=”top”><img src=”star.png” alt=”” /></td>
<td align=”top” valign=”top”><img src=”star.png” alt=”” /></td>
</tr>
<tr>
<th>
Centered
</th>
<td align=”left” valign=”middle”><img src=”star.png” alt=”” /></td>
<td align=”center” valign=”middle”><img src=”star.png” alt=”” /></td>
<td align=”right” valign=”middle”><img src=”star.png” alt=”” /></td>
</tr>
