ansaurus

Question

Answer 1

A:

You could always just set the width of each td to 100%/N columns.

<td width='x%'></td>

James Van Boxtel 2010-05-18 16:34:02

(assuming you are generating this html from code.)

James Van Boxtel 2010-05-18 16:34:30

I would suggest using CSS rather than the width attribute. Just add width: ### to .PerformanceCell. You can generate a definition for .PerformanceCell in the particular HTML page with a width appropriate for that page if the width depends on the actual data or other factors.

Eric J. 2010-05-18 16:37:18

Yeah that would be cleaner.

James Van Boxtel 2010-05-18 16:55:14

Answer 2

+1 A:

In your CSS file:

.TableHeader { width: 100px; }

This will set all of the td tags below each header to 100px. You can also add a width definition (in the markup) to each individual th tag, but the above solution would be easier.

bobthabuilda 2010-05-18 16:35:03

Answer 3

+1 A:

If you want all your columns a fixed size, you could use CSS:

td.PerformanceCell
{
    width: 100px;
}

Or better, use th.TableHeader (I didn't notice that the first time around).

JYelton 2010-05-18 16:35:06

Answer 4

+4 A:

You can use CSS. One way is to set table-layout to fixed, which stops the table and it's children from sizing according to their content. You can then set a fixed width on the relevant td elements. This should do the trick:

table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}
    table.PerformanceTable td.PerformanceCell {
        width: 75px;
    }

Suggestions for for tidying up? You don't need the cellpadding or cellspacing attributes, or the TableRow and TableHeader classes. You can cover those off in CSS:

table {
    /* cellspacing */
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    /* This covers the th elements */
}
tr {
    /* This covers the tr elements */
}
th, td {
    /* cellpadding */
    padding: 0;
}

You should use a heading (e.g. <h2>) instead of <span class="Emphasis"> and a <p> or a table <caption> instead of the Source <span>. You wouldn't need the <br> elements either, because you'd be using proper block level elements.

Olly Hodgson 2010-05-18 16:36:54

+1 Nice one, I'd always wondered what table-layout did.

Chuck Conway 2010-05-18 16:41:01

Be careful, though, because setting `white-space: nowrap` will negate the `table-layout: fixed`; the cells will again expand to fit the contents. Also, if you put in an image with a width greater than the cell width, the cell will again expand. Also, you won't be able to set a height on the cells (but you never could anyway, really).

Robusto 2010-05-18 16:58:22

Very good point. text-overflow can help negate the nowrap issue though, see http://www.quirksmode.org/css/textoverflow.html

Olly Hodgson 2010-05-18 17:07:12

Answer 5

+1 A:

I'm also open to suggestion on how to tidy this up, if there are any? :-)

Well, you could not use the span element, for semantic reasons. And you don't have to define the class PerformanceCell. The cells and rows can be accessed by using PerformanceTable tr {} and PerformanceTable tr {}, respectively.

For the spacing part, I have got the same problem several times. I shamefully admit I avoided the problem, so I am very curious to any answers too.

BRUL 2010-05-18 16:37:21

For the anwers given now, I myself tried to find a fluid way of doing it.

BRUL 2010-05-18 16:39:03

Answer 6

A:

Take the width of the table and divide it by the number of cell ().

PerformanceTable {width:500px;}    
PerformanceTable.td {width:100px;}

If the table dynamically widens or shrinks you could dynamically increase the cell size with a little javascript.

Chuck Conway 2010-05-18 16:39:19

ansaurus

tags:

views:

answers:

How to get table cells evenly spaced?

related questions