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

Trzy miesiące temu na naszej stronie…

Artykuł: Przebieg wojny o Falklandy

Przebieg wojny o Falklandy

Artykuł: Jan Falkowski

Jan Falkowski

Artykuł: Krystyna Wituska

Krystyna Wituska

Artykuł: Międzynarodowy Dzień Zapobiegania Narkomanii

Międzynarodowy Dzień Zapobiegania Narkomanii

Artykuł: Windows 98

Windows 98

Artykuł: Superkomputer Bem

Superkomputer Bem

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły