Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Domyślne style CSS dla tabel

wtorek,

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).

Znacznik Domyślne style CSS
tabledisplay: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
theaddisplay: table-header-group;
vertical-align: middle;
border-color: inherit;
tbodydisplay: table-row-group;
vertical-align: middle;
border-color: inherit;
trdisplay: table-row;
vertical-align: inherit;
border-color: inherit;
thdisplay: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: -internal-center;
tddisplay: table-cell;
vertical-align: inherit;

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.

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: Konferencja teherańska

Konferencja teherańska

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dekret o ordynacji wyborczej

Dekret o ordynacji wyborczej

Artykuł: Arm Holdings

Arm Holdings

Artykuł: Podstawowe style CSS dla formularza

Podstawowe style CSS dla formularza

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna