header

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