Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Podpis tabeli

Podpisy <caption>...</caption> uporządkowują tabele w strukturze strony. Podpis możemy również uzyskać stosując znacznik <figure>...</figure> wraz ze znacznikiem <figcaption>...</figcaption>. Podpis tabeli posiada właściwość caption-side z domyślną wartością top oraz wartością bottom.

Ćwiczenie 2_5_6_1

Wykonaj stronę wyświetlającą tabelę z podpisem umieszczanym w różny sposób. Pamiętaj o wklejeniu fragmentu kodu zapewniającego minimalne formatowanie tabeli. Kod tworzący tabelę wygląda następująco:

<body>
  <div>
    <table>
      <caption>Podpis</caption>
      <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td> <td>7</td> <td>8</td>
      </tr>
    </table>
  </div>
  <div>
    <table>
      <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td> <td>7</td> <td>8</td>
      </tr>
      <caption>Podpis</caption>
    </table>
  </div>
  <div>
    <br />
    <table>
      <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td> <td>7</td> <td>8</td>
      </tr>
      <caption style="caption-side:bottom;">Podpis</caption>
    </table>
  </div>
  <figure>
    <figcaption>Podpis</figcaption>
    <table>
      <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td> <td>7</td> <td>8</td>
      </tr>
    </table>
  </figure>
  <figure>
    <table>
      <tr>
      <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td> <td>7</td> <td>8</td>
      </tr>
    </table>
    <figcaption>Podpis</figcaption>
  </figure>
</body>

Tak powinna wyglądać wykonana strona:

Jak widzimy:

  • zastosowanie caption po znaczniku otwierającym czy też przed znacznikiem zamykająceym tabeli nie zmienia sposobu pokazywania podpisu, jest on pokazywany przed tabelą, chyba, że zmienimy domyślną wartość właściwości caption-side top, na wartość bottom;
  • zastosowanie cpation pokazuje podpis wycentrowany, natomiast figcaption - wyrównany do lewej;
  • figcaption umożliwia lokalizaję podpisu przed lub pod tabelą;
  • figure odsuwa tabelę od lewej krawędzi strony.

Uczywiście są to wszystko ustawienia domyślne, które można zmienić stosując CSS.

Praca domowa

Wykonaj stronę wyświetlającą tabelę zawierającą wykaz części komputerowych wraz z cenami. Zastosuj jeden ze sposobów podpisywania tabeli.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.