Tabele Tabele w CSS

Karta pracy 2016/2017

Dokument:
http://www.plotkarka.eu/kp/css-tables.html
Autor:
Radosław Kowaluk

Formatowanie tabel

Czynności wstępne

Utwórz plik css-tables.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Formatowanie tabel</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Położenie tytułu tabeli1

W elemencie style dodaj kod:

#tabela1 caption {
caption-side: bottom;
}

W elemencie body dodaj kod.

<table id="tabela1" border="1">
 <caption>Etykieta</caption>
 <tr><td>A1</td><td>B1</td></tr>
 <tr><td>A2</td><td>B2</td></tr>
 <tr><td></td><td></td></tr>
</table>

Zapisz zmiany i odśwież podgląd.

Odstęp2 komórek

W elemencie style dodaj kod:

#tabela1 {
border-collapse: collapse;
}

Zapisz zmiany i odśwież podgląd.

Wielkość odstępu3 komórek

W elemencie style dodaj kod:

#tabela1 {
border-collapse: separate;
border-spacing: 3px;
}

Zapisz zmiany i odśwież podgląd.

Styl pustych komórek4

W elemencie style dodaj kod:

table {
empty-cells: hide;
}

Zapisz zmiany i odśwież podgląd.

Układ tabeli5

W elemencie style dodaj kod:

empty-cells: hide;
table-layout: fixed;
}

Zapisz zmiany i odśwież podgląd.

Wyrównywanie w pionie 6

W elemencie style dodaj kod.

td {
vertical-align: middle;
}

Zapisz zmiany i odśwież podgląd.


  1. Styl CSS {caption-side:} – definiuje położenie tytułu tabeli. Wartości stylu mogą być równe: top – nad tabelą, bottom – pod tabelą. W CSS2 dostępne były wartości: left - po lewej i right - po prawej, które mają być częścią standardu CSS3;
  2. Styl CSS {border-collapse:} – definiuje odstęp między komórkami. Wartości stylu mogą być równe: collapse – komórki połączone, separate – komórki z odstępem;
  3. Styl CSS {border-spacing:} – definiuje wartość odstępu między komórkami. Wartość stylu jest liczba lub liczby z jednostką.
  4. Styl CSS {empty-cells:} – definiuje sposób wyświetlania pustych komórek. Wartości stylu mogą być równe: hide - ukryte, show - widoczne
  5. Styl CSS {table-layout:} – definiuje układ tabeli. Wartości stylu mogą być równe: fixed - stały układ, auto - automatyczny
  6. Styl CSS {vertical-align:} – definiuje wyrównywanie zawartości komórki w pionie. Wartości stylu mogą być równe: baseline - do linii bazowej, top - do górnej krawędzi, bottom - do dolnej krawędzi, middle - do środka.

Tabele anonimowe

W elemencie body dodaj kod.

<div id="tabela">
 <div id="etykieta">Etykieta tabeli anonimowej</div>
  <div id="naglowek">
   <div class="wiersz">
<span class="komorka">Komórka nagłówka tabeli</span>
<span class="komorka">Komórka nagłówka tabeli</span>
   </div>
  </div>
  <div id="dane">
   <div class="wiersz">
<span class="komorka">Komórka tabeli</span>
<span class="komorka">Komórka tabeli</span>
  </div>
  <div class="wiersz">
<span class="komorka">Komórka tabeli</span>
<span class="komorka">Komórka tabeli</span>
  </div>
 </div>
</div>

Wyświetlanie elementu jako 1

W elemencie style dodaj kod:

#tabela {
display: table;
}
#etykieta {
display: table-caption;
}
.wiersz {
display: table-row;
}
.komorka { 
display: table-cell;
border: 1px solid silver;
padding: 10px;
}
#dane {
display: table-row-group;
border: 2px solid red;
}
#naglowek {
display: table-header-group ;
background: green;
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css-tables.html na serwerze po sprawdzeniu poprawności.

Zadanie

Zastosuj poznane wiadomości w swojej witrynie.


  1. Styl CSS {display:} – definiuje właściwości elementu. Wartości stylu mogą być równe:
    table - tabela (element blokowy table),
    inline-table - tabela (element liniowy table),
    table-row - wiersz tabeli (element tr),
    table-header-group - grupa nagłówka (element thead),
    table-row-group - grupa wierszy (element tbody),
    table-footer-group - grupa stopki tabeli (element tfoot),
    table-column - kolumna tabeli (element col),
    table-column-group - grupa kolumn (element colgroup),
    table-cell - komórka tabeli (elementy td, th),
    table-caption - etykieta tabeli (element caption)