Tabele Formatowanie tabel

Karta pracy 2013/2014

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

Ćwiczenia

 

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

Obramowanie tabeli

W elemencie style dodaj kod:

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

Obramowanie komórek

W elemencie style dodaj kod:

td, th {
border: 1px solid red;
}

Wysokość i szerokość tabeli

W elemencie style dodaj kod:

#tabela1 {
border: 1px solid rgb(102, 102, 102);
width: 80%;
height: 150px;
}

Wysokość wiersza

W elemencie style dodaj kod:

#tabela2 tr {
height: 50px;
}

Szerokość kolumny

W elemencie style dodaj kod:

#tabela2 th {
width: 200px;
}

Wyróżnienie nagłówka tabeli

W elemencie style dodaj kod:

#tabela1 th {
background: green;
}

Wyróżnienie boczku tabeli

W elemencie style dodaj kod:

#tabela2 th {
color: red;
}

Wyrównywanie

W elemencie style dodaj kod:

tr {
vertical-align: top;
text-align: center;
}

Położenie tytułu1

W elemencie style dodaj kod:

#tabela2 caption {
caption-side: bottom;
}

Odstęp2

W elemencie style dodaj kod:

#tabela2 {
border-collapse: collapse;
}

Wielkość odstępu3

W elemencie style dodaj kod:

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

Styl pustych komórek4

W elemencie style dodaj kod:

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

Układ tabeli5

W elemencie style dodaj kod:

#tabela3 {
border-collapse: separate;
border-spacing: 3px;
empty-cells: hide;
table-layout: fixed;
}

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
  5. Styl CSS {table-layout:} – definiuje układ tabeli. Wartości stylu mogą być równe: fixed - stały układ, auto - automatyczny

Tabele anonimowe

 

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>

Właściwości komórek tabeli

W elemencie style dodaj kod:

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

Właściwości wierszy tabeli

W elemencie style dodaj kod:

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

Właściwości kolumn tabeli

W elemencie style dodaj kod:

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

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

W elemencie style dodaj kod:

thead, tfoot {
background: green;
}

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

Wgrywanie plików na serwer

Umieść pliki witryny na serwerze.

Tytuł dodatkowego ćwiczenia

Polecenie

kod

Polecenie

  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)