Tabele

Karta pracy 2017/2018

Adres:
plotkarka.eu/KP/tabele.html
Autor:
Radosław Kowaluk

Struktura tabeli

 

W swoim folderze roboczym utwórz dokument tabele.html (wykorzystaj pliki szablonów, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>Tabele</title>
 </head>
 <body>

 </body>
</html>

Definiowanie tabeli1, wiersza2 i komórki3

W źródle pliku, w elemencie body dopisz kod.

 <body>
  <table>
   <tr><td>wiersz1 kolumna1</td></tr>
  </table>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Dodawanie obramowania4

W źródle pliku, w elemencie body dopisz kod.

 <table border="1">

Zapisz dokument i otwórz go w przeglądarce.

Dodawanie kolumn (komórek w wierszu tabeli)

W źródle pliku, w elemencie tr dopisz kod.

<tr>
 <td>wiersz1 kolumna1</td><td>wiersz1 kolumna2</td>
</tr>

Zapisz dokument i otwórz go w przeglądarce.

Dodawanie wierszy w tabeli

W źródle pliku, w elemencie body dopisz kod. 

  </tr>
  <tr>
   <td>wiersz2 kolumna1</td><td>wiersz2 kolumna2</td>
  </tr>
 </table>

Zapisz dokument i otwórz go w przeglądarce.

Podpis5(etykieta) tabeli

W źródle pliku, w elemencie body dopisz kod.

 <table border="1">
  <caption>Tabela przykładowa nr 1</caption>
  <tr>

Zapisz dokument i otwórz go w przeglądarce.

Nagłówek kolumny i/lub wiersza tabeli6

W źródle pliku, w elemencie body dopisz kod.

  <caption>Tabela przykładowa nr 1</caption>
  <tr>
   <th>nagłówek kol. 1</th><th>nagłówek kol. 2</th>
  </tr>
  <tr>

Zapisz dokument i otwórz go w przeglądarce.

Scalanie komórek w poziomie7

W elemencie body utwórz kod wykorzystaj metodę kopiuj-wklej.

  </table>
  <hr/>
  <table border="1">
   <caption>Tabela przykładowa nr 2</caption>
   <tr><th colspan="2">nagłówek scalony</th></tr>
   <tr>
    <td>wiersz1 kolumna1</td><td>wiersz1 kolumna2</td>
   </tr>
   <tr>
    <td>wiersz2 kolumna1</td><td>wiersz2 kolumna2</td>
   </tr>
  </table>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Scalanie komórek w pionie7

W elemencie body utwórz kod wykorzystaj metodę kopiuj-wklej.

  </table>
  <hr/>
  <table border="1">
   <caption>Tabela przykładowa nr 3</caption>
   <tr>
    <th rowspan="2">boczek</th>
    <td>wiersz1, kolumna2</td>
   </tr>
    <tr><td>wiersz2, kolumna2</td>
   </tr>
  </table>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Dodaj w pliku index.html link do pliku tabele.html w części Rozwiązania

Wgrywanie plików na serwer

Sprawdź poprawność i umieść pliki tabele.html oraz index.html na serwerze.

  1. Element <table> - tabela
  2. Element <tr> - wiersz
  3. Element <td> - komórka
  4. Atrybut border - wartość 1 wyświetla obramowanie.
  5. Element <caption> - etykieta, tytuł
  6. Element <th> - komórka wyróżniona
  7. Atrybut <element colspan> - liczba scalonych komórek w wierszu
  8. Atrybut rowspan - liczba scalonych komórek w kolumnie

Struktura zaawansowana tabeli

Ciało tabeli1, nagłówek tabeli2 i stopka tabeli3

W źródle pliku, w elemencie body dopisz kod.

  </table>
  <hr/>
  <table border="1">
   <caption>Tabela przykładowa nr 4</caption>
   <thead>
    <tr><th colspan="3">A1</th></tr>
   </thead>
   <tfoot>
    <tr><td colspan="3">A5</td></tr>
   </tfoot>
   <tbody style="color: silver;">
    <tr><td>A2</td><td>B2</td><td>C2</td></tr>
    <tr><td>A3</td><td>B3</td><td>C3</td></tr>
    <tr><td>A4</td><td>B4</td><td>C4</td></tr>
   </tbody>
  </table>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Zasięg komórki nagłówka4

W źródle pliku, w znaczniku th dopisz kod. 

    <tr><th colspan="3" scope="colgroup">A1</th></tr>

Zapisz dokument i otwórz go w przeglądarce.

Grupa kolumn5 i właściwości kolumny6

W źródle pliku, w elemencie table dopisz kod. 

    <caption>Tabela przykładowa nr 4</caption>
    <colgroup>
     <col style="background: green;" />
     <col style="background: red;" />
    </colgroup>
    <thead>

Zapisz dokument i otwórz go w przeglądarce.

Zasięg grupy kolumn7

W źródle pliku, w znaczniku col dopisz kod. 

     <col style="background: red;" span="2">

Zapisz dokument i otwórz go w przeglądarce.

Nazw nagłówków komórek8

W źródle pliku, w znaczniku table (pierwszym) dopisz kod. 

 <tr><th id="k1">nagłówek, kolumna1</th>
 <tr><td headers="k1">wiersz1,kolumna1</td>
 <tr><td headers="k1">wiersz2, kolumna1</td>

Zapisz dokument i otwórz go w przeglądarce.

Zagnieżdżanie tabel

W źródle pliku, w elemencie body dopisz kod.

   </table>
   <hr>
   <table border="1">
    <tr>
     <td>
      <table border="1">
       <tr>
        <td>pierwsza kolumna tekstu</td>
        <td>druga kolumna tekstu</td>
       </tr>
      </table>
    </td>
   </tr>
  </table>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Wgrywanie plików na serwer

Sprawdź poprawność kodu i umieść pliki ćwiczeniowe na serwerze.

Sprawdzanie poprawności stron witryny

Sprawdź poprawność stron witryny narzędziem  validator.w3.org.

  1. Element <tbody> – grupuje ciało (wiersze danych) tabeli.
  2. Element <thead> – grupuje wiersze nagłówka tabeli.
  3. Element <tfoot> – grupuje stopkę tabeli.
  4. Atrybut scope – definiuje zasięg komórki nagłówka. Wartością może być: row, col, rowgroup lub colgroup.
  5. Element <colgroup> – grupuje elementy col.
  6. Element <col> – zawiera definicję właściwości kolumn.
  7. Atrybut span – określa ilość kolumn w grupie. Wartością jest liczba, domyślnie 1.
  8. Atrybut headers – określa nazwy nagłówków komórek (podanych w identyfikatorach).
  9. Uwaga: brak nowych elementów w HTML5 ale większość atrybutów zostało uznane za przestarzałe.