CODEWITHSUNDEEP
htmlcssalignment
void
void

Reputation: 1896

html - align table column right

I have a header for my website (see in the picture)buttons of the header

which are basically <td><a href>'s styled with css. now my question is what do I do if want to add one or more buttons in the same row but align them to the right?

It does not have to be a css solution, I'm looking for a way to do this in html's <table> or <td> tags.

Thanks.

Edit: This is the part of php that generates the header:

echo<<<TOPBARHEREDOC2
<link rel="stylesheet" href="/css/horizontal_navbar.css" type="text/css" media="screen">
<table border="auto"  id="topbar" >        
    <td><a class="topbarlink" href="index.php">Ana Sayfa</a></td>
    <td><a class="topbarlink" href="userstats.php?category=$category">İstatistik</a></td>
    <td><a class="topbarlink" href="contact.php">İletişim</a></td>
    <td><a class="topbarlink" href="useful_links.php">Linkler</a></td>
    <td><a class="topbarlink" href=$lastlink_address>$lastlink_name</a></td>
</table>
<hr>
<br>
TOPBARHEREDOC2;

and this is the css:

table a.topbarlink{
/*TOP, RIGHT, BOTTOM, & LEFT*/
margin:0px 0px 0px 0px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-weight:bold;
color:#069;
background-color: #f2f2f2;
text-decoration: none;    
    border-bottom: 2px solid #ccc; 
    border-top: 2px #ccc;
    border-right: 2px solid #ccc;
    border-left: 2px #ccc;
    /*padding (ordered)*/
    padding-top:0.2em;
    padding-right: 1em;
    padding-bottom:0.2em;
    padding-left: 1em;

}

Upvotes: 0

Views: 6290

Answers (2)

Jasper de Vries
Jasper de Vries

Reputation: 20188

First of all, you really shouldn't use tables for anything other than tabular data. Semantic markup is always better, so in your case it would be better to use an unnumbered list for your menu.

Anyhow, let's say this is your table:

<table>
  <tr>
    <th><a href="#">Item 1</a></th>
    <th><a href="#">Item 2</a></th>
    <th><a href="#">Item 3</a></th>
    <th class="right"><a href="#">Item 4</a></th>
  </tr>
</table>

Then you can use this CSS to align one item to the right:

table { width: 100%; }
th { float: left; }
th.right { float: right; }​

http://fiddle.jshell.net/6z97w/

Upvotes: 3

Henrik Janbell
Henrik Janbell

Reputation: 1922

Is this what you're looking for? http://jsfiddle.net/henrikandersson/aayxV/

Upvotes: 1

Related Questions