How to Align HTML Tables to the Right of Text
HTML 4.01 offers a way to align a table to the left, center or right of the page by using a block-level tag called the <div></div> tag.
Other People Are Reading
Things You'll Need
- Text editor like Source Edit Document uploading software like FileZilla Space on a server
Instructions
-
-
1
Create your table, using the beginning and ending <table></table> tags within the <body></body> tags of your HTML document with at least one row and one column, as shown:
<table>
<tr>
<td></td>
</tr>
</table> -
2
Add the border attribute to the table tag, setting it equal to 1, and a sentence between the <td></td> tags as shown:
<table border="1">
<tr>
<td>My Table</td>
</tr>
</table>
The border attribute creates a border around the text located within the table, to allow you to see the table. -
-
3
Enclose the table with a <div></div> tag, as shown:
<div>
<table border="1">
<tr>
<td>My Table</td>
</tr>
</table>
</div>
The <div></div> tags are a block-level element within HTML, meaning that the tags create two breaking lines above and below their tags, which is the equivalent of hitting the 'Enter' key twice, both before the beginning <div> tag, and after the end </div> tag. -
4
Add the attribute 'align' and set it equal to 'right' to the beginning <div> tag 'as shown:
<div align="right">
Save and upload the document to your server. -
5
Open your browser, find the page on your server, and the table will be aligned all the way to the right of the page.
-
1
Tips & Warnings
The modern way of completing this exercise is to place the instructions in a style sheet. --Add a class attribute to the beginning <div> tag called 'rightalign' as shown: ---<div class="rightalign"> --In the header of the document, between the <head></head> tags, type the <style></style> tags. --Type the following between the <style></style> tags: ---div.rightalign {position: absolute; right: 0px;} --The positioning attribute allows you to move the table so it is in the precise position that you want, in pixels or inches from the left, right or top.
