Alternating colours in table rows

[wkenny]

I modified a table to have alternating background colours in each table row. I use an external css and class name to do this like so:

<tr class="c1">
<td class="n1">Name l</td>
<td class="n1">999 222 441</td></tr>

<tr class="c2">
<td class="n1">Name 2</td>
<td class="n1">312 441</td></tr>

When I uploaded there was a noticeable increase in page load time compared to when I had just one colour. Does the browser have to go back to the server every time it encounters "class =" to get class definitions?

Also my table def inline is:

<table style=" font-size: 12px;
border-style: none;
cellspacing: 0;
cellpadding: 0;
align: left;
width: 100%;
filter:
;">

but I still get borders. What am I doing wrong?

Thanks in advance.

[jscheuer1]

There should be no noticeable change in load time due to css colors. Border-style refers to solid, dotted or dashed (and I think hidden). You want border:none. Cellpadding isn't a property of tables in style, apply padding:0 to the td selector. Cellspacing is a property but, it is written with a hyphen (cell-spacing). If what you are going for is a real bare bones table, you may also want to set border-collapse:collapse. Align is not a css property, default element alignment though, is left. Filter is a css property but, there is much more to it than that and it is only for IE5+. Putting this all together as it would appear on an external stylesheet:

table {
border:none;
cell-spacing:0;
width:100%;
border-collapse:collapse;
font-size:12px;
}

td {
padding:0;
}

I would suggest using em's rather than px's as units for font-size, you will need a lot lower number though try 1.2em to start. Using em's will let folks stuck with IE resize the text if they cannot see it or if it is too big.

[mwinter]

I use an external css and class name to do this like so:

<tr class="c1">
<td class="n1">Name l</td>
<td class="n1">999 222 441</td></tr>

Are those really the class names you use? You might want you to do yourself a favour and make them meaningful. You may know now what c1 or n1 is when you look through your style sheet, but you may not in future.

When I uploaded there was a noticeable increase in page load time compared to when I had just one colour. Does the browser have to go back to the server every time it encounters "class =" to get class definitions?

No. The browser just needs to download and parse the style sheet once. However, if your style sheet is very large or highly complex, that might take a little more time, but it should be insignificant. The cause is probably something else.

For instance, table layouts can take longer to load because the browser has to either wait for all the information before it can start rendering, or alternatively, it must keep adjusting the layout if incoming data requires more space than has already been allocated.

Also my table def inline is:

<table style=" font-size: 12px;
border-style: none;
cellspacing: 0;
cellpadding: 0;
align: left;
width: 100%;
filter:
;">

but I still get borders.

You shouldn't as borders are only included if you request them in some way. What aren't you showing us (provide a URL if you can).

What am I doing wrong?

Well, you should avoid inline style attributes if you can. If these declarations do apply to this table only, give it an id attribute and export the rule into your external style sheet. John commented on other problems.

Border-style refers to solid, dotted or dashed (and I think hidden).

There are additional styles, and none is one of them.

You want border:none.

That is, in the end, equivalent and the default (as I said above). That shorthand declaration expands to:

border-color: color;
border-style: none;
border-width: medium;

where color is the computed (current) foreground colour for the element, as specified or inherited in the color property. By the way, these are also shorthand values and would expand themselves, but there's not much point in doing that here.

Cellspacing is a property but, it is written with a hyphen (cell-spacing).

No, it isn't. The cellspacing attribute is just that - a HTML attribute. In a style sheet, it is the equivalent of cell margins.

I would suggest using em's rather than px's as units for font-size, you will need a lot lower number though try 1.2em to start. Using em's will let folks stuck with IE resize the text if they cannot see it or if it is too big.

I wouldn't, though John's intention is a good one. Use percentages instead (and preferably 100% of the default font size). See a previous discussion for why em font sizes should be avoided. Perhaps I should emphasise that the IE bug isn't solely evident when resizing; that just makes it much worse.

Mike

[jscheuer1]

Not sure where I saw that cell-spacing thing but, I just checked my usual references and nope, not there. I probably saw it one or more places and just assumed it was css. So, let's nix the cell-spacing and use instead margin:0 for the td selector. I was thinking, the OP's 'style' was so whacked to begin with, there is no telling what the browsers would make of it:

<table style=" font-size: 12px; border-style: none; cellspacing: 0;cellpadding: 0;align: left;width: 100%;filter:;">

When you put it truly inline, 'filter' has no value specified, that could throw the whole thing out the window.

[wkenny]

Thank you both for your helpful replies.

The URL is www.estateagentsespana.com which is designed to provide a quick reference list born out of the problem I had finding such contacts when I moved here. Entry on the list is free but I am hoping agents wiill subscribe, and I am trying to provide some kind of highlighting system for tempt them to pay (making name and telephone number bold and alternating background).

I agree that class names should be more meaningful to avoid maintenance problems in the future but I felt there was a trade-off between download times and good class names. If I have classes named CompanyBold and CompanyNormal its an extra 20 characters per table row.

I used Antena Web Design Studio to build the pages but it does not have inbuilt table support. Table design code has to pasted in as HTML, so I am not sure how I could use ID.

Thanks Again

Billy

[mwinter]

The cellspacing attribute is just that - a HTML attribute. In a style sheet, it is the equivalent of cell margins.

I meant to correct this a while ago but I couldn't find the thread: the cellspacing attribute is the equivalent of the border-spacing property.

Mike

[jscheuer1]

Is that the 'border-spacing' property to be applied as style to the cell(s), or the table element? I can test this on my own but, may as well make it clear in the forum here plus, testing often doesn't show the whole story.

[mwinter]

Is that the 'border-spacing' property to be applied as style to the cell(s), or the table element?

The table element, just like the attribute. However, cell padding needs to be applied through table cells (which can allow for more flexibility.

I can test this on my own but [...] testing often doesn't show the whole story.

True, but the relevant section in the specification makes it abundantly clear. See 'Applies to'.

Mike