#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    97
    Rep Power
    12

    CSS basic question regarding TD tags


    how do you set the width with CSS?

    i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    61
    Rep Power
    11
    pretty simple really. define two classes for them, let's say you want the left TD to be 30% and aligned left, the other 70% and alligned right. We'd do the following:

    Code:
     
    td.left
       {
       width: 30%;
       text-align: right;
       }
    td.right
       {
       width: 70%;
       text-align: left;
       }
    should be it... all you need is to tell which class you want each td to belong to. for example:
    Code:
    <table>
     <tbody>
       <tr>
        <td class="left"></td>
        <td class="right"></td>
       </tr>
      </tbody>
    </table>
  4. #3
  5. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    16
    If you are using CSS you shouldn't be using tables, for non-tabular data.

    Do a google search for CSS Layout's for examples. What you have asked for can be accomplished quite easily without tables.
  6. #4
  7. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    16
    Are you using the table to represent data in an organized manner, or are you using it as a posistioning element in your page layout?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    97
    Rep Power
    12
    carrja99- i don't think that works :-\, or at least i'm having trouble with it for some odd reason.

    the reason why i'm using tables and css tags together is b/c is b/c it would seem better to reuse something like
    <td class="table1">
    vs
    <td width=50% align=center>

    and if i ended up wanting to change the width of my <td> tags, then i would have to change each individual one.
  10. #6
  11. Contributing (?) User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Location
    uk
    Posts
    462
    Rep Power
    11
    the reason why i'm using tables and css tags together is b/c is b/c it would seem better to reuse something like
    <td class="table1">
    vs
    <td width=50% align=center>
    and if i ended up wanting to change the width of my <td> tags, then i would have to change each individual one.
    Hi jwfc
    i sometimes wonder about the whole logic behind css, i mean by the time you have writen this <td class="table1"> to each of your tags you mite just as well have writen <td width=50% align=center>
    ok css looks nice and neat and can be edited easier and so on but ...
    Last edited by ian ocky; May 10th, 2004 at 07:13 PM.
    hope that helps... take care... ian
    feel free to email me... the cockney one...
    ian*at*thereddevil.net
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    its no problem doing with pure css,

    Code:
    td {
       width: 30%;
       text-align: right;
    }
    
    td + td {
       width: 70%;
       text-align: left;
    }
    but this doesn't work in some of the browsers out there

    for a more complex example
    http://test.9ls.org/css-examples/chess.html

IMN logo majestic logo threadwatch logo seochat tools logo