PDA

View Full Version : Problems aligning headers in table



cmccullough
Mar 12th, 2010, 04:45 PM
Hello,

I'm trying to create a table, of sorts, on my site but I can't seem to get the headers above the content. I've included the code that I'm using with the ouput. The "download link" text will be replaced with the actual download link when I get this set correctly. I would like the "download link" to be below the Newsletter and Menu headers but I just can't seem to figure out how to do it..

<html>
<body>

<table border="0" width="100%" cellpadding="10">
<tr>

<th>Newsletter</th>
<td width="50%" valign="top">
Download Link
</td>

<th>Menu</th>
<td width="50%" valign="top">
Download Link
</td>

</tr>
</table>

</body>
</html>

Below is the output:

Newsletter Download Link Menu Download Link


Thanks for your help!

mbaker
Mar 12th, 2010, 05:13 PM
Using tables for layout, which you appear to be doing, is a really bad idea.

You should learn and use CSS for layout.

Tables were designed for tabular data, things like price lists.

If you do use tables you need to understand that they work in rows from top to bottom, and within the rows, columns from left to right.

If you really must use a table, the following will achieve what you are after:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title></head>
<body>

<table border="0" width="100%" cellpadding="10">

<tr>
<th>Newsletter</th>
<th>Menu</th>
</tr>

<tr>
<td width="50%" valign="top" style="text-align:center">
Download Link
</td>
<td width="50%" valign="top" style="text-align:center">
Download Link
</td>
</tr>

</table>

</body>
</html>

One thing I've added is style="text-align:center" to the two <td> elements. That is because the default is (in all the browsers I've checked this in) for <th> to be centred, but <td> to be left aligned by default.

cmccullough
Mar 12th, 2010, 06:28 PM
Thanks for the help. I'll definitely look into using CSS for this instead.

Thanks again!

cmccullough
Mar 12th, 2010, 09:45 PM
Is it possible to do this without using borders?

Thanks