Attribute: align
Table Alignment
Using the align attribute inside a table, will give you
better control over how the data is presented in your table.
|
You can use: align="center" align="right" (default is align="left") valign="top" valign="bottom" (default is valign="middle") |
Let's use a table with 2 rows, 3 cells in each.
|
<table cellpadding="0" cellspacing="0" border="1"> <tr> <td width="150" height="100">Cell 1</td> <td width="150" height="100">Cell 2</td> <td width="150" height="100">Cell 3</td> </tr> <tr> <td width="150" height="100">Cell 4</td> <td width="150" height="100">Cell 5</td> <td width="150" height="100">Cell 6</td> </tr></table> |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Notice that since I am using no align or valign attribute,
the items in each cell align to the left and
in the middle vertically, by default.
To change how the items line up in the cells,
we can add a tag to each table row,
like this: (added part is in red)
|
<table cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="150" height="100">Cell 1</td> <td width="150" height="100">Cell 2</td> <td width="150" height="100">Cell 3</td> </tr> <tr align="right"> <td width="150" height="100">Cell 4</td> <td width="150" height="100">Cell 5</td> <td width="150" height="100">Cell 6</td> </tr> </table> |
which will look like this:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
You can alternately use any of the ones listed
at the top of this page.
Using the align attribute in a table row tag
will align every table data cell in that row.
You can also choose to just align
a certain data cell inside a row,
instead of the whole row.
To do that, you would add the attribute
to that specific table data cell, rather than the table row.
like this: (note: you can combine 2 attributes in one cell)
|
<table cellpadding="0" cellspacing="0" border="1"> <tr> <td align="center" width="150" height="100">cell 1</td> <td valign="red" width="150" height="100">cell 2</td> <td valign="bottom" width="150" height="100">cell 3</td> </tr> <tr> <td align="right" width="150" height="100">cell 4</td> <td valign="top" align="right" width="150" height="100"> cell 5</td> <td valign="bottom" align="center" width="150" height="100"> cell 6</td> </tr> </table> |
to produce this:
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
