Positioning Content Within CSS Tables

Most of the time you can position your content within your CSS table cells exactly the same way you would position any other content within your web page but there are also a few extra CSS commands available that can be used with HTML or CSS tables but which cannot be applied otherwise (they can apply to HTML tables becasue the HTML tables display types in the CSS default to the corresponding CSS table values).

In the majority of cases simply setting the padding for your cell will determine how much space to leave around the content and text-align will determine the alignment of your text.

An option that is not available to non-table elements unless you specify a height is to be able to control vertical alignment using vertical-align. Table cells have their height defined automatically in that all of the cells in a row have the same height and so you can control the vertical alignment of the text in your table cells using vertical-align regardless of whether there is a height defined anywhere or not. Note that vertical-align still works for non-table cells that don't have a height defined but since in that case the height is determined by the space required to hold the content the content ends up top, middle, and bottom aligned all at the same time in that situation. With a table cell the vertical alignment will make an observable difference when the cell height is forced to be greater than that required to hold the text due to what is contained in an adjacent cell.

You can place more than just text into a CSS table cell. You can in fact treat the cell in exactly the same way that you would treat an entire web page that isn't using a CSS table and lay out content within the cell the same way you'd lay out a web page. So to have an image in your cell with text wrapping around it you would float the image to one or other side of the cell.

Using absolute positioning to place elements one on top of the other within your cell is also possible and works the same way as it would if the table were not there.

Since all of these alternative options for page layout are as available within thable cells as they are where CSS tables are not used, it is not necessary that you build your entire page layout using CSS tables. Doing that is not really achieving much better than you would have if you used HTML tables. Sure you will have removed the tables from the HTML but you will still be faced with all of the limitations that a grid layout has compared to the infinitely greater number of alternate ways to lay out a web page.

By all means use CSS tables to establish a basic grid of rows and/or columns for your page but consider all of the rest of the possible CSS commands in deciding how to place your content within the grid. CSS tables are just one small part of what is available for positioning content with CSs and has the specific purpose of forcing adjacent elements to be the same height or width.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow