how to write at the right of a table?

[ragnarock]

I have this code:

<table cellpadding="0" cellspacing="5" border="0"
       background="http://ragnarock.110mb.com/Blogs/vgBargains/wp-content/themes/magadine/images/comment.png" width="38" height="31">
            <tr><td align="center" valign="top">
              <font size="2" face="verdana">
                <b>2</b>
              </font>		
            </td></tr>
</table>

this creates a table with my background image and with "2" writen on the center of that image

now...i would like to put some text at the right side of this table/image but i can only write down....

i'm using this site http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables as a playground...so far with no luck
anyone could help me? tks

 

[PixelPusher]

Hi There,

Not sure of your level, so you may have already tried this, you could change the td align="center" to td align="right", but that would move the "2" to the right too.

If you wanted to keep the "2" in the center you could create two new columns, one before, and one after the column with the "2" and align the one after to the right

<table cellpadding="0" cellspacing="5" border="0"
       background="http://ragnarock.110mb.com/Blogs/vgBargains/wp-content/themes/magadine/images/comment.png" width="38" height="31">
            <tr>
[B]<td>&nbsp;</td>[/B]
<td align="center" valign="top">
              <font size="2" face="verdana">
                <b>2</b>
              </font>		
            </td>
[B][COLOR="Red"]<td align="right>[/COLOR]Whatever you want to write goes here</td>[/B]</tr>
</table>

Hope this helps
Ian
Affordable Webdesign

missing a quote (")

 

[rivervalleywebs]

Maybe skipping tables would be easier depending on your end goal. Seems a bit excessive for just an image with text to the right of it. Why not...

<div>
    <img src="http://ragnarock.110mb.com/Blogs/vgBargains/wp-content/themes/magadine/images/comment.png" width="38" height="31" style="padding: 5px; float:left;">
    <b>2</b>
</div>

 

[PixelPusher]

Truthfully, I would use divs and css and not a table at all and W3 has some great info on divs and positioning, and also beginning css. Anyway in regards to this table, you should still incorporate some css into the setup.

Table

<table cellpadding="0" cellspacing="5" border="0" class="styleName">
   <tr>
       <td>&nbsp;</td>
       <td>
            <div class="num">2</div></td>
       <td>
            <div class="text">Whatever you want to write goes here</div></td>
   </tr>
</table>

CSS

table.styleName {
width:38px;
height:31px;
background: url(http://ragnarock.110mb.com/Blogs/vgBargains/wp-content/themes/magadine/images/comment.png) center no-repeat;
}
div.num {
font-weight:bold;
font-size:15pt;
font-family:Arial, sans-serif;
color:#fff;
}
div.text {
font-weight:normal;
font-size:9pt;
font-family:Arial, sans-serif;
color:#fff;
text-align:justify
}

Using a little css is very helpful for future edits and making global styles, plus it makes your code shorter and cleaner . These styles can be written into the HEAD of an HTML page by enclosing them in "<style> here </style>" tags. Or they can be stored in a external css doc (ex: "styles.css"), the external method is better.

 

[PixelPusher]

Maybe skipping tables would be easier depending on your end goal. Seems a bit excessive for just an image with text to the right of it. Why not...

<div>
    <img src="http://ragnarock.110mb.com/Blogs/vgBargains/wp-content/themes/magadine/images/comment.png" width="38" height="31" style="padding: 5px; float:left;">
    <b>2</b>
</div>

Ahhhh you beat me to it!! Lol.

 

[rivervalleywebs]

Well you were more informative in your reply than I was! Lawl

 

[PixelPusher]

Thx river,
yeah by far the best way to do what he wants is to use a divs. Use one main div with bg that contains two more: div for the number[style] and another for the body/text[style]. This is an incorrect application of the table element. They are mean for tabular data, like a pricing matrix or something similar.