HTML table alignment, width, height
Note. These pages have not been upgraded from HTML to XHTML
View source to see the code
Alignment
To have more than one line in a cell, use <BR>. You can align single cells or whole rows to the right, left or centre using align=LEFT|RIGHT|CENTER, and to the top, middle or bottom using Valign=TOP|BOTTOM|MIDDLE. You can add a caption to the top or bottom of a table using caption=TOP|BOTTOM.
| Head1 | Head2 | Head3 |
|---|---|---|
| 1. This is an example | 2. Of multiple lines | 3. In a cell. There is a break here to force a second line. |
| 4. All of | 5. this row | 6. is centre-aligned. |
| 7. This cell is right-aligned. | 8. This cell is left-aligned. | 9. This is the default alignment. |
| 10. Top. | 11. Bottom. | 12. Default (<br />) alignment. |
You can align a table on a page using <CENTER> and </CENTER>.
| Width=50% | Width=50% |
| I | J |
Table and Cell Width
Percentage Width
You can specify the percentage of the width of the screen that a table will take up using the WIDTH attribute. For example:
| Width=50% | Width=50% |
| A | B |
| Width=75% | Width=75% |
| C | D |
| Width=100% | Width=100% |
| E | F |
The width of the data item in a cell can affect the cell size, however:
| The width of the data item in a cell can affect the cell size, however. | Width=100% |
| G | H |
You can use table width in nested tables:
| Outer 1 - 75% | Outer 2 | ||
|
Outer 3 |
If you specify the width of a table as a percentage, then the table will fill that percentage of the screen's width, and the user will not need to scroll. Use percentage if:
- users may not size their browsers wide enough
Fixed width
You can also specify a fixed width for a table. If you specify the width of a table as a fixed number of pixels, the table should remain its width however the users resize their browser window. If they resize their window so that it is narrower than the table, however, they will need to scroll across to see it all. Used fixed width if:
- you want a standard parameter for your site
- you want to arrange some small graphics precisely.
| The width of this table is: | 500 pixels |
| K | L |
Do not specify a table of width greater than 800 pixels if you don't want your users to have to scroll to see it all.
If you do not specify a table's width, the browser will use its own algorithm to select a width.
However you specify a table's width, each table has a minimum size, catering for the length of the longest single word or widest image in each cell.
Neither the size of the user's monitor nor its screen resolution has much effect on how tables display.
Examples of Web tables with varying widths can be found at The HTML Station.
Height
| HEIGHT=10% | Item 2 |
| 3 | 4 |
| HEIGHT=20% | Item 2 |
| 3 | 4 |
Note: In earlier versions, it was possible for the sum of the elements within a table cell to exceed the width specified in its tag, but in the latest version of Netscape Communicator, which has now accepted the World Wide Web Consortium's HTML standards, the elements will become misaligned.