SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question positioning an image in a table

    Hello!

    I am trying to learn enough to maintain my church's website.

    Right now I would like to know how to position an image [here, the image of Marta preaching] in a table row. I'd like to be able to place the text on the right of the image too.

    Here's the code, and thanks for any help!

    Polly
    Code:
    <head>
    <title>Unitarian Church of Montpelier - Our Minister</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body background="xbg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="750" border="0" cellspacing="0" cellpadding="0">
      <tr align="left" valign="top"> 
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr align="left" valign="top"> 
        <td>&nbsp;</td>
        <td class="TopHead"><img src="blank.gif" width="10" height="1">Unitarian Church of Montpelier</td>
      </tr>
      
         <tr> 
              <td>&nbsp;</td>
            </tr>
            
      <tr align="left" valign="top"> 
        <td>&nbsp;</td>
        <td class="SubHead"><img src="blank.gif" width="10" height="1">Our Interim Minister</td>
      </tr>
      <tr align="left" valign="top"> 
        <td> <table width="200" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td><img src="blank.gif" width="27" height="1"></td>
              <td><img src="blank.gif" width="6" height="1"></td>
              <td><img src="blank.gif" width="25" height="1"></td>
              <td><img src="blank.gif" width="10" height="1"></td>
              <td><img src="blank.gif" width="132" height="1"></td>
            </tr>
            <tr> 
              <td colspan="5"><img src="blank.gif" width="200" height="25"></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="index.html">Home</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="history.html">History</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="governance.html">Governance</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><img src="blank.gif" width="25" height="25"></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="ministry.html">Our Ministry</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="dot.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu">Our Minister</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="music.html">Our Music</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="education.html">Religious Education</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"> <p><a href="http://prem.calendars.net/ucofm/">Upcoming 
                  Events</a></p></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><img src="blank.gif" width="25" height="25"></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="news.html">News</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><img src="blank.gif" width="25" height="25"></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="directions.html">Directions</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td><div align="center"><img src="blank.gif" width="25" height="25"></div></td>
              <td>&nbsp;</td>
              <td class="menu"><a href="links.html">UU Links</a></td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table></td>
        <td> <table width="550" height="750" border="0" cellpadding="0" cellspacing="0" background="bldgScrn25.jpg">
            <tr> 
              <td><img src="blank.gif" width="10" height="1"></td>
              <td><img src="blank.gif" width="170" height="1"></td>
              <td><img src="blank.gif" width="10" height="1"></td>
              <td><img src="blank.gif" width="170" height="1"></td>
              <td><img src="blank.gif" width="10" height="1"></td>
              <td><img src="blank.gif" width="170" height="1"></td>
            </tr>
            <tr> 
              <td><img src="blank.gif" width="10" height="27"></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            
            <tr> 
              <td>&nbsp;</td>             
             <td> <img src="Marta web.jpg" width="150" height="150" alt="photo of Marta preaching"></td>
            </tr>
            
          <tr> 
              <td>&nbsp;</td>
            </tr>
    
             <tr> 
              <td colspan="30" valign="top"><p>The Rev. Marta Flanagan is our interim minister 
              for the church year 2008-2009.</p> 
             
                <p>lots and lots of text</p>
    
    
    
              </td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td colspan="5" valign="bottom"> <p>&nbsp;</p>
                <p align="left"><img src="chalice.gif" alt="Chalice Image" width="48" height="56" align="left"><br>
                  <strong>Unitarian Church of Montpelier (802) 223-7861<br>
                  130 Main Street Montpelier, Vermont 05602</strong></p></td>
            </tr>
          </table></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    Last edited by Paul O'B; Oct 12, 2008 at 05:05. Reason: code tags added

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Pretoria, South Africa
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hi. To help you, I have a few questions. The cell that contains the image (<img src="Marta web.jpg" width="150" height="150" alt="photo of Marta preaching">) should the text be (a) in that cell or (b) in another cell on the right hand side of the image?
    (a) insert the text after the image tag before the "</td>" tag.
    (b) insert a cell after the </td> tag for example: <td> <img src="Marta web.jpg" width="150" height="150" alt="photo of Marta preaching"></td><td colspan="4" valign="top">text</td>

    Another question. Are you aware that the table have 30 columns? It does not seem necessary for that amount of columns (based on what I can see). This is specified in the line of <td colspan="30" valign="top"><p>The Rev. Marta Flanagan is our interim minister
    for the church year 2008-2009.</p>. If you do need 30 columns, you have to define them on every row:
    <tr>
    <td><img src="blank.gif" width="10" height="27"></td>
    <td>&nbsp;</td>(30 of the <td></td> tags)
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    (I use Adobe Dreamweaver which inserts the "&nbsp" into blank defined cells.)

    Further I can't see exactly how it should look (CSS etc) but it seem to be quite good.

    Jacotheron

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Your problem arises because of the number of cells is not equal in all rows.

    Code:
    <td> <table width="550" height="750" border="0" cellpadding="0" cellspacing="0" background="bldgScrn25.jpg">
    <tr>
    <td><img src="blank.gif" width="10" height="1"></td>
    <td><img src="blank.gif" width="170" height="1"></td>
    <td><img src="blank.gif" width="10" height="1"></td>
    <td><img src="blank.gif" width="170" height="1"></td>
    <td><img src="blank.gif" width="10" height="1"></td>
    <td><img src="blank.gif" width="170" height="1"></td>
    </tr>
    <tr>
    <td><img src="blank.gif" width="10" height="27"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>

    2 rows wit 6 cells per row

    Code:
    <tr>
    <td>&nbsp;</td>
    <td> <img src="Marta web.jpg" width="150" height="150" alt="photo of Marta preaching"></td>
    </tr>
    1 row and 2 cells... but it is the same table as the code above... it should have 6 cells per row...but there is no colspan nor anything... how many columns should the first cell combine? and what about the picture?

    Code:
    <tr>
    <td>&nbsp;</td>
    </tr>
    A row and an empty cell... but again... and again, we haven't changed to another table... therefore, this row should have 6 cells or at least one that combines the six of them using a colspan attribute...

    Code:
    <tr>
    <td colspan="30" valign="top"><p>The Rev. Marta Flanagan is our interim minister
    for the church year 2008-2009.</p>
    
    <p>lots and lots of text</p>
    </td>
    </tr>
    Same issue here...
    Code:
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    Finally...one with 6 cells!

    Code:
    <tr>
    <td>&nbsp;</td>
    <td colspan="5" valign="bottom"> <p>&nbsp;</p>
    <p align="left"><img src="chalice.gif" alt="Chalice Image" width="48" height="56" align="left"><br>
    <strong>Unitarian Church of Montpelier (802) 223-7861<br>
    130 Main Street Montpelier, Vermont 05602</strong></p></td>
    </tr>
    </table>
    And here the table ends...

    By the code you are showing, I think that you are building your site from scratch. Good. That will allow you to learn things properly. Learning things properly means to use semantic markup

    TABLES FOR LAYOUT ARE NOT SEMANTIC MARKUP. I let you write that down 1.000 times

    Now, seriously. Your code is old fashioned and bulky. And there is a huge issue with that.

    • Maintaning the site is going to be harder than if the code was semantic
    • When there's a problem, it is harder to find
    • It is harder to read... this code is a mess for search engines... but also for screen readers... Since the site is for a church, and churches are associated with the good that is supposed to be in us, and with charity, therefore I see accessibility as a must.


    I could go on much longer, but I don't want to bore you.

    My counsel is: start over and learn the good practices... tables are only for tabular data.

    Use semantic markup: create only the code that it is necessary to do what you want to do, and label it accordingly what they do and what they mean in the code (such as a div for a header, or a div (or ul, if you can save to use unnecessary extra code) labeled as navigation, etc.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    J:

    The text should be in the right-hand side of the image. I'll try the code; thanks!

    I'm learning!


    Molona:

    I THINK you are talking about CSS vs content HTML.

    If so, yes, I agree the site needs redoing. It was set up at least seven years ago, and maybe more. It was written in HTML 4.1 transitional.

    But I am under the gun here; the new site must be up Oct 31, and I have not got the time now, or the knowledge to do it.

    So I need to update it now, and then learn enough to rewrite it.

    I will study your answer.

    Thanks a lot: both of you!

    Polly


Bookmarks

Posting Permissions

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