Ostatnio edytowany:

border-spacing

Autor: Virtual Patriot

Opis właściwości border-spacing

Za pomocą właściwości border-spacing możemy określić rozmiar odstępu pomiędzy kolumnami oraz wierszami interesującej nas tabeli HTML. Mowa tu o tabeli HTML (elemencie table), której właściwość border-collapse posiada wartość separate.

Dodatkowe techniczne informacje o właściwości border-spacing

przeznaczenie
dziedziczenie
  • tak
wartość initial
  • 0
wyjątki initial
animowanie
  • tak

Interpretacja właściwości border-spacing

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości border-spacing

wzorzec wartości

Opis

Za pomocą właściwości border-spacing oraz z góry zdefiniowanego wzorca wartości możemy określić rozmiar odstępu pomiędzy kolumnami oraz wierszami interesującej nas tabeli HTML.

Składniki wzorca wartości właściwości border-spacing

Przykładowe zapisy

10px

10px 20px

20px

20px 10px

columns

Składnik columns jest wymaganym składnikiem wzorca wartości właściwości border-spacing. Składnik columns określa rozmiar odstępu pomiędzy kolumnami interesującej nas tabeli HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

0

rows

Składnik rows nie jest wymaganym składnikiem wzorca wartości właściwości border-spacing. Składnik rows określa rozmiar odstępu pomiędzy wierszami interesującej nas tabeli HTML.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

wartość składnika columns

Przykład

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

Rozmiar odstępu pomiędzy kolumnami przykładowego elementu "table" wynosi 15 pikseli, natomiast rozmiar odstępu pomiędzy wierszami przykładowego elementu "table" wynosi 30 pikseli, ponieważ do wspomnianego elementu "table" została dodana właściwość "border-spacing" wraz z następującymi wartościami: "15px 30px".

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-spacing:15px 30px;
        border:3px solid black;
        background-color:#AFF;
      }

      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>