Label whole column for radio-buttons in table

Question

I have a HTML table with several rows and columns and one radio-button in each column. I would like to make it possible to click in any row of the table to select the radiobutton in that column. I know it can be accomplished with the label-tag, by using javascript or some kind of CSS3.

But I would like to know if there is any pure HTML-way to do this? Without adding a label-tag for each cell in the table and not using javascript or CSS.

Because the table has like 15 rows and 10 columns, so it doesn't feel right to add 150 label-tags in the table and it would be nice not to have to rely on javascript or CSS3 that may not be supported or activated in all browsers.

I have read about the colgroup- and col-tags in HTML, but it doesn't seem they can add HTML like a label-tag for all cells in a column.

Answer 1

You should be able to add this feature with JavaScript. Add a click event to the whole <tr> in which you toggle the form field. I recommend using jQuery because it will (1) make this task a lost simpler, and (2) make your solution more likely to work across different browsers & versions.