Left-aligning Tables with CSS

Question

I would like to left-align a table with CSS, in a way similar to align=left in standard HTML, but I understand that this is bad form. Is there any way to do this? If not, is there a way to format a left-aligned list of links that is next to content without using tables?

Answer 1

You can use an unordered list for the links, put it in a div and float the div left. With a proper left margin for the contents, the list of links will float nicely next to the contents.

By the way, a table is normally aligned left to begin with, but if you want to position it left of you contents, you can also float the table left.

Answer 2

For simplicity, take the stuff out of the style tags and use CSS classes instead:

<ul style="text-align: left; float: left;">
    <li><a href="#">Your link here!</a></li>
</ul>

Simple. With the list displayed, you'll need to give the <ul>'s containing element the style of overflow: auto; to remove the float for the next element that appears below it.

Following on from jeroen said, yes, a table should be left aligned by default unless you've set dir="rtl" somewhere in your DOM. And in that case, unless you're being creative or you're writing Hebrew, there's no reason for it to be there ;)

Answer 3

As Jason commented, everything is aligned left by default in HTML. If your table's contents aren't left aligned you must either have changed their alignment somehow, or you are seeing the side effect of some padding or something. To "fix" such a table, try CSS along the lines of:

<style>
TABLE, TBODY, TR, TD, TH {
  text-align:left;
  padding:0;
  border-spacing:0; /* or border-collapse:collapse */
}
</style>

Answer 4

Great answers. I need some work on my CSS so this really helps out. Thanks a lot.