Autor publikacji: Virtual Patriot - Administrator

border-spacing

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - border-spacing property (CSS2 - LV2.2)

Przeznaczenie 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ść różną od wartości collapse.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `border-spacing`

przeznaczenie

element HTML typu table oraz posiadający właściwość border-collapse wraz z wartością różną od wartości collapse
element HTML typu inline-table oraz posiadający właściwość border-collapse wraz z wartością różną od wartości collapse

dowolna

tak

0

tak

Interpretacja właściwości `border-spacing`

: tak
: tak
: tak
: tak
: tak
: tak

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

wzorzec wartości

Wyjaśnienie

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`

            columns rows

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.

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.

Przykład

  border-spacing:15px 30px;

Przykładowa Tabela HTML
komórka - 1	komórka - 2	komórka - 3
komórka - 4	komórka - 5	komórka - 6
komórka - 7	komórka - 8	komó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:#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>