Rozdział 1 · Zadanie 12

Tabele

Trzy poziomy tagów — i powstaje prawdziwa tabela z ramkami.

Zadanie

Dodaj poniżej wszystkiego, co już jest (przed </body>):

index.html

<p>Mój plan lekcji na poniedziałek:</p>
<table border="1">
  <tr>
    <th>Lekcja</th>
    <th>Przedmiot</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Informatyka</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Plastyka</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Wychowanie fizyczne</td>
  </tr>
</table>

Jak to działa

<table> — kontener całej tabeli. <tr> — jeden wiersz (table row). <td> — komórka w wierszu (table data). Ile <td> w wierszu — tyle kolumn.

border="1" — grubość ramki. <th> zamiast <td> w pierwszym wierszu robi go pogrubionym nagłówkiem tabeli.

Ciąg dalszy: łączenie komórek, tło, wyrównanie

colspan — łączy komórki w poziomie (ile kolumn zajmuje). style="background-color: ..." — tło komórki. style="text-align: center;" — wyrównanie zawartości (można też left lub right).

Dodaj nowy wiersz na końcu tabeli:

index.html

<tr>
  <td colspan="2" style="background-color: lightgreen; text-align: center;">Koniec lekcji</td>
</tr>

Spróbuj

Usuń colspan="2" i zobacz — komórka znów staje się zwykła, wąska. Przywróć z powrotem.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska