How to get table cells evenly spaced?
You can use CSS. One way is to set table-layout
to fixed
, which stops the table and its 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.
You could always just set the width of each td to 100%/N columns.
<td width="x%"></td>
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.