HTML, CSS, Blogger. Tabele. Omówienie cześć druga - poradnik

Tabele. Omówienie cześć pierwsza - poradnik

2. Tabele. Omówienie cześć druga.

Przypomnienie!

Tabela składa się ze znacznika <tr></tr> na osi Y, w którym poziomo doczepione są komórki <td></td> wzdłuż osi X. Tekst umieszczany w komórce jest pomiędzy znacznikami, czyli <td>pkt. 0</td>.

Przykład 9

MAGICZNA KOMÓRKA
rasa	Siła	Zr	Int	hp
Ork
Człowiek

(Uwaga!) Konstrukcja czystej tabeli:

<table cellpadding="10" border="1" style="border-collapse: collapse; text-align: center;"><tbody>
<tr>
<td colspan="5">MAGICZNA KOMÓRKA</td></tr>
<tr>
<td>rasa</td>
<td>Siła</td>
<td>Zr</td>
<td>Int</td>
<td>hp</td>
</tr>
<tr>
<td>Ork</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Człowiek</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr></tbody></table>

Opis: Magiczna komórka powstała przez łączenie innych komórek w poziomie, znacznik colspan. Liczba 5 ponieważ wszystkich kolumn jest 5 (znacznik td). W ten sposób komórka jest rozciągnięta na całą szerokość tabeli. Z koleii nie użyty tutaj znacznik rowspan odpowiada za łaczenie komórek w pionie. Domyślnie każda komórka jest justowana do lewej strony.

Ta sama tabela bez łączenia komórek

MAGICZNA KOMÓRKA
rasa	Siła	Zr	Int	hp
Ork
Człowiek

(Uwaga!) Konstrukcja czystej tabeli:

<table cellpadding="10" border="1" style="border-collapse: collapse; text-align: center;"><tbody>
<tr>
<td >MAGICZNA KOMÓRKA</td></tr>
<tr>
<td>rasa</td>
<td>Siła</td>
<td>Zr</td>
<td>Int</td>
<td>hp</td>
</tr>
<tr>... itd.

Opis: Komórka bez znacznika colspan, jest justowana do pierwszej lewej kolumny w następnym wierszu. Przez obrys tabeli (border="1"), wygląda jakby były dwie komórki w wierszu, ale tak naprawdę jest jedna.