Konstrukcja i formatowanie tabel HTML Konstrukcja i formatowanie tabel

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

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

Przykład 1

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

Przykład 2 (atrybut „cellspacing”)

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

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

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

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

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>

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)

Nagłowki wierszy i kolumn Znacznik <th> Nagłówek u góry <table cellpadding=10 width=400> <caption>wzrost produkcji w latach 1991-1995 (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>

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 1991-1995 (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>

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

Przykład użycia atrybutu „rowspan” <table width=400> <caption align=top>Wzrost produkcji w latach 1991-1995 </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>

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

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>1991-1992</th><th colspan=3>1993-1995</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>

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

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>

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

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

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.

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>