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

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 2

Answering "how do I align the text inside the table?", not about divs or how to float them.

Here is how to make a table appear on the left of the page without using the deprecated align attribute:

<table style="margin-right:auto;margin-left:0px">

Be sure to specify a width less than the table's container yet large enough for your needs.

Answer 3

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.