Wrox Home  
Search P2P Archive for: Go

  Return to Index  

html_code_clinic thread: Alignment problems with Tables


Message #1 by "Michael Whitmill" <mwhitmill@e...> on Thu, 9 May 2002 21:07:26
Michael, did you get a response to this?
Perhaps I don't understand what you're doing, but you appear to be
misusing the <th> tag and the colspan attribute.
Tables are constructed of rows - defined by the <tr> tag - of columns
defined by the <td> tag.  You don't have ANY <td> tags (columns) in your
table.  You seem to be using the <th> tag, which defines a column
heading, to define your columns.  That might confuse some browsers.  The
<th> tag is most often used in just the top row of a table to define the
headings of the columns even though there's no hard rule about that.
The remainder of the cells (columns) are typically defined using the
<td></td> pair of tags.
The colspan attribute is used to tell the browser that you want a given
cell (column) to span across 2 or more of the columns in your table.
Since you appear to be defining only two columns (using the <th> tag)
then most browsers will get confused about your instructions to span 2
and then 6 of the columns in the table.  You don't have 8 columns, you
have 2.  For clarity, the "columns" you're spanning are not character
positions, they are table columns where each column is defined by a
<td></td> pair.
HTH
Mark
-----Original Message-----
From: Michael Whitmill [mailto:mwhitmill@e...] 
Sent: Thursday, May 09, 2002 9:07 PM
To: HTML Code Clinic
Subject: [html_code_clinic] Alignment problems with Tables

I'm a beginner trying to lay out my first table strictly on my own.  I'm

trying to set it up with essentially 3 rows and 2 columns (in the 
mathematical sense).

The first "row" is a header.  The first "column" has COLSPAN=2; the 
second has COLSPAN=6 and they both lay out correctly.

The second "row" is has one block of COLSPAN=2, ROWSPAN=2 and the second

block has COLSPAN=6 and ROWSPAN=2.  It also aligns properly.

The third "row" is essentially a repeat of the format used in the 
second "row".  However, instead of falling beneath the second "row", it 
lays out on the right side of the desired second "row".

Here's the actual HTML (in an ASP module):

<TABLE BORDER=4 CELLPADDING="2" CELLSPACING="5">
		<TR>
			<TH ColSpan=2>Options</TH>
			<TH ColSpan=6>Descriptions</TH>
		   </TR>
		
		<TR>
		<TH ColSpan=2 RowSpan=2>
		<FORM NAME="Event_Reservations" ACTION="Invitation.asp" 
METHOD="post">   
			<INPUT 	
				CLASS="Selection1"
				OnFocus="select();"
				TYPE="submit"
				TABINDEX="1"
				VALUE="  Reservations"
			   >
		   </FORM>
		   </TH>
		<TH ColSpan=6 RowSpan=2>Add, modify, and delete 
reservations for <%=Session("EventName")%></TH>
		   </TR>
		
		<TR>		
		<TH Colspan=2 Rowspan=2>
		<FORM NAME="ProcessNames" ACTION="EAI_List_Names.asp?
StartPlace=0&Letter=all&Sort=LastName" METHOD="post">   
			<INPUT	
				CLASS="Selection1"
				OnFocus="select();"
				TYPE="submit" 
				TABINDEX="2" 
				VALUE="  Names" 
			   >
		   </FORM>
		   </TH>
		<TH Colspan=6 Rowspan=2>List and Update Names in the 
Database</TH>
		   </TR>
	</TABLE>

--Thanks, Mike

---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20


  Return to Index