How to identify several <TD> in numerous columns 2

[gbosse]

I am trying to modify the six <td>'s in each row of a 3,600
file.
e.g.
<tr style="vertical-align: top;">
<td>1908</td><td>5 jan.</td><td>FRANK AND IRA</td><td>Saint-Jean (N.-B.) </td><td>103,253</td><td>98</td><td>S'est échoué. Île Fisherman, Booth Bay (Maine)</td>
</tr>
Is there any way I could identify each of the 3,600 <td>'s in the first column in order to make adjustments like width or position, then indentify the second row of <td>'s, etc.

If I could find some way of working with <td>'s in the first, second, etc. row individually, then using, i.e. AceHTML or other editors, modify all 3,600 rows at once, and not have to change 21,000 <td>'s

 

[Vragabond]

If you were to set width on the first column, all other columns would follow suit. If you need to set text alignment, font weight and others, it becomes more difficult.

There used to be this handy tag called col, which allowed you to set specific attributes to each column, but it is unfortunately not supported anymore, although there were rumors that it will be reintroduced in HTML5.

Finally, you may use sibling selectors in CSS to set different attributes for each column. This will work in modern browsers, but will probably fail in IE6. Sibling selectors look like this:

/* General column specification */
td {
  color: red;
}

/* second column */
td + td {
  color: blue;
}

/* third column */
td + td +td {
  color: green;
}

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[grbosse]

Vragabond

The first solution doesn't work well as none of the columns are of the same width.

However, the sibling selector solution seems to solve the problem completely. There might be other ways, but siblings the best solution yet.

Many thanks,

grbosse

 

[ChrisHunt]

Be aware that sibling selectors won't work in older browsers like IE6 - and there are still a lot of IE6 users out there.

The brute-force-and-ignorance method would be to give each <td> a class:

<tr>
<td class="c1">1908</td><td class="c2">5 jan.</td><td class="c3">FRANK AND IRA</td><td class="c4">Saint-Jean (N.-B.) </td><td class="c5">103,253</td><td class="c6">98</td><td class="c7">S'est échoué. Île Fisherman, Booth Bay (Maine)</td>
</tr>
<tr>
<td class="c1">1909</td><td class="c2">7 jan.</td><td class="c3">BLAH</td><td class="c4">Bloggs (F.) </td><td class="c5">103,298</td><td class="c6">99</td><td class="c7">Collins, London</td>
</tr>

That's quite a lot of extra text, but if you're building the table dynamically that needn't be a problem (I hope you aren't typing in 3600 rows manually!).

Depending on what you want to change, you might not have to add the classes to every row. If it's just width, you only need put the classes into the first row - since the widths you define there will automatically apply to all the other rows too. It might be appropriate to use <th> instead of <td> for some columns, giving you something else to hang CSS rules on.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[grbosse]

Chris,

This project originated from a 192 page list of some 3,600 shipwrecks covering 1882 to 1990, in which each row has 7 columns. I can't change that much, as it was printed in 1990 or so, scanned and converted to Excel spreadsheet last winter and converted to HTML format. I only have two rows to change the width by a few pixels, so perhaps your suggestion of giving those columns a class. I'll work on that in the coming days and see what turn us. Many thanks

grbosse

 

[ChrisHunt]

It makes life easier if you're able to distinguish beween horizontal rows of cells and vertical columns.

If you want to set the width of a column, you just need to identify one of the <td>s in it (I'd still suggest using a class for this) and give it a width. All the other <td>s in the column will conform to this width. Probably. You may get some variation between browsers in terms of what they do if the specified width is too narrow for the cell's content.

If the reason that you want to adjust the cell widths is to add some space between the cell borders and the data they contain, you should probably be adjusting the padding values rather than the widths. I usually find it easier to let the browser work out the widths and not to tinker with them.

Incidentally, ideally, you'd slurp that spreadsheet into a database, and then slice and dice the output as required using a server-side language like php. But that's rather outside the scope of this thread...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[grbosse]

Chris,

Unfortunately, this project involved several others, in which I was a late comer. Consequently, I only have the HTML result from the Excel spreedsheet to work with. However, I take up your suggestions with all due respect and will experiment on using a class.

grbosse