czwartek, 2020-10-22

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

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;
  }