Originally Posted by
Sega
Personally I use CSS.
Where are your TH? The entire THEAD should usually be TH with scope="col"
First order of business is getting the right markup in there. Because the top select grabs all of them, I'd give it TH and scope="row" like it's kin. In TBODY I'd also make them TH with scope="row" so you know that they effect the entire row.
Code:
<table>
<thead>
<tr>
<th scope="col">
<input type="checkbox" name="selectAll" id="selectAll" />
</th>
<th scope="col">Flag</th>
<th scope="col">From</th>
<th scope="col">Subject</th>
<th scope="col">Date</th>
</tr>
</thead><tbody>
<tr>
<th scope="row">
<input type="checkbox" name="selectRecord1" id="selectRecord1" />
</th>
<td>Nancy Lee</td>
<td>Re:Surprise Party this Saturday</td>
<td>2012-05-17 21:08:11</td>
</tr><tr>
<th scope="row">
<input type="checkbox" name="selectRecord2" id="selectRecord2" />
</th>
<td>Betty Boop</td>
<td>Re:Surprise Party this Saturday</td>
<td>2012-05-17 21:09:00</td>
</tr><tr>
<th scope="row">
<input type="checkbox" name="selectRecord3" id="selectRecord3" />
</th>
<td>Bimbo</td>
<td>Will there be cake</td>
<td>2012-05-17 21:09:51</td>
</tr><tr>
<th scope="row">
<input type="checkbox" name="selectRecord4" id="selectRecord4" />
</th>
<td>GlaDOS</td>
<td>Anyway this cake is great! It's so delicious and moist!</td>
<td>2012-05-17 21:11:33</td>
</tr>
</tbody>
</table>
That way you can make all TH text-align:center; and all TD text-align:left; -- and all TH bold.
I MIGHT consider classes on the THEAD's TH just to set widths that will be obeyed everywhere, and maybe classes on some elements to set things like white-space:nowrap on the DATE. If you don't care about IE8/earlier you could use nth-child instead of classes, if you don't care about IE6/earlier you could use sibling selectors instead as well.
I'd also perhaps consider moving the message title BEFORE the poster, and making that a TH, since it's kind of what the rest of the data is about... I might even consider.... yeah, this would be better.
Code:
<table id="messages" cellspacing="1">
<thead>
<tr>
<th scope="col" class="message">
<input type="checkbox" name="selectAll" id="selectAll" />
<label for="selectAll">Select All</label> - Message:
</th>
<th scope="col">From</th>
<th scope="col">Date</th>
</tr>
</thead><tbody>
<tr>
<th scope="row" class="message">
<input type="checkbox" name="selectRecord1" id="selectRecord1" />
<label for="selectRecord1">
Re:Surprise Party this Saturday
</label>
</th>
<td>Nancy Lee</td>
<td>2012-05-17 21:08:11</td>
</tr><tr>
<th scope="row" class="message">
<input type="checkbox" name="selectRecord2" id="selectRecord2" />
<label for="selectRecord2">
Re:Surprise Party this Saturday
</label>
</th>
<td>Betty Boop</td>
<td>2012-05-17 21:09:00</td>
</tr><tr>
<th scope="row" class="message">
<input type="checkbox" name="selectRecord3" id="selectRecord3" />
<label for="selectRecord3">
Will there be cake
</label>
</th>
<td>Bimbo</td>
<td>2012-05-17 21:09:51</td>
</tr><tr>
<th scope="row" class="message">
<input type="checkbox" name="selectRecord2" id="selectRecord2" />
<label for="selecctRecord4">
Anyway this cake is great! It's so delicious and moist!
</label>
</th>
<td>GlaDOS</td>
<td>2012-05-17 21:11:33</td>
</tr>
</tbody>
</table>
until you have semantic markup and logical structure, it's hard to say how to style it -- once you have them, you should have all the CSS hooks you need, it should come naturally, and it should even look decent CSS off.
Note I'd keep the cellspacing since FF is still a re-re about the border-spacing property for tables.
The CSS is then a simple:
Code:
#messages {
width:100%;
}
#messages,
#messages td,
#messages th {
border:1px solid #000;
}
#messages td,
#messages th {
padding:0.2em 0.4em; /* always looks better with a bit more padding */
}
#messages td {
width:1%;
white-space:nowrap;
text-align:center;
}
#messages tbody th {
font-weight:normal;
}
#messages .message {
text-align:left;
}
Though I have no idea what that input above the table is -- might be you want to drop the border on the table, put a div or fieldset around all of it, and put the outer border on that -- since that element looks like it has NOTHING to do with the table.
Have a look at this old, old OLD example of mine showing how to style a table with no classes needed 
http://battletech.hopto.org/html_tut...leExample.html
(admittedly, it needs SCOPE)
Reply With Quote
- for now...
Bookmarks