Autor publikacji
Virtual Patriot - Administrator

caption-side

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości caption-side

Za pomocą właściwości caption-side możemy określić, gdzie powinien znaleźć się interesujący nas nagłówek (element caption) tabeli HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości caption-side

przeznaczenie

element HTML typu table-caption

pozycja

static, relative

dziedziczenie

tak

wartość initial

top

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości caption-side

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości caption-side

top

Wyjaśnienie

Wartość top jest domyślną wartością właściwości caption-side.

Domyślnie nagłówek tabeli HTML znajduje się obok górnej krawędzi blokowej tabeli HTML.

Przykład

  caption-side:top;
Przykładowa Tabela HTML
komórka - 1komórka - 2komórka - 3
komórka - 4komórka - 5komórka - 6
komórka - 7komórka - 8komórka - 9

Element "caption" przykładowego elementu "table" znajduje się nad górną krawędzią blokową wspomnianego elementu "table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        border:3px solid black;
        background-color:#7DCDE8;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td>komórka - 5</td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th>komórka - 7</th>
          <td>komórka - 8</td>
          <td>komórka - 9</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

bottom

Wyjaśnienie

Za pomocą wartości bottom właściwości caption-side możemy sprawić, że interesujący nas nagłówek tabeli HTML znajdzie się obok dolnej krawędzi blokowej tabeli HTML.

Przykład

  caption-side:bottom;
Przykładowa Tabela HTML
komórka - 1komórka - 2komórka - 3
komórka - 4komórka - 5komórka - 6
komórka - 7komórka - 8komórka - 9

Element "caption" przykładowego elementu "table" znalazł się pod dolną krawędzią blokową przykładowego elementu "table", ponieważ do wspomnianego elementu "caption" została dodana właściwość "caption-side" wraz z wartością "bottom".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        border:3px solid black;
        background-color:#7DCDE8;
      }

      table > caption {
        caption-side:bottom;
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td>komórka - 5</td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th>komórka - 7</th>
          <td>komórka - 8</td>
          <td>komórka - 9</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>