wtorek, 2020-10-20

Domyślne style CSS dla tabel

Dobrym punktem wyjścia do nauki stylów CSS dla tabel jest zmiana domyślnych własności. W poniższym zestawieniu zaprezentowano domyślne style dla najważniejszych elementów tabeli stosowane w przeglądarce Google Chrome (wersja 86.0.4240.75).

Właściwość display

Właściwość display określa sposób wyświetlania elementu. Jego niektóre możliwe wartości to:

• inherit – ustawia wartość tej własności na odpowiadającą rodzicowi;
• block – element będzie wyświetlony w sposób blokowy (odstęp z góry i z dołu);
• inline – element będzie wyświetlony jako liniowy, sąsiadująco z innymi;
• inline–block – element blokowy zachowujący się jak liniowy (jest opływany otaczającą treścią);
• none – element i jego elementy potomne nie będą wyświetlane;
• list–item – element wyświetlany jest jako element listy (<li>);
• table – element wyświetlany jest jako tabela HTML;
• table–row – wiersz tabeli;
• table–cell – komórka tabeli;
• table–column–group – grupa kolumn tabeli;
• table–column – kolumna tabeli;
• table–caption – podpis tabeli;

Właściwość border-collapse

Własność border-collapse określa sposób wyświetlania obramowań. Jej możliwe wartości to:

• inherit – ustawia wartość tej własności na odpowiadającą rodzicowi;
• separate – obramowania są rozdzielone;
• collapse – obramowania są połączone;

Właściwość border-spacing

Własność border-spacing określa odległość między komórkami tabeli. Jest stosowana jedynie wtedy, gdy właściwość border-collapse ma wartość „separate”. Możliwe wartości border-spacing to:

• inherit – ustawia wartość tej własności na odpowiadającą rodzicowi;
• podanie jednakowej odległości w pionie i w poziomie, np. border-spacing:20px;
• podanie odległości w poziomie, a następnie w pionie, np. border-spacing:20px 10px;

Właściwość vertical-align

Własność vertical-align określa wyrównanie pionowe elementów inline lub komórek tabeli. W przypadku tabeli jej najczęściej wykorzystywane wartości to top, bottom oraz middle.

Właściwość box-sizing

Własność box-sizing wpływa m.in. na właściwości width oraz height i określa, w jaki sposób obliczana jest wysokość i szerokość elementów. Jej możliwe wartości to:

• content-box – wartość domyślna, zdefiniowane rozmiary elementu uwzględniają tylko zawartość, pomijając jego obramowanie (border), dopełnienie (padding) oraz marginesy (margin);
• padding-box – width i height zawierają rozmiar dopełnienia, pomijając obramowanie i marginesy;
• border-box – width i height zawierają rozmiar dopełnienia i obramowania, pomijając marginesy;

Kod HTML przykładowej tabeli

Poniżej zamieszczono kod HTML wykorzystany w edytorze ćwiczeniowym.

<table>
    <thead>
    <tr>
        <th>Model</th>
        <th>Data wydania</th>
        <th>Rdzenie</th>
        <th>Częstotliwość</th>
        <th>Cache</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Intel Atom® Processor P5942B</td>
        <td>luty 2020</td>
        <td>16</td>
        <td>2,20 GHz</td>
        <td>18 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5931B</td>
        <td>luty 2020</td>
        <td>12</td>
        <td>2,20 GHz</td>
        <td>13,5 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5962B</td>
        <td>luty 2020</td>
        <td>24</td>
        <td>2,20 GHz</td>
        <td>27 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5921B</td>
        <td>luty 2020</td>
        <td>8</td>
        <td>2,20 GHz</td>
        <td>9 MB L2 Cache</td>
    </tr>
    </tbody>
</table>

Ćwiczeniowy edytor CSS

Poniżej znajduje się edytor CSS, który pozwoli poeksperymentować ze stylami CSS dla tabeli. Kodu HTML nie można zmienić. Startowe style zamieszczono tylko dla demonstracji sposobu działania edytora.