Help with a layout of a page

[andrewsmd]

I need to display information in a table but it is rather weird how I need to do it. My html table would look something like this

Updated ¦ Job Name ¦ notes ¦ delete/edit

I would like updated to have the date job name and delete/edit to all be at the very top.
However, in the notes section there could be multiple lines and I don't want the notes to stay within the width of the notes column.
How do I?
1. Set the notes column to fixed length where the text will wrap within the column.
2. Put the other columms text at the top?
Here is my html

<table class = "tableClass" cellspacing="0" >

<tr>
<td class = "tableHead">Updated:</td>
<td class = "tableHead">Name:</td>
<td class = "tableHead">Notes:</td>
</tr>

<tr class = "line">
<td class = "tableSpace">{date}</td>
<td class = "tableSpace">{jobName}</td>
<td class = "tableWidth"><ul><!-- BEGIN notes --><br><li>{notes}</li><!-- END notes --><ul></td>
<td class = "tableSpace"><input type = "checkbox" name = "{checkName}" > delete<br><a href = "{link}">edit</a></td>
</tr>

</table>
and here is the css
.tableClass{

color: black;
font-size: 18px;
font-weight: bolder;
text-align: left;
z-index: 4;
left: 30%;

}
.line{
border-bottom: solid;
border-bottom-color: black;
bottom: 30em;

}

.tableHead{

padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
text-align: left;
font-size: 22px;
z-index: 4;

}
.tableSpace{
padding-left: 1em;
padding-right: 1em;
padding-top: 2em;
text-align: left;
font-size: 16px;
z-index: 4;

}

Keep in mind I am populating this HTML with PHP. I'm just not a front end guy. Thanks,

[swa66]

First: <td class = "tableHead"> : why not use a <th> ?

cellspacing: you can easily get rid of that, set "border-collapse: collapse;" on the table ...

Your z-index, left: 30%; , bottom: 30em; etc. won't do a thing (and if they kick in action, you'd be surprised)

Now that leaves understanding what you mean by "there could be multiple lines and I don't want the notes to stay within the width of the notes column. "

do you seek something like:

+---------+----------+-------------------+-------------+
¦ Updated ¦ Job Name ¦ notes notes notes ¦ delete/edit ¦
¦         ¦          ¦ notes notes notes ¦             ¦
¦         ¦          ¦ notes notes notes ¦             ¦
¦         ¦          ¦ notes notes notes ¦             ¦
+---------+----------+-------------------+-------------+

or more do you something like:

+---------+----------+-------------------+-------------+
¦ Updated ¦ Job Name ¦ notes notes notes ¦ delete/edit ¦
+---------+----------+ notes notes notes +-------------+
¦notes notes notes notes notes notes notes notes notes ¦
¦notes notes notes notes notes notes notes notes notes ¦
¦notes notes notes notes notes notes notes notes notes ¦
+------------------------------------------------------+

or perhaps nicer:

+---------+----------+-------------------+-------------+
¦ Updated ¦ Job Name ¦                   ¦ delete/edit ¦
+---------+----------+                   +-------------+
¦notes notes notes notes notes notes notes notes notes ¦
¦notes notes notes notes notes notes notes notes notes ¦
¦notes notes notes notes notes notes notes notes notes ¦
+------------------------------------------------------+

?

With CSS you can achieve any of them ... but not when you keep it displaying as a table, as a table will lock you in cells.

To achieve the others learn about floating a box and positioning boxes.

[edited by: swa66 at 7:10 pm (utc) on Mar. 16, 2009]

[andrewsmd]

The first one, sorry I worded it poorly. How would I do that with floating divs. I miss my server side programming everything in there is cut and dry. Thanks,

[swa66]

For the first one you don't need any floating or so, that's just how tables work on their own ...

Now, make sure you have valid html: a <br> inside a <ul> (outside the <li>) is invalid, similarly, the closing tag </ul> is mistakenly written as <ul> ...

How do I?
1. Set the notes column to fixed length where the text will wrap within the column.

set a width

2. Put the other columms text at the top?

vertical-align: top;

Your code suffers from classitis (the over-use of classes). A trick is not to add classes unless you need them, and if you do need to add names that describe the content, not how it is to be in layout.

To put it all together based on what you had above:

<!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>untitled</title>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
   }
   ul {
    padding-left: 2em;
   }
   table {
    font-weight: bolder;
    border-collapse: collapse;
   }
   td {
    border-bottom: 1px solid black;
    padding: 2em 1em 0;
    font-size: 16px;
   }
   th {
    font-size: 22px;
    text-align: left;
    padding: 1em 1em 0;
   }
   .notes {
    width: 20em;
   }
   table * {
    vertical-align: top;
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Updated:</th>
    <th>Name:</th>
    <th>Notes:</th>
   </tr>
   <tr>
    <td>{date}</td>
    <td>{jobName}</td>
    <td class="notes">
     <ul>
      <!-- BEGIN notes -->
      <li>notes</li>
      <li>notes</li>
      <li>swap for a long text</li>
      <!-- END notes -->
     </ul>
    </td>
    <td>
     <input type="checkbox" name="{checkName}" /> delete<br />
     <a href="#">edit</a></td>
   </tr>
  </table>
 </body>
</html>

The reset of the padding and margin is to get rid of browser defaults, but they also damage how lists work, so I need to undo the damage to the ul.

[andrewsmd]

Thanks a lot, I had to change a few things but you pointed me in the right direction. I just came from a job where we had a whole front end team so I'm relatively new to making the pages look pretty.