Dane tabelaryczne

Traktowanie całych rzędów jako jeden element

Podświetlanie całego rzędu Bug w IE6

Można wykorzystać selektory :hover i dziecka, aby uzyskać ten efekt:

  tr:hover > td {background:red;}

Domyślnie tabele mają odstęp między komórkami, co powoduje, że tło będzie miało przerwy. Na to pomaga:

 table {border-collapse:collapse;}
 lub
 table {border-spacing:0;}

Jest jeszcze kilka sposobów na zmianę wyglądu tabel.

Cały rząd jako jeden odnośnik

Ponieważ odnośnikielementami liniowymi, nie mogą otaczać całych rzędów tabel. Istnieje na to kilka obejść.

Wiele blokowych odnośników

Treść każdej komórki tabeli należy otoczyć odnośnikiem. Wszystkie odnośniki z wyjątkiem jednego w każdym rzędzie muszą mieć atrybut tabindex="-1", żeby nie przeszkadzały w nawigacji z klawiatury.

 <tr>
   <td><a href="">raz</a></td>
   <td><a href="" tabindex="-1">dwa</a></td>
   <td><a href="" tabindex="-1">trzy</a></td>
 </tr>

Żeby odnośniki zajmowały całą komórkę, należy je uczynić blokowymi i przenieść odstępy z komórki do odnośnika:

 table {border-collapse:collapse;}
 td {padding:0;}
 td > a {padding:4px;display:block}

Jeden odnośnik i skrypty Bug w IE

Dodawanie wielu odnośników zwiększa objętość kodu, dlatego czasem lepiej jest zrobić jeden i wspomóc się skryptem:

 <tr onclick="this.getElementsByTagName('a')[0].click()">
   <td><a href="">raz</a></td>
   <td>dwa</td>
   <td>trzy</td>
 </tr>

Oczywiście nie trzeba dodawać onclick do każdego <tr> z osobna, tylko można to zrobić „hurtem” za pomocą DOM i przypisywania funkcji obsługujących zdarzenia przez JavaScript.

 var i,tr = document.getElementsByTagName('tr'); /* znajdz rzędy */
 for(i=0; i<tr.length; i++) /* i dla każdego z nich... */
   tr[i].addEventListener('click', function(){  /* przypisz funkcję */
       this.getElementsByTagName('a')[0].click()  /* która znajdzie i „kliknie” pierwszy <a> */
       },false);

skrypt pisany „z palca” = nie testowałem

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.


Zmodyfikowano: 30.08.2006, 01:00