Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Pozorowana tabela HTML

czwartek,

Pozorowana tabela HTML

Możliwości kaskadowych arkuszy stylów są na tyle duże, że dają możliwość formowania elementów w kształt wyglądający jak zupełnie inne znaczniki. Przedstawiony przykład jest bardzo kiepski pod względem semantycznym, jednak prezentuje ogromny potencjał języka CSS. Zastosowano znaczniki section, header oraz div, ale z powodzeniem można je zastąpić innymi. Kluczowa w tym przypadku własność CSS to display. Więcej informacji o stylach CSS typowych dla tabel znajdziesz w materiale „Domyślne style CSS dla tabel”.

Przykład

Model
Data wydania
Częstotliwość
Intel Atom® Processor P5942B
luty 2020
2,20 GHz

Kod HTML

<section>
  <header>
    <div>Model</div>
    <div>Data wydania</div>
    <div>Częstotliwość</div>
  </header>
  <div>
    <div>Intel Atom® Processor P5942B</div>
    <div>luty 2020</div>
    <div>2,20 GHz</div>
  </div>
</section>

Kod CSS

  section {
    display: table;
    width: 100%;
  }
  section header,section > div {
    display: table-row;
  }

  section header div,section div div {
    display: table-cell;
    border: solid 1px #ccc;
    padding: 5px;
  }

  section header div {
    font-weight: bold;
    background: #efefef;
  }
Artykuł: Funkcjonowanie jednostek oświaty

Funkcjonowanie jednostek oświaty

Artykuł: Kontrola poprawności danych

Kontrola poprawności danych

Artykuł: Usprawnienie obsługi danych z&nbsp;formularza

Usprawnienie obsługi danych z formularza

Artykuł: PHP: Tablice wielowymiarowe

PHP: Tablice wielowymiarowe

Artykuł: Raspberry Pi

Raspberry Pi

Artykuł: Wacław Iwaszkiewicz

Wacław Iwaszkiewicz

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna