witia.jogger.pl

Poniższy tekst jest tłumaczeniem artykułu "Slick tables with css 3 selectors", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Eric Shepherd. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Ten artykuł i demo otrzymaliśmy dzięki uprzejmości Ivana Enderlina, autora frameworka HOA i doświadczonego webdevelopera.

Jest to artykuł, który opisuje poniższe demo, pokazujące zastosowanie selektorów CSS3, wprowadzonych w Firefoksie 3.5, do łatwego tworzenia eleganckich tabel.

Zobacz demo | Selektory CSS3 dla szybkich i ładnych tabel

Podstawowy kod HTML tabeli

Rozpoczniemy od napisania prostego kodu HTML tabeli. Uwaga: nie mamy żadnych atrybutów class ani id, co czyni tę metodę tak interesującą:

<table>
  <thead>
    <th>...</th>
    ...
    <th>...</th>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
      <td>...</td>
    <tr>
    ...
    <tr>
      <td>...</td>
      ...
      <td>...</td>
    <tr>
  </tbody>
</table>

A teraz napiszmy trochę kodu CSS, by nadać prostemu układowi tabeli nieco elegancji:

table {
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}

Użycie własności border-spacing, border-radius i box-shadow pozwala w szybki i łatwy sposób upiększyć nieco tabelę.

Pierwszy wybór

Teraz chcielibyśmy nadać style wszystkim znacznikom th. Z selektorami CSS jest to proste:

th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}

Przypomnienie: jeśli napiszemy table th, to wybierzemy wszystkie elementy th będące potomkami elementu table, zaś jeśli napiszemy thead > th, to wybierzemy wszystkie elementy th, które są bezpośrednio dziećmi elementu thead. To gwoli przypomnienia

Bardziej skomplikowany wybór

Znacznik th reprezentuje nagłówek tabeli. Chcielibyśmy wybrać pierwszy nagłówek tabeli. Hmmm.. może powinniśmy użyć pseudoklasy first-of-type. Reprezentuje ona element, który jest pierwszy w rodzeństwie elementów swojego typu na liście dzieci jego elementu nadrzędnego. Zatem mamy teraz:

 
th:first-of-type {
font-weight: bold;
font-style: italic
}

Parzyste i nieparzyste wiersze

Powtarzającym się problemem z tabelami jest to, jak wybrać parzyste i nieparzyste wiersze. Rozwiązaniem jest pseudoklasa nth-child(). Wszystkie te pseudoklasy rozpoznają składnię an+b - aby wybrać wszystkie parzyste elementy, należy użyć 2n; aby wybrać wszystkie nieparzyste elementy, należy użyć 2n+1, aby wybrać każdy co trzeci element, należy użyć 3n.

Nadajmy zatem style parzystym i nieparzystym wierszom:

 
tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}
 
tr:nth-child(even) {
    color: #6a3d37
}

Dopełnienie pierwszej i ostatniej kolumny

Teraz możemy ustawić dopełnienie (padding) pierwszej i ostatniej kolumny. Ponownie przypominam, że nie mamy żadnych klas ani identyfikatorów, oraz że liczba kolumn jest nieznana.

Rozwiązaniem są pseudoklasy first-of-type i last-of-type. Wybieramy wszystkie pierwsze i ostatnie elementy th i td w poniższy sposób:

 
th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}

 
th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}

Dwa ostatnie wiersze

Teraz połączymy wiele pseudoklas (i wprowadzimy jedną nową).

Załóżmy, że chcielibyśmy wybrać wiersz numer 1, numer 4 i numer 7. Wyrażenie matematyczne nie jest tak proste, jak byśmy tego oczekiwali. Rozwiązaniem jest podzielenie naszych wierszy na grupy złożone z trzech wierszy w następujący sposób: 3n. Ale w ten sposób zostaną wybrane wiersze numer 3, 6 i 9. W tych grupach wybierzemy pierwszy element przy pomocy 3n+1 (lub 3n-2, jeśli ktoś chce skomplikować sprawę).

To dobrze, ale wybrany będzie wiersz w naszych dwóch ostatnich półprzezroczystych wierszach. Najlepiej byłoby powiedzieć: "wybierz pierwszy wiersz każdej grupy trzech wierszy, z wyjątkiem ostatniego wiersza (będzie wybrany, ponieważ ostatni wiersz jest siódmym wierszem)". To proste. Użyjemy pseudoklasy not połączonej z pseudoklasą last-child (lub last-of-type, która również tutaj zadziała).

A zatem:

 
tr:nth-last-child(-n+2) {
    opacity: .75
}
 
tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}

Końcowy kod źródłowy:

table {
    display: table;
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}
 
th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}
 
    th:first-of-type {
        font-weight: bold;
        font-style: italic
    }
 
tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}
 
tr:nth-child(even) {
    color: #6a3d37
}
 
th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}
 
th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}
 
tr:nth-last-child(-n+2) {
    opacity: .75
}
 
tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}

Zobacz demo krok po kroku.

8 komentarzy