Aligning Table Contents

3 replies
  • WEB DESIGN
  • |
Hi Everyone,

I'm trying to create a table so it reads the text "Read full review" (aligned left) and "Click to buy" (aligned right) show on the same vertical row.

However I can't seem to align it so theres a space between the two texts, I've tried a bunch of different things to no avail.

Any tips?

The table so far is:

HTML Code:
<table style="border: 0px solid #0000FF" bgcolor=#F8F8F8>
<tr><td><a href="http://www.mylink.com"><span style="font-size:16px;">Read Full Review</td>
<td><a href="http://www.mylink.com/2"><span style="font-size:16px;">Click To Buy</span></a> () 
</td>
</tr>
</table>

Many thanks,

Sam
#aligning #contents #table
  • Profile picture of the author Karen Barr
    By default, in HTML tables shrink to the exact size of the text unless you over-ride this behaviour.

    You can use "Cellpadding" or "cellspacing" to add a margin inside or outside the cells.

    You also haven't set the width of your table - if you want it to stretch across the whole page or section, add a width declaration.

    Try this code in the first line:
    HTML Code:
    <table style="border: 0px solid #0000FF" bgcolor=#F8F8F8 width="100%" cellspacing="20">
    You can then set the individual text to align left or right if you choose.
    {{ DiscussionBoard.errors[3995512].message }}
    • Profile picture of the author 4under
      Or if you don't need it to span 100% across the page, you could simply replace 100% (Karen's suggestion) with number of pixels you need...

      Example:
      Code:
      <table width="500">
      <tr>
      <td><a href="http://www.mylink.com"><span style="font-size:16px;">Read Full Review</td>
      <td><a href="http://www.mylink.com/2"><span style="font-size:16px;">Click To Buy</span></a> () 
      </td>
      </tr>
      </table>
      {{ DiscussionBoard.errors[3996307].message }}
  • Profile picture of the author Apollo-Articles
    Thanks guys!

    It worked!

    Now how do I align the individual text so "Read Full Review" is left aligned and "Click To Buy" is aligned to the right side of the table?

    Many thanks in advance

    Sam

    P.S. I <3 Tables!

    P.P.S

    I figured it out! The html code I used was:

    HTML Code:
    <table style="border: 0px solid #0000FF" bgcolor=#F8F8F8 width="95%" cellspacing="1">
    <tr><td><div id="left_side" style="float:left"><a href="http://www.mylink.com"><span style="font-size:16px;">Read Full Review</span></td>
    <td><div id="right_side" style="float:right"><a href="http://www.mylink.com/2"><span style="font-size:16px;">Click To Buy</span></a> ($212 Discount Link) </div>
    </td>
    </tr>
    </table>
    {{ DiscussionBoard.errors[3996402].message }}

Trending Topics