Adobe Community: table alignment....vertical alignment

3,729 posts
Oct 15, 2010

Currently Being Moderated

1. Sudarshan Thiagarajan,

Apr 22, 2012 10:55 PM in reply to Taffypro

Report

If you want to insert one full table inside of an existing table, navigate to the <td></td> that you want to place you new table into.

Use your table code as always.

Your cell for the new table should hold <td valign="top" align="center"> this will align the new cell inside your existing table to vertical top and horizontal center.

|

Mark as:

3,729 posts
Oct 15, 2010

Currently Being Moderated

2. Sudarshan Thiagarajan,

Apr 22, 2012 10:56 PM in reply to Taffypro

Report

You may also consider using CSS to achieve this. Define a CSS rule with your desired style in it and call that style in your <td> tag. For example, if you define a CSS rule saying newtable, your td could be <td class="newtable">

This will call the style you define in your CSS inside the <td> tag.

|

Mark as:

Currently Being Moderated

3. Nick Entin,

Apr 23, 2012 9:27 AM in reply to Taffypro

Report

You can also consider using the rowspan attribute instead of a table inside a table. Try this:

<!--Image Gallery TABLE/ width = 800/height=522-->
<table width="800" height="522" border="1" id="imagegallery">
     <tr> <td> </td> <td> </td> <td width="614" rowspan="2"> <img src="images/desert_cool.jpg" alt="mainpic" width="618" height="516" align="top" id="Image1" /> </td> </tr>
     <tr> <td> </td> <td> </td> </tr>
</table>

|

Mark as:

Currently Being Moderated

4. Taffypro,

Apr 28, 2012 9:57 AM in reply to Sudarshan Thiagarajan

Report

That didn't help. I have attached a .jpg of the table. Basically I have created a table which is 800 pixels wide (1 row/ 2 columns). In the second column I want to place a new table and have it to align at the top. It always centers the table vertically.....Here is the code....

<tr>

<tr>

</tr>

<tr>

</tr>

</table>

|

Mark as:

3,729 posts
Oct 15, 2010

Currently Being Moderated

5. Sudarshan Thiagarajan,

Apr 28, 2012 10:12 AM in reply to Taffypro

Report

Try this:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.tdtop{
    vertical-align:top;
}
</style>
<body>
<table width="800" height="522" border="1">
<tr>
    <td width="400"> </td>
    <td width="400" class="tdtop"><table width="390" border="1">
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
    </table></td>
</tr>
</table>
</body>

Message was edited by: Sudarshan Thiagarajan to quote the script

|

Mark as:

Currently Being Moderated

6. PJ 123,

Apr 28, 2012 11:09 AM in reply to Taffypro

Report

Hi,

See if anything here might help you. You have an id "contact" shown, which may override the class I'm using. I'm showing three instances with the text aligned to the top, middle, and bottom:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>table td align to top</title>

<!--

table.top td {

vertical-align: top;

}

table.middle td {

vertical-align: middle;

}

table.bottom td {

vertical-align: bottom;

}

-->

</style>

</head>

<body>

<tr>

<td height="522">Left Column</td>

<tr>

<td>Right Column 1 Row 1</td>

<td>Right Column 2 Row 1</td>

</tr>

<tr>

<td>Right Column 1 Row 2</td>

<td>Right Column 2 Row 2</td>

</tr>

</table>

</td>

</tr>

</table>

<br />

<tr>

<td height="522">Left Column</td>

<tr>

<td>Right Column 1 Row 1</td>

<td>Right Column 2 Row 1</td>

</tr>

<tr>

<td>Right Column 1 Row 2</td>

<td>Right Column 2 Row 2</td>

</tr>

</table>

</td>

</tr>

</table>

<br />

<tr>

<td height="522">Left Column</td>

<tr>

<td>Right Column 1 Row 1</td>

<td>Right Column 2 Row 1</td>

</tr>

<tr>

<td>Right Column 1 Row 2</td>

<td>Right Column 2 Row 2</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Message was edited by: PJ 123 to post the code

|

Mark as:

Currently Being Moderated

7. Taffypro,

Apr 28, 2012 11:21 AM in reply to Sudarshan Thiagarajan

Report

Now I am starting to wonder if my code is wonky. Below is my entire code for that page. I have a few different tables on each page. I have written .css for each table so that the appropriate background displays. Here is a link to the working site. I am kinda new to DW so any advice is appreciated.

http://taffyproductions.com/test/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>NomTom - Paintings by Nonnie Thompson</title>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

<td><a href="index.html">Dogma Series</a></td>

<td><a href="talkingheads.html">Talking Heads</a></td>

<td><a href="landscapes.html">Landscapes</a></td>

<td><a href="contact.html">Contact/About</a></td>

</tr>

<tr>

</tr>

</table>

<tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td width="606">Designed by <a href="http://taffyproductions.com/">Gary Goldblum</a></td>

</tr>

</table>

</div>

</body>

</html>

|

Mark as:

3,729 posts
Oct 15, 2010

Currently Being Moderated

8. Sudarshan Thiagarajan,

Apr 28, 2012 11:44 AM in reply to Taffypro

Report

I don't see any page on your site that you posted where you've used a table within a table and everything looks aligned perfect.

|

Mark as:

Currently Being Moderated

9. Taffypro,

Apr 28, 2012 1:08 PM in reply to Sudarshan Thiagarajan

Report

All the thumbnail images are within a table. The main image is within the other column of the "image gallery" table. If you look at the second page you will see that the thumnails don't appear at the top. I want to be able to slide my row and column "guides" and have the images move where I want them. Is there a general css rule I could write so that all tables align to the top automatically?

Thanks for your time,

Gary

|

Mark as:

3,729 posts
Oct 15, 2010

Currently Being Moderated

10. Sudarshan Thiagarajan,

Apr 28, 2012 1:25 PM in reply to Taffypro

Report

I've already explained this to you in my previous post:

Change your HTML files Line 80 as follows:

<td width="164" style="vertical-align: top;"><table width="150" border="0">

Note that I've removed valign = top from the new table tag within this line

Or, you could define this in CSS as

.tdtop{
vertical-align:top;
}

and use this in your HTML

<td width="164" class="tdtop"><table width="150" border="0">

The vertical-align attribute should be applied to the container holding the content, not within the content.

|

Mark as:

Dreamweaver

table alignment....vertical alignment

Apr 22, 2012 7:50 PM

More Like This

Bookmarked By (0)

Answers + Points = Status