www.webdeveloper.com
Results 1 to 9 of 9

Thread: how to make irregular table cells?

  1. #1
    Join Date
    Feb 2003
    Posts
    17

    Question how to make irregular table cells?

    I've got long tables two cells per row, one with an image and the other with corresponding text, that alternate in each row, like so:

    <tr>
    <td>IMAGE</td>
    <td>TEXT</td>
    </tr>
    <tr>
    <td>TEXT</td>
    <td>IMAGE</td>
    </tr>

    The problem: The images are all different sizes. When I have the image on the right, the text on the left aligns just fine, right up against the image. But when I have the image on the left, there's a big gap between the edge of the image and the beginning of the text that looks pretty stupid. How can I force the right-sided text to line up flush against the left-sided image? I've tried using different width attributes for the individual cells but that doesn't change it a bit.
    ?????
    Tnx,
    Skolya
    www.jerizjoolz.com/earrings.html
    or
    www.jerizjoolz.com/bracelets.html

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    I'm not sure what you're looking for...This?

    Code:
    <tr> 
    <td align="right">IMAGE</td> 
    <td align="left">TEXT</td> 
    </tr> 
    <tr> 
    <td align="right">TEXT</td> 
    <td align="left">IMAGE</td> 
    </tr>

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Feb 2003
    Posts
    17

    Hi Pyro

    Not exactly--here's what I want it to look like:
    ----------
    | IMG | This is a really ugly necklace that I
    | | wouldn't expect you to pay 2 cents for!
    | | Price: $5,677.00
    ----------

    -------
    On the other hand, here's a truly rare and | IMG |
    wonderful 1920s Eisenberg Original that's | |
    been appraised at $1,365.00! | |
    Price: $1.25 | |
    | |
    -------

    In other words, each row the same length with
    equal margins on the page, but adjustable
    individual cells. First I tried pixel widths, then
    percentage widths--no luck. Got
    any better ideas?
    PS: How come ASCII art doesn't work here? Let me try something else:

    This is how the right-sided text should
    look....

    And this is how the left-sided text
    should look

    That doesn't work either; this is almost as frustrating as my pages! Let me go try your suggestions anyway.
    Tnx,
    Skolya
    Last edited by skolya; 02-10-2003 at 04:41 PM.

  4. #4
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Post a link, that should work fine.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  5. #5
    Join Date
    Feb 2003
    Posts
    17

    OK

    www.jerizjoolz.com/earrings.html
    www.jerizjoolz.com/bracelets.html
    www.jerizjoolz.com/necklaces.html (which isn't up yet but it's the worst, so I'm going to go do it right now)
    tnx,
    skolya

  6. #6
    Join Date
    Feb 2003
    Posts
    17

    OK, DONE

    necklaces is now up too.

  7. #7
    Join Date
    Feb 2003
    Posts
    17
    I'm going to upload a text file of the ASCII art, which makes it all very clear.
    skolya
    Attached Files Attached Files

  8. #8
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    What you will need to do is nest tables, something like this...

    Code:
    <table width="500" border=1>
    <tr>
    <td>
    <table>
    <tr>
    <td align="right" width="100">IMAGE</td> 
    <td align="left" width="400">TEXT</td> 
    </tr>
    </table>
    </td>
    </tr> 
    <tr>
    <td>
    <table>
    <tr>
    <td align="right" width="400">TEXT</td> 
    <td align="left" width="100">IMAGE</td> 
    </tr>
    </table>
    </td>
    </tr>
    </table>
    It's not pretty, but...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  9. #9
    Join Date
    Nov 2002
    Posts
    984

    Re: Hi Pyro

    Originally posted by skolya
    PS: How come ASCII art doesn't work here?
    This is a HTML board, and HTML browsers are supposed to cut away extra whitespace. Try using [ code] to keep the whitespece in

    Code:
    ----------
    |  IMG   | This is a really ugly necklace that I
    |        | wouldn't expect you to pay 2 cents for!
    |        | Price:  $5,677.00
    ----------
    Anyway, this is how I would do your page.

    <div class="boxleft">
    <img>
    Textdescription
    </div>

    <div class="boxright">
    <img>
    Textdescription
    </div>

    <div class="boxleft">
    <img>
    Textdescription
    </div>

    with this in the headsection
    <style type="text/css">
    body {text-align:center;}
    .boxleft, .boxright {clear:both; width: 400px; margin:20px auto; text-align:left;}
    .boxleft img {float:left}
    .boxright img {float:right}
    </style>
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles