How to position an HTML table with CSS

When it comes to positioning tables, HTML can be a bit misleading, if not confusing.  For one thing, one would think that adding the align=center tag to a table would cause the table to render int he center of the parent element.  Wrong…think again. Another common attempt at aligning a table is to put it into it’s own paragraph element and aligning the paragraph with the align=center parameter.  Again, wrong…doesn’t work.  How frustrating.

So, for those of us searching for the quick and easy method of aligning a table, look no further… All you have to do is set a CSS style override within the table tag as follows:

  • To indent the table 60 pixels:
    • from the left border of the parent element
      • style=”padding-left: 60px;”
    • from the right border of the parent element
      • style=”padding-right: 60px;”
    • from the top border of the parent element
      • style=”padding-top: 60px;”
    • from the bottom border of the parent element
      • style=”padding-bottom: 60px;”

Leave a Reply