Tabele Formatowanie tabel

Karta pracy 2013/2014

Dokument:
http://www.plotkarka.eu/kp/formatowanie_tabel.html
Autor:
Radosław Kowaluk

Formatowanie podstawowe

Czynności wstępne

Skopiuj plik formatowanie_tabel.zip rozpakuj go do folderu WWW.

Otwórz plik formatowanie_tabel.html w przeglądarce internetowej.

Zapoznaj się ze źródłem pliku.

Obramowanie tabeli i komórek

W elemencie style dodaj kod:

<style type="text/css">
#tabela1 {
border: 1px solid rgb(102, 102, 102);
}
td, th {
border: 1px solid red;
}

Zapisz zmiany i odśwież podgląd.

Wysokość i szerokość tabeli, wyrównywanie

W elemencie style dodaj kod:

border: 1px solid rgb(102, 102, 102);
width: 80%;
height: 150px;
margin: auto;
}

Zapisz zmiany i odśwież podgląd.

Wysokość wiersza, Szerokość kolumny

W elemencie style dodaj kod:

#tabela2 tr {
height: 50px;
}
#tabela2 th {
width: 200px;
}

Zapisz zmiany i odśwież podgląd.

Wyróżnienie nagłówka, boczku tabeli

W elemencie style dodaj kod:

#tabela1 th {
background: green;
}
#tabela2 th {
color: red;
}

Zapisz zmiany i odśwież podgląd.

Wyrównywanie zawartości komórek

W elemencie style dodaj kod:

th {
padding: 5px;
}
td {
vertical-align: top;
text-align: center;
}

Zapisz zmiany i odśwież podgląd.

Położenie tytułu1 tabeli

W elemencie style dodaj kod:

#tabela2 caption {
caption-side: bottom;
}

Zapisz zmiany i odśwież podgląd.

Odstęp2 komórek

W elemencie style dodaj kod:

#tabela2 {
border-collapse: collapse;
}

Zapisz zmiany i odśwież podgląd.

Wielkość odstępu3 komórek

W elemencie style dodaj kod:

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

Zapisz zmiany i odśwież podgląd.

Styl pustych komórek4

W elemencie style dodaj kod:

border-spacing: 3px;
empty-cells: hide;
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

  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 jednosktką.
  4. Styl CSS {empty-cells:} – definiuje sposób wyświetlania pustych komórek. Wartości stylu mogą być równe: hide - ukryte, show - widoczne

Formatowanie zaawansowane

Układ tabeli5

W elemencie style dodaj kod:

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

Zapisz zmiany i odśwież podgląd.

 

Otwórz plik tabeleanonimowe.html w przeglądarce internetowej. Zapoznaj się ze źródłem pliku.

Właściwości tabeli

W elemencie style dodaj kod:

<style type="text/css">
#planlekcji {
outline: 1px solid rgb(102, 102, 102);
}
</style>

Zapisz zmiany i odśwież podgląd.

Właściwości komórek tabeli

W elemencie style dodaj kod:

td, th {
outline: 1px solid silver;
}

Zapisz zmiany i odśwież podgląd.

Właściwości wierszy tabeli

W elemencie style dodaj kod:

tbody tr {
height: 25px;
}
thead tr, tfoot tr {
height: 50px;
}

Zapisz zmiany i odśwież podgląd.

Właściwości kolumn tabeli

W elemencie style dodaj kod:

tr>td {
width: 30px;
}
#oddo {
width: 60px;
}
col {
width: 100px;
}

Zapisz zmiany i odśwież podgląd.

Właściwości nagłówka, stopki tabeli

W elemencie style dodaj kod:

thead, tfoot {
background: green;
}

Zapisz zmiany i odśwież podgląd.

Tabele anonimowe1

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ść pliki witryny na serwerze.

  1. Styl CSS {table-layout:} – definiuje układ tabeli. Wartości stylu mogą być równe: fixed - stały układ, auto - automatyczny
  2. 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)
  3. Styl CSS {speak-header:} – definiuje sposób czytania nagłówków tabeli. Wartości stylu mogą być równe: once - czytany raz, always - czytany przed każdą z komórką.