Jump to content
christina_g

Align items inside a table

Recommended Posts

Hello everyone,

 

I have created a table for my website. Inside one of the cells, I would like to have items aligned much in the way I would align them with tabulations in, say, a word document :

 

Item Second item

Another item Fourth item

and so on.

 

I tried doing this by using the hspace attribute (for example hspace="94px"), varying the number of pixels according to the space needed between the items, but this is obviousely neither a professionnal solution nor does it really work out once I change browers (the items are no longer aligned).

 

I've posted the code below in blue.

 

Is there a more elegant way of doing this ? I thought of inserting other cells inside this cell, but I don't know whether this is possible ?

 

Thank you very much for your help !

Christina

 

 

<table>
<tr>
<td><img src="goodbyemoney.jpg"</td>
<td>Release date : April 2005<br/>
Produced by Highway Corp.<br/>
<b>Tracklist :</b><br/><br/>
1. Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png" hspace="94px"></a><br/>
2. Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png" hspace="101px"></a><br/>
3. Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png" hspace="143px"></a><br/>
</td>
</tr>
</table>

Share this post


Link to post
Share on other sites

IF this is not data from a database, you should not be using a table for a design layout, you would use paragraphs, line breaks ordered list for such a layout.

Share this post


Link to post
Share on other sites

Understood, thank you.

 

Now, how do I get paragraphs to be laid next to each other ? Because I would absolutely need the image to occupy the left part of the page, and have all the texte running down on the right side ?

And how do I get the same for the ordered list items ?

Share this post


Link to post
Share on other sites

1 simple basic example

        <div id="wrapper">            <div class="left"><img src="goodbyemoney.jpg" /></div><div class="right"><p>Release date : April 2005<br/>                    Produced by Highway Corp.<br/>                    <strong>Tracklist :</strong></p>                <ol><li>Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png"></a></li>                    <li> Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png"></a></li>                    <li>Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png"></a></li>                </ol>            </div>        </div>

OOPS! forgot impotent part

  #wrapper {background-color: #FFFF00; overflow: hidden;}            .left, .right{width: 47.5%; padding: 1%;}            .left{float: left;  background-color: red;}            .right{float: right; background-color: green;}
Edited by dsonesuk

Share this post


Link to post
Share on other sites

Thank you very much for the above. I just tried it out and the layout is very similar to what I had in mind :-)

Ideally, and if this is technically possible, I would like to have the items of the list be located one below the other, with the icons vertically aligned - would there be any simple way to do this ?

Share this post


Link to post
Share on other sites

It looks like you may have a misplaced closing tag, as 2, and 3 content seem to be grouped together. when i looked and shrunk the width the text and image stack themselves in order, not like what you have at all.

Share this post


Link to post
Share on other sites

The HTML should be ok, all elements have their closing tags and apparently in the right order :

 

<div id="wrapper">

<div class="left"><img src="goodbyemoney.jpg" /></div>

<div class="right"><p>Release date : April 2005<br/>

Produced by Highway Corp.<br/>

<strong>Tracklist :</strong></p>

<ol><li>1. Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png"></a></li>

<li>2. Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png"></a></li>

<li>3. Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png"></a></li>

</ol>

</div>

</div>

 

On the other hand, I am not so sure that I've got the CSS part right ? :

 

#wrapper {background-color: #000; overflow: hidden;}

.left, .right{width: 47.5%; padding: 1%;}

.left{float: left; background-color: black; color: #FFFFFF; text-align: left;}

.right{float: right; background-color: black; color: #FFFFFF; text-align: left;}

.right ol a img {float: left; margin: 0.3em;}

.right ol {width: 8em;}

.right ol a {float: right;}

Share this post


Link to post
Share on other sites

Try this

            #wrapper {background-color: #000; overflow: hidden;}                         .left, .right{width: 47.5%; padding: 1%;}            .left{float: left;  background-color: black; color: #FFFFFF; text-align: left;}            .right{float: right; background-color: black; color: #FFFFFF; text-align: left;}            .right ol a img {                float: right;                height: 35px;                margin: 0.3em;                width: 30px;            }            .right ol {width: 11em;}            .right ol li {                line-height: 45px;            }            .right ol a {float: right;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...