back next

Cell Alignment


When you have your rows and cells in place inside your table, you can align the data within each cell for the best effect based on what your table contains. HTML tables give you several options for aligning the data within your cells both horizontal and vertical.


Horizontal Alignment
The align attribute defines whether the data within a cell is aligned with the left cell margin (left), the right cell margin (right), or centered within the two (center).


Vertical Alignment
The valign attribute defines the vertical alignment of the data within the cell, meaning whether the data is flush with the top of the cell (top), flush with the bottom of the cell (bottom), or vertically centered within the cell (middle).


By default, heading cells are centered both horizontally and vertically, and data cells are centered vertically but aligned flush left.


Example
<html>
<head>
<title> HTML Tutor </title><head>
<body>
<center>
<table border=2>
<tr align=left>
<td>Horizontal Alignment</th>
<td>Left</td>
<tr align=center>
<td>Horizontal Alignment</td>
<td>Center</td>
</tr>
<tr align=right>
<td>Horizontal Alignment</td>
<td>Right</td>
</tr>
<tr valign=top>
<td>Vertical Alignment</td>
<td>Top</td>
</tr>
<tr valign=middle>
<td>Vertical Alignment</td>
<td>Middle</td>
</tr>
<tr valign=bottom>
<td>Vertical Alignment</td>
<td>Bottom</td>
</tr>
</table> </body>
</html>


Output
result




Back to HTML tutor homepage | Back | Next | Email me