Pomoc - Zarządzanie informacją
Spis paragrafów >>
Tabele
<< Powrót
<< Poprzedni Następny >>
86.10. Tabele
Tabele są rzadziej stosowane w XHTML niż w HTML. Najczęściej są używane do celów praktycznych, np. tabele list obecności, plan lekcji.
Znaczniki <table>>…</table> powodują rozpoczęcie tabeli. Dalej nagłówek: <caption>Plan lekcji klasy 1f na rok szkolny 2015/2016</caption>.
Plan lekcji
|
Godziny |
L. |
Poniedziałek |
Wtorek |
Środa |
Czwartek |
Piątek |
|
800 - 845 |
1. |
informatyka | biologia | j. niemiecki | ||
|
855 - 940 |
2. |
wf. | informatyka | j. polski | matematyka | muzyka |
|
950 - 1035 |
3. |
matematyka | matematyka | j. polski | religia | j. angielski |
|
1045 - 1130 |
4. |
j. polski | chemia | geografia | j. polski | religia |
|
1140 - 1225 |
5. |
j. angielski | godz. wych. | matematyka | j. angielski | j. polski |
|
1240 - 1325 |
6. |
j. niemiecki | historia | historia | fizyka | fizyka |
|
1340 - 1425 |
7. |
koło teatralne | wf. | wf. | wos | |
|
1430 - 1515 |
8. |
koło teatralne | wf. | wos |
Kolejny znacznik to <tbody>…</tbody>, określa obszar głównej treści tabeli. Kolejne wiersze są oznaczone znacznikami <tr>…</tr>, a poszczególne komórki znacznikami <td>…</td>. Między znacznikami możesz umieszczać tekst lub grafikę. W *.css określono rodzaj czcionki i inne elementy formatowania tabel. Poniżej można zobaczyć początek budowania tabeli. Są znaczniki główne, tabela ma dopiero dwa wiersze, a w każdym 7 komórek.
<table><caption>Plan lekcji klasy 1f na rok szkolny 2015/2016</caption>
<tbody>
<tr>
<td></td><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><td></td>
</tr>
</tbody>
</table>
Zastosowanie tych znaczników powoduje, że na stronie internetowej obramowania tabeli nie są widoczne, ponieważ nie określono parametru border. Szerokość komórek i całej tabeli zależy od ilości wpisanego tekstu. Standardowo wszystkie parametry są określane jak na przykładzie jednej komórki:
<td bgcolor="#ffcc66"> koło teatralne</td>
oraz wypełnionego głównego znacznika tabeli:
<table height="257" cellspacing="1" cellpadding="1" width="600" border="1">.
Uwaga. Za pomocą parametrów height, widht, border, cellspacing możesz określić odpowiednio: wysokość, szerokość tabeli, grubość obramowania oraz odstępy między komórkami.
- Kod tabeli planu lekcji >>
Kurs na CD –[odnośnik]>>
Kurs P. Wimera – [odnośnik]>>
W pliku, z którego pochodzi tabela planu lekcji pokazana w podręczniku, style są określone w pliku style.css.
Dla lepszego zrozumienia tworzenia tabel zobacz przykład mniejszej tabeli - [odnośnik]>>
Poniżej jest zapisany kod prezentowanej tabeli. Pokazane tu rozwiązania są dość proste, ale skuteczne. Występujący co pewien czas znak to „twarda spacja”. HTML i XHTML, „uznaje” wstawianie tylko jednej spacji pomiędzy wyrazami i w każdym innym miejscu. Z konieczności w wielu miejscach trzeba się posłużyć tym elementem.
<h1>Plan lekcji</h1>
<table height="257" cellspacing="1" cellpadding="1" width="530" border="1">
<caption><strong>Plan lekcji klasy 1f na rok szkolny 2015/2016</strong></caption>
<tbody>
<tr>
<td valign="middle" nowrap="nowrap" align="center" width="85" bgcolor="#ccffff">
<p align="center"><strong> <font color="#660000">Godziny</font></strong></p>
</td>
<td valign="middle" align="center" bgcolor="#66ffcc">
<strong><font color="#660000">L.</strong>
</td>
<td valign="middle" align="center" width="90" bgcolor="#ccffcc">
<p align="center"> <strong><font color="#660000">Poniedziałek</font></strong></p>
</td>
<td valign="middle" align="center" width="85" bgcolor="#ffff99">
<p align="center"> <strong><font color="#660000">Wtorek</font></strong></p>
</td>
<td valign="middle" align="center" width="85" bgcolor="#ccffcc">
<p align="center"> <strong><font color="#660000">Środa</font></strong></p>
</td>
<td valign="middle" align="center" width="85" bgcolor="#ffff99">
<p align="center"> <strong><font color="#660000">Czwartek</font></strong></p>
</td>
<td valign="middle" align="center" width="85" bgcolor="#ccffcc">
<p align="center"> <strong><font color="#660000">Piątek</font></strong></p>
</td>
</tr>
<tr>
<td><p align="center">8<sup>00 </sup>- 8<sup>45</sup></p></td>
<td> <p align="center"> 1.</p></td>
<td> </td>
<td> informatyka</td>
<td> biologia</td>
<td> j. niemiecki</td>
<td> </td>
</tr>
<tr>
<td><p align="center">8<sup>55</sup> - 9<sup>40</sup></p></td>
<td><p align="center"> 2.</p></td>
<td> wf.</td>
<td> informatyka</td>
<td> j. polski</td>
<td> matematyka</td>
<td> muzyka</td>
</tr>
<tr>
<td><p align="center"> 9<sup>50</sup> - 10<sup>35</sup></p></td>
<td><p align="center"> 3.</p></td>
<td> matematyka</td>
<td> matematyka</td>
<td> j. polski</td>
<td> religia</td>
<td> j. angielski</td>
</tr>
<tr>
<td><p align="center"> 10<sup>45</sup> - 11<sup>30</sup></p></td>
<td><p align="center"> 4.</p></td>
<td> j. polski</td>
<td> chemia</td>
<td> geografia</td>
<td> j. polski</td>
<td> religia</td>
</tr>
<tr>
<td><p align="center"> 11<sup>40</sup> - 12<sup>25</sup></p></td>
<td><p align="center"> 5.</p></td>
<td> j. angielski</td>
<td> godz. wych.</td>
<td> matematyka</td>
<td> j. angielski</td>
<td> j. polski</td>
</tr>
<tr>
<td><p align="center">12<sup>40</sup> - 13<sup>25</sup></p></td>
<td><p align="center"> 6.</p></td>
<td> j. niemiecki</td>
<td> historia</td>
<td> historia</td>
<td> fizyka</td>
<td> fizyka</td>
</tr>
<tr>
<td><p align="center">13<sup>40</sup> - 14<sup>25</sup></p></td>
<td><p align="center"> 7.</p></td>
<td bgcolor="#ffcc66"> koło teatralne</td>
<td> wf.</td>
<td> wf.</td>
<td> wos</td>
<td> </td>
</tr>
<tr>
<td><p align="center">14<sup>30</sup> - 15<sup>15</sup></p></td>
<td><p align="center"> 8.</p></td>
<td bgcolor="#ffcc66"> koło teatralne</td>
<td> </td>
<td> wf.</td>
<td> wos</td>
<td> </td>
</tr>
</tbody>
</table>
<< Powrót [Do góry]