Język HTML - tabele

HTML - tabele: wiersze i komórki

Proste tabele:

• <table> wiersze i kolumny umieszczany wewnątrz znacznika </table>
• <tr> komórki </tr> - pojedynczy wiersz
• <td> zawartość </td> - pojedyncza komórka

Przykład:

<table border="2" cellpadding="10" cellspacing="5">
<tr>
   <td> Jabłka </td>
   <td> zawartość komórki </td>
</tr>
<tr>
   <td> Śliwki </td>
   <td> zawartość komórki </td>
</tr>
</table>

Jabłka
Śliwki

HTML - tabele: obramowania, podstawowe atrybuty tabel

Obramowania tabel i komórek (atrybuty znacznika <table> ... </table>)

• border - wyrażaona w pikselach szerokość obramowania tabeli (domyślnie 0 - brak obramowania) Uwaga: jeśli atrybut border ma wartość "0", to nie widać na stronie linii rozgraniczających komórki
• cellpadding - wyrażaona w pikselach szerokość wyścielania komórki (domyślnie 1)
• cellspacing - szerokość wolnego miejsca pomiędzy komórkami, określana również w pikselach (domyślnie 2)
• colspan - liczba kolumn zajmowanych przez komórkę (domyślnie 1)
• rowspan - liczba wierszy zajmowanych przez komórkę (domyślnie 1)

Przykład 1: Użycie atrybutu colspan

<table border="2" cellpadding="10" cellspacing="5" >
<tr>
<td colspan="2"> Owoce</td>
</tr>
<tr>
<td> Jabłka</td>
<td> Śliwki</td>
</tr>
</table>

Owoce

Przykład 2: użycie atrybutu rowspan

<table border="2" cellpadding="10" cellspacing="5" >
<tr>
<td rowspan="2"> Owoce </td>
<td> Jabłka </td>
</tr>
<tr>
<td> Gruszki </td>
</tr>
</table>

Owoce