Table rowspan/colspan alignment

I'm working on cutomizing a template, I'm rebuilding a page to use a different format for a services/about us format instead of the main home page. The home page uses a table to align it's images. When I build the same page to use a different format, it doesn't align correctly.

Here's the basic layout

+----------------------------------+
- LOGO      -- |link|link|link|link|
-               ------------------------
-------------------------------------
|    content                             |
|                                            |
|                                            |
-------------------------------------

The home page has three cols in the content section, which I try to do a two column layout I can't get the logo and links formatting to work with the content section

It basically looks like this

+----------------------------------+
- LOGO      -- |link|link|link|link|
-               ------------------------
---------------------------------------------
|               content                            |
|                                                 ?   |
|                                                     |
---------------------------------------------

It aligns the start of the content with the width of the logo, in the page they've included that doesn't happen. How do you specify the width of cell absolutely? Or, should I just use a CSS only layout for this, which I'd rather do, but I don't want to rebuild the site entirely from scratch. It doesn't really seem that complicated of a layout. I was also think maybe I should cut the logo image up, one the width of the left sides border, and then just rowspan the rest. Any suggestions?

Here's my table code -

<table id="Table_01" width="775" height="292" border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td rowspan="4"><img src="images/cornerTL.jpg" width="350" height="292" alt=""></td>
            <td colspan="5"><img src="images/top-new.jpg" width="425" height="64" alt=""></td>
      </tr>

      <tr>
            <td><a href="index.html" onmouseover="mouseOver(0)" onmouseout="mouseOut(0)">
                  <img src="images/about_us-new2.jpg" width="100" height="39" border="0" name="about_us"></a></td>
            <td><a href="services.html" onmouseover="mouseOver(1)" onmouseout="mouseOut(1)">
                  <img src="images/services-new2.jpg" width="82" height="39" alt="Our Services" border="0" name="services"></a></td>
            <td><a href="clients.html" onmouseover="mouseOver(2)" onmouseout="mouseOut(2)">
                  <img src="images/clients-new2.jpg" width="76" height="39" alt="Clients" border="0" name="clients"></a></td>
            <td><a href="contact_us.html" onmouseover="mouseOver(3)" onmouseout="mouseOut(3)">
                  <img src="images/contact_us-new2.jpg" width="116" height="39" alt="Contact Us" border="0" name="contact_us"></a></td>
            <td><img src="images/rightSide-new.jpg" width="51" height="39"></td>
      </tr>

      <tr>
            <td colspan="5"><img src="images/bottom-new.jpg" width="425" height="40"></td>
      </tr>

      <tr>
            <td colspan="5"><img src="images/middle-new.jpg" width="425" height="149"></td>
      </tr>

      <tr>
            <td><img src="images/leftSide-new.jpg" width="53" height="319"></td>
            <td colspan="4"><img src="images/spacer.jpg" width="667" height="319"></td>
            <td><img src="images/rightSideB-new.jpg" width="25" height="319"></td>
      </tr>

      <tr>
            <td colspan="5"><img src="images/bottomB-new.jpg" width="775" height="14"></td>
      </tr>
</table>

LVL 1
_davidharrisAsked:
Who is Participating?
 
strickddConnect With a Mentor Commented:
What you are going to need is to add some colspan properties to your <td> tags. It is really hard to describe, but I'll try

<tr>
   <td colspan=2> IMG </td>
    <td> TEXT </td>
</tr>
<tr>
    <td width= BORDERWIDTH>
        Border
     </td>
     <td colspan=2>
         COMMENTS
     </td>
</tr>


will look like:

______________________
|       IMG           |           |
-------------------------------
|Border|                         |
-------------------------------
0
 
_davidharrisAuthor Commented:
Any tips on getting your questions answered in a timely fashion?
0
 
GawaiCommented:
for alignment use
<td align=left valign=center>

align = left, right, center
valign = top, middle, bottom

try all those
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
_davidharrisAuthor Commented:
I will give that a shot.
0
 
_davidharrisAuthor Commented:
Ok that didn't do anything really. I don't care about what's in the tables, what I need is a way to specify a cell's width absolutely. I have a large picture in the first cell of my table, and directly under it I have an image for the border of the website, however it isn't as wide as the main image. The table will translate the width of the larger image to the cell under it, the cell for my border image, which has a more narrow image in it. I need to tell the web browser to make that cell the width of my border image, not the cell above it's width.

I know it can be done, I loaded word to try and see how it's done. I built a table and then modified to basically look like the table I need and then looked at what word has saved, but it was so complicated I couldn't get it.

Any help?
0
 
_davidharrisAuthor Commented:
I actually knew that, but for some reason the table does not behave the way it should. I'm going back into my design becuase I'm sure that I left a colspan or rowspan either out or set incorrectly. If anyone can send me the "set table column width to this or else" code please do that.

You're right but that's just not what I'm looking for. Do you know anything about the CSS table attributes? I should probably just try to find a list of those and see what happens. I have to finish this thing today though, so I'm probably just going to cut the logo pic up until I get something I can use. Thanks for your help!
0
 
_davidharrisAuthor Commented:
I just downloaded the photoshop trial, I'm just going to have to imageready my stuff! Thank you for your help!
0
All Courses

From novice to tech pro — start learning today.