Ostatnio edytowany:

caption-side

Autor: Virtual Patriot

Opis właściwości caption-side

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

Dodatkowe techniczne informacje o właściwości caption-side

przeznaczenie

element HTML typu table-caption

dziedziczenie

tak

wartość initial

top

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

Opis

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

Domyślnie nagłówek tabeli HTML znajduje się obok tej krawędzi tabeli HTML, od której rozpoczęło się układanie kolejnych wierszy treści 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ą 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:#CBFFFF;
      }

      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

Opis

Za pomocą wartości bottom właściwości caption-side możemy sprawić, że nagłówek interesującej nas tabeli HTML znajdzie się obok tej krawędzi tabeli HTML, która jest krawędzią przeciwną do krawędzi, od której rozpoczęło się układanie kolejnych wierszy treści 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ą przykładowego elementu "table", ponieważ do wspomnianego elementu "table" 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 {
        caption-side:bottom;
        border:3px solid black;
        background-color:#CBFFFF;
      }

      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>