I'm trying to style a table with CSS and having a nightmare doing so:
http://bit.ly/ccxu3V

I thought <td> and <th> elements always stayed 'in line' with each other? But the 3 <th> elements are not resizing based on the cells below them.

Also, I've set:

<th class="first" colspan="2">

On the first <th>, but it just seems to be ignoring the colspan completely!

Does anyone have any ideas what might be wrong?

Thanks

Strange behaviour - can you post a link or an example?

Yup, see the bit.ly link above.

Cheers.

bortram.css line 58, get rid of tr display:block;

Thanks that appears to fix the colspan issue etc, but then no matter what widths I apply to any <tr> elements they seem to be completely ignored! When I need them to stretch the full width of the containing <div>

Hmmmm

Hooray! Someone's actually using a table for what it's intended for--data!

A colspan of 2, when the rest of your table has four data elements per row, will automatically squish your header to what? The first two columns. Make sense?

And, actually, you only apply colspan to a <td> that you want to take up more than one column. Otherwise, the <td>s naturally follow how many blocks you're putting in the grid.

You also didn't put a table opening in there.

tim

what are you talking about serandfae? <tr><th>---</th></tr> is perfectly valid markup! th is a table header cell, not row.

The correct markup for a table header row is:-

<table>
  <thead>
    <tr>
      <th>Header cell</th>
    </tr>
  </thead>
</table>

pealo86: tr cannot have width. Apply width to table instead. If you want tr's to have differing widths, then you shouldn't use tables.

The parent container, #container .grid_12 has a width of 700px. A width applied to .grid_12 table of 100% will make the table expand to fill the width of .grid_12 minus border, padding and margin:-

.grid_12 table { width: 100%; }

Corrected, regarding the <th>, by the way, <thead>, <tbody>, <tfoot> aren't universally supported. Why add in markup for fluff's sake?

There's nothing wrong with the remainder, and the most important thing: Where's the opening element for the table? What he's asking is why the headers aren't going above the things they're supposed to be over. Answer, old school: Put an empty cell in before the headings, take out the colspan, position within the cells as necessary, done.

tim

It's not fluff, it's semantic html. A data table usually has a row of column names that place the data that follows into context, the table header.

What I would like to know is how that page validates as xhtml WITHOUT the opening table tag. Is the opening table tag optional I wonder?

http://validator.w3.org/check?verbos...%2Ffor-sale%2F

No, <table> tag is necessary. Without <table> it is not valid code.

It did validate, though, but it shouldn't have. Probably a glitch in the validator, maybe it associated the open div with the closing for the table, but that's a guess.

However, even if all the markup was semantically correct, that does not mean that everything will function how you want it to. Validation is a tool to help you along, nothing more.

<table> is indeed necessary, and the likely culprit of the odd behavior, and the rest of the solution is still: Put an empty cell in before the headings, take out the colspan, position within the cells as necessary.

tim

Can you post a link.

Thanks for the tips. I managed to style it using <thead>, <tbody> tags etc.

Although with regards to the <table> opening tag, it is in there But in my code view in FF it's shifted to the right, so you might have missed it.

Glad u got it sorted. It's a good looking table. Could use some very subtle alternating row background colours though....