Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl.

Prezentacja na temat: "Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl."— Zapis prezentacji:

1 Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga

2 TABELE - tagi definiujące tabelę
<table border=0|1> <caption> </caption> <tr> </tr> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <tr> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <tr> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table>

3 TABELA – budowa w HTML Przykład: <table> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> <td> 9 </td> </table>

4 TABELA – tag <TABLE>
BORDER="n" – grubość ramek tabeli CELLPADDING="n" - odległość między brzegiem a zawartością komórki CELLSPACING="n" - odległość między komórkami tabeli HEIGHT="wysokość" - wysokość tabeli ( w procentach wielkości okna lub w pikselach) WIDTH="szerokość" - szerokość tabeli ( w procentach wielkości okna lub w pikselach) UWAGA !!! Atrybuty niedostępne w HTML5 Przykłady: <table border=‘5’> <table width=’50%’> <table border="6" cellpadding=„20" > <table border="6" cellpadding="10" cellspacing="30">

5 TABELA – tag <CAPTION>
<caption> to jest opis do tabeli </caption> Przykład: <table border="1"> <caption>Tytuł do tabeli</caption> <tr> <th>K1</th> <th>K2</th> <th>K3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

6 TABELA – tag <TD>
COLSPAN="n" - łączenie n kolumn tabeli w jedną ROWSPAN=n - łączenie n wierszy tabeli w jeden wiersz Przykład: <table border="1"> <tr> <td>Kolumna 1</td> <td colspan="2">Tekst w połączonych komórkach</td> </tr> <tr> <td>Kolumna 1</td> <td>Kolumna 2</td> <td>Kolumna 3</td> </tr> </table> Przykład: <table border="1"> <tr> <td>Kolumna 1</td> <td>Kolumna 2</td> </tr> <tr> <td rowspan="2">Tekst w połaczonych komórkach</td> <td>Wiersz 1</td> </tr> <tr> <td>Wiersz 2</td> </tr> </table>

7 TABELA – tag <THEAD> <TBODY><TFOOT>
Podział funkcjonalny tabeli na nagłówek, częśc główną i stopkę. Wygląd poszczególnych części należy ustawić w arkuszu styli CSS Przykład: <table border="1">   <thead>     <tr> […] </tr>   </thead>   <tbody>     <tr>[…]</tr>     <tr>[…]</tr>   </tbody>   <tfoot>     <tr> […] </tr>   </tfoot> </table>

8 TABELA – tag <COLGROUP> <COL>
Grupowanie kolumn tabeli celem nadania ujednoliconych atrybutów. Wygląd poszczególnych części należy ustawić w arkuszu styli CSS Przykład: <table border="1"> <colgroup> <col style="background-color:red"> <col span="2" style="background-color:yellow"> <col style="background-color:green"> </colgroup> <tr> <td>K1</td> <td>K2</td> <td>K3</td> <td>K4</td> </tr> […] </table>

9 TABELA – style - przegląd
top -color -style -width border- left right bottom style - none,hidden,dotted,dashed,solid,groove,linia,ridge,inset,outset,double,inherit width - px|mm|cm|in|pt|pc|em|ex lub w procentach np. 10% color - rgb(255,128,0) lub #RRGGBB lub słownie np. red