How to Center or Float an HTML Table

How to Center or Float an HTML Table

People are often perplexed that text-align:center doesn’t center a table as whole. Instead, it centers text inside each cell. If you want to center the whole table, you have to set its left and right margins to auto, which means “automatically calculate so they’re equal.” You can set the top and bottom margins to any value you want.

Let’s look at an example. Say you want the top and bottom margins to be one blank line (1em). The CSS code in the <table> tag is simply:

<table style=”margin:1em auto;”>

And the rest of the table is business as usual.

If you want to wrap text next to a table, use float instead. Use float:left to float the table to the left of subsequent text. To put a little space between the table and the text, you can also put a right margin on the table, like this:

<table style=”float:left; margin-right:10px;”>

If you want the table to be to the right of the neighboring text, use float:right instead. You can also set the left margin:

<table style=”float:right; margin-left:10px;”>

Here’s something to remember: Make sure you put the text that should be next to the table after the closing <//table> tag for the table. Floats float next to subsequent content in the code, not content that precedes the float.