Proposal for table-cell column/row based selection mechanism

CSS selector syntax ought to have a mechansim for selecting table cells 
based on row and column, taking rowspan and colspan attributes into account 
when determining a cell's row and column coordinate ranges.

I propose something vaguely along the lines of the following (i.e. having 
the power and flexibility shown below, if not the exact syntax):

-----------------------------------

td[3]  {background-color:green}    /* 4th column (0 based col index) of 
"myStyledTable" is green (including any cells SPANNING this column) */
td[3][6]  {color:red}    /* table cell at or covering column 3, row 6 has 
color red */
td[5, 7]  {background-color:blue}    /* columns 5 and 7 are blue */
td[][0-2]  {background-color:blue}    /* rows 0 to 2 inclusive are blue */
td[*][0-2]  {background-color:blue}    /* rows 0 to 2 inclusive are blue */
td[][@7]  {background-color:blue}    /* 8th row in any <THEAD>, <TFOOT>, or 
<TBODY> section is blue ('@' symbol means row numbering by section rather 
than over whole table) */


/* cells belonging to a <COL> or <COLGROUP> element with class "colClass1" 
are red: */
td[.colClass1]  {background-color:red}



/*  The following selects both <TD> and <TH> elements in the intersection of 
the following columns:

-- <COL> or <COLGROUP> elements with class "colClass2"
-- <COL> or <COLGROUP> elements with ID "colID1"
-- columns numbered 11 through 15 inclusive

with the following rows:

-- rows who's <TR> element has class "myRowClass"
-- rows who's <TR> element has ID "myRowID"
-- rows numbered 20 through 22 inclusive */
*[.colClass2, #colID1, 11-15][.myRowClass, #myRowID, 7, 20-22] 
{background-color:red}


/* The following selects only <TD> cells that BEGIN in column 3 (i.e. who's 
left edge is the left edge of column 3)
td[3~] {border:2px solid black}


/* The following selects only <TD> cells that END in column 7 (i.e. who's 
right edge is the right edge of column 7)
td[~7] {border:2px solid black}

/* The following selects only <TH> cells that begin in column 5 and have 
COLSPAN=3 */
th[5~8] {border:2px solid black}




/* The following selects both <TD> and <TH> cells that:

-- begin in a column belonging to a <COL> or <COLGROUP> element with class 
"leftEdge"
-- end either at column 13 or in columns ranging from 17 through 21 
inclusive, or in a column who's <COL> or <COLGROUP> element has ID 
"rightEdge"

AND

-- span any row who's <TR> element has class "sytledRow", OR
-- end at  row 35 (i.e. they include row 35 as the last row that they span), 
OR
-- are completely contained within a <TR> element whose ID is "thinRow" 
(i.e. they'd need to have ROWSPAN=1) */
*[.leftEdge~13, .leftedge~17-21, .leftEdge~#rightEdge][.styledRow, ~35, 
#thinRow~#thinRow] {font-face:bold}


-----------------------------------

The syntax need only apply to <TD> and <TH> elements (* for both) - it could 
be ignored for all others.

Implicit in this syntax is the idea that each <TD> or <TH> element knows its 
rectangular grid cooridinates in the table - left and right column index, 
and top and bottom rows; and that it knows or can quickly discover which 
<COL> and <COLGROUP> elements it falls under, as well as which <TR> elements 
it intersects (starting with it's parentNode, but there may be more if it 
has ROWSPAN>1).

Thus, there should probably be DOM properties for all these things, as well 
as methods for getting collections of cells in intersecting row and column 
ranges, etc..

This information is implicit in HTML table structure, so should be available 
before any CSS cascade begins.

Any comments?


-- Dean Trower
   dean [at] omnivision [a dash here, not a dot] au [dot] com

Received on Tuesday, 11 October 2005 09:56:07 UTC