Selektory#
Kombinator kolumny (||)#
E || F { /* deklaracje */ }Kombinator kolumny # (column combinator) służy do wskazania elementów komórek, które są w pośredniej relacji z elementami kolumn. Kombinator kolumny jest podwójnym znakiem pionowej kreski (U+07C, |) i oddziela dwa selektory złożone. Białe znaki wokół || są opcjonalne i nie mają specjalnego znaczenia.
Element reprezentowany przez pierwszy selektor złożony (z lewej strony) musi kształtować pośrednią przynależność kolumnową dla elementu reprezentowanego przez drugi selektor (z prawej strony). Przynależność do kolumn jest określana tylko i wyłącznie na podstawie semantyki języka dokumentu: czy i w jaki sposób elementy będą prezentowane nie ma żadnego znaczenia. Jeśli element komórki należy do więcej niż jednej kolumny, to jest reprezentowany przez selektor wskazujący na przynależność do każdej takiej kolumny.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
col || td {background-color: yellow;} /* Dotyczy czterech kolumn (A, B, C, D) */
col.selected || td {color: red;} /* Dotyczy tylko czwartej kolumny (D) */
</style>
</head>
<body>
<table border="1">
<col span="3"> <!-- Tworzymy kolumny A, B, C -->
<col span="1" class="selected"> <!-- Tworzymy kolumnę D -->
<tr>
<th>A1</th>
<th>B1</th>
<th>C1</th>
<th>D1</th>
<th>E1</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
</table>
<table border="1">
<col span="2" style="background-color: red;">
<col span="1" style="background-color: yellow;">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
<td>H</td>
<td colspan="2">I</td>
<td>J</td>
</tr>
</table>
</body>
</html>Druga tabela powyższego przykładu ma zaprezentować sposób, w jaki przeprowadzane jest formatowanie komórek tabeli po wykonaniu poziomego ich łączenia. Warto dokładniej przeanalizować ten proces.
Na chwilę obecną żadna aktualna przeglądarka nie obsługuje kombinatora kolumny.