top of table

Charlie · #1 25-Mar-2003, 10:24

In a two-column table, when one column is really long, the text in the other goes in the middle (vertically). This is normally good, however in one case I need the text in one column to stay at the TOP instead of going to the middle because the other text is huge. How can I do this?

pcxgamer · #2 25-Mar-2003, 11:05

Hello Charlie,

Ok its been a long time since I've played with tables. But I put together this code let me know if this is want your talking about.

HTML Code:


<html>
<body>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR ALIGN=left VALIGN=top>
<TD WIDTH=200 rowspan=2>row 1, column 1</TD>
<TD WIDTH=100>row 1, column 2</TD>
</TR>
<TR ALIGN=left VALIGN=top>
<TD>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>Cell 1</TD>
</TR>
</TABLE>
</body>
</html>

if this is wrong let me know.

pcxgamer · #3 25-Mar-2003, 13:32

ok I was work on the web today and I found that if you just add
valign="top" to the TD tag then it should put it on top. Just make sure that its the TD tag for the cell that has the text in it.
Hope this helps.

Charlie · #4 25-Mar-2003, 13:59

Thanks so much! Works like a charm

pcxgamer · #5 25-Mar-2003, 14:00

Your Welcome.

jrobbio · #6 25-Mar-2003, 14:50

Another satisfied customer...:-D

JdS · #7 26-Mar-2003, 02:25

For those of you who will find this thread in the future and may be interested in the XHTML / CSS version of the solution -

First the CSS between the <head> and </head> tags:

HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS and 'vertical-align:top' property</title>
<style type="text/css">
<!--
.Align2Top { vertical-align:top }
-->
</style>
</head>

Now, anywhere you want all the table data (cells) in a table row to vertically align to the top:

HTML Code:


<body>
<table>
  <tr class="Align2Top">
    <td style="width:33%">
      <p>CSS and XHTML are the future.</p>
      <p>CSS and XHTML are the future.</p>
      <p>CSS and XHTML are the future.</p>
    </td>
    <td style="width:33%">
      <p>The XHTML specification does not recommend the use of the
         'valign' attribute; you should use CSS instead.</p>
      <p>The XHTML specification does not recommend the use of the
         'valign' attribute; you should use CSS instead.</p>
    </td>
    <td style="width:33%">
      <p>pcxgamer is da Man!</p>
    </td> 
  </tr>
</table>
</body>

If you only want 1 table data (cell) to be aligned to the top:

HTML Code:


<body>
<table>
  <tr>
    <td style="width:33%">
      <p>CSS and XHTML are the future.</p>
      <p>CSS and XHTML are the future.</p>
      <p>CSS and XHTML are the future.</p>
    </td>
    <td style="width:33%">
      <p>The XHTML specification does not recommend the use of the
         'valign' attribute; you should use CSS instead.</p>
      <p>The XHTML specification does not recommend the use of the
         'valign' attribute; you should use CSS instead.</p>
    </td>
    <td style="width:33%" class="Align2Top">
      <p>pcxgamer is da Man!</p>
    </td> 
  </tr>
</table>
</body>

pcxgamer, I want to thank you for reminding me about html tags in UPPERCASE, now the HTML bbcode will recognise them too...

conkermaniac · #8 27-Mar-2003, 02:21

Hi Charlie,

I used to have the same problem (I'm not exactly an HTML expert -- I only know the basics, and I have to look the rest up), and I discovered that valign="top" works by testing it out in Frontpage, actually. So yes, there are uses for that evil tool.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Trying to retrieve selective results from a table.	icsys	MySQL / PHP Forum	9	18-Nov-2003 03:31
form in a table cell	blelisa	Web Design Forum	1	19-Aug-2003 09:14
[Tutorial] MySQL Basics	nniehoff	MySQL / PHP Forum	15	23-Mar-2003 19:42
using a button to change table contents.	demtro	MySQL / PHP Forum	20	02-Mar-2003 15:07
table question	smoky	Web Design Forum	1	05-Jan-2003 02:45

top of table

Using CSS to align a (table) cell or cells to the top