Konstrukcja i formatowanie tabel

Prezentacja na temat: "Konstrukcja i formatowanie tabel"— Zapis prezentacji:

1 Konstrukcja i formatowanie tabel
HTML Konstrukcja i formatowanie tabel

2 Podstawowe znaczniki Ogólne ramy tabeli <table> </table>
Wiersz tabeli <tr> </tr> Komórka w wierszu <td> </td>

3 Obramowanie tabeli Atrybut „border” – obramowanie tabeli …
<table border=’10’> <tr><td>1</td> <td>2</td><td>3</td> </tr> </table>

4 Przykład 1

5 Obramowanie komórek Atrybut „cellspacing”
<table border=‘0’, cellspacing=‘8’ … </table>

6 Przykład 2 (atrybut „cellspacing”)

7 Marginesy komórek Atrybut „cellpadding”
<TABLE BORDER=‘0’ CELLSPACING=5 CELLPADDING=15> …. </TABLE>

8 Rozmiary tabeli i komórek
Atrybut „width” Przykład: <table width=‘600’>…</table> <tr> <td width=‘200’> tekst1 </td> <td width=‘400’> tekst2 </td> </tr> </table> Uwaga: wartość atrybutu „width” podana w procentach dla znacznika <td> odnosi się do szerokości tabeli, a nie strony

9 Wyrównanie tabeli Atrybut „align” znacznika <table>
Wartości „align”: left, right, center

10 Wyrównywanie zawartości tebel
Poziome wyrównanie danych w komórkach Atrybut „align” znacznika <td> Wartości „align”: left, right, center Pionowe wyrównanie danych w komórkach Atrybut „valign” znacznika <td> Wartości „align”: top, middle, bottom

11 Kolory tabel Tło tabeli i komórek
Atrybut „bgcolor” znaczników <table> i <td> Obramowanie tabeli Atrybut „bordercolor” znacznika <table> Odcień obramowania tabeli Atrybuty „bordercolordark” i „bordercolorlight” znaczników <table>, <tr> i <td>

12 Opisywanie tabel znacznik <caption>
Podpis u góry: <caption align=‘top’>tytuł u góry</caption> u dołu: <caption align=‘bottom’>tytuł u dołu</caption> Inne atrybuty: align (left, right, center)

13 Nagłowki wierszy i kolumn
Znacznik <th> Nagłówek u góry <table cellpadding=10 width=400> <caption>wzrost produkcji w latach (w mln usd)</caption> <tr bgcolor="gray"><th>1991</th> <th>1992</th><th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr align=center><td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr> </table>

14 Nagłowki wierszy i kolumn
Znacznik <th> Nagłówek z boku <table cellpadding=10 width=400> <caption>wzrost produkcji pszenicy i jęczmienia w latach (w mln usd)</caption> <tr><td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr align=center><th>jęczmień</th> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr> <tr align=center><th>pszenica</th> <td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr> </table>

15 Łączenie komórek Atrybut „rowspan” znaczników <td> i <th>
(definiuje ilość wierszy, na które rozciąga się komórka)

16 Przykład użycia atrybutu „rowspan”
<table width=400> <caption align=top>Wzrost produkcji w latach </caption> <tr><td> </td><th>1991</th><th>1992</th><th>1993</th><th>1994</th><th>1995</th></tr> <tr align="center"><th>Pszenica</th><td rowspan=2>1950</td><td rowspan=2>2120</td><td>1380</td><td>1420</td><td>1550</td></tr> <tr align="center"><th>Jęczmień</th><td>980</td><td>1150</td><td>1320</td></tr> </table>

17 Łączenie komórek w poziomie
Atrybut „colspan” znaczników <td> i <th> (definiuje ilość kolumn, na które rozciąga się komórka)

18 Przykład użycia atrybutu „colspan”
<table width=400> <caption align=top>Wzrost produkcji pszenicy i jęczmienia </caption> <tr><td> </td><th colspan=2> </th><th colspan=3> </th></tr> <tr align="center"><th>pszenica</th><td colspan=2>2390</td><td colspan=3>4350</td></tr> <tr align="center"><th>jęczmień</th><td>800</td><td> 900</td><td>980</td><td>1150</td><td>1320</td> </tr> </table>

19 Zagnieżdżanie tabel Schemat: <table>
<tr><td></td><td></td></tr> <tr> <td> </table> </td> <td></td></tr>

20 Nagłówek, ciało, stopka <table width=50% border=5 cellpadding=5> <thead> część nagłówkowa</thead> <tbody> <tr> <td>komórka 1</td> </tr> <tr> <td>komórka 2</td> </tr> </tbody> <tfoot>to jest stopka</tfoot> </table>

21 Rozszerzenia języka html dla formatowania obramowań zewnętrznych
Atrybut „frame” znacznika <table> Wartości atrybutu „frame” void: usuwa zewnętrzne obramowanie above: wstawia górną część obramowania below: wstawia dolną część obramowania vsides: wstawia lewą o prawą część obramowania hsides: wstawia górną i dolną część obramowania lhs: wstawia lewą krawędź obramowania rhs: wstawia prawą krawędź obramowania box: wstawia wszystkie krawędzie obramowania

22 Rozszerzenia języka html dla formatowania obramowań zewnętrznych
Atrybut „rules” znacznika <table> Wartości atrybutu „rules” none: usuwa linie wewnętrzne groups: wyświetla tylko linie wewnętrzne dzielące części nagłówka, ciała i stopki tabeli oraz grup kolumn rows: wyświetla poziome linie wewnętrzne cols: wyświetla pionowe linie wewnętrzne all: wyświetla wszystkie linie wewnętrzne

23 Grupy kolumn Znacznik <colgroup span> i <col>
<COLGROUP SPAN=4 ALIGN=center> wydziela grupę 4 kolumn (span=4) i środkowanie ich zawartości. <COL ALIGN=RIGHT> wydziela 1 kolumę i wyrówuje jej zawartości do prawego marginesu.

24 Przykład <table rules=groups> <colgroup span=1 align=left> <colgroup span=4 align=center> …… Zagnieżdżanie definicji grup kolumn <colgroup>      <col align=right>      <col align=left> <colgroup>      <col align=center>