CODEWITHSUNDEEP
htmlcss
tom
tom

Reputation: 507

Left-aligning Tables with CSS

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?

Upvotes: 14

Views: 43510

Answers (5)

user1359
user1359

Reputation: 11

use margin:auto 0
it's like a miracle

Upvotes: 1

Surfer
Surfer

Reputation: 131

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.

Upvotes: 13

machineghost
machineghost

Reputation: 35750

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>

Upvotes: 2

Will Morgan
Will Morgan

Reputation: 4490

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 ;)

Upvotes: 11

jeroen
jeroen

Reputation: 91734

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.

Upvotes: 2

Related Questions