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ł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły