TABLE Alignment

Properly aligning your tables on your pages only relates to an appearance issue and does not affect the use of the data in the tables.

Table alignment is handled in several ways in HTML. If you set up the page style in a CSS document, you can manage the alignment with the CSS elements. I won't get into the use of CSS in this tutorial, but will continue to mention where I use it to reduce redundant styles to save a lot of typing. Other ways to align your tables on your page are the use of the "align" attribute in the <table>, <tr>, <th> and <td> elements.

The "align" attribute has the same attribute values for all of the elements. It gives you options for aligning your tables, data text or images in the center or on the left or right in the page, table, row or cell. The following example will show some application of the alignments for your tables and data.  One thing to remember about the "align" attribute is that it will align EVERYTHING in the direction designated by the attribute value (left, right, center, justify).

Example 1 Aligning your tables and data

The alignment for the first table is defined in the <td> element box which contains the table.  It centers the table in the box.  Also, the table headers are centered in the data cells by the "align" attribute in the <td> element.  The second table is aligned to the left by the <td> element box which contains the table.  Notice that I changed the header text alignment in the <td> element header cells to demonstrate that you can align the text in a cell on the left, right or in the center.  The last table is aligned to the right in the <td> element box, not by the <td> box, but by adding the "align" attribute to the <table> element.  You can do it either way, but there may come a time when one does not work because the other is in control of alignment.  I also moved the header text to the left with the "align" attribute.