border-collapse

Wartość separate jest domyślną wartością właściwości border-collapse.

Domyślnie kolumny oraz wiersze tabeli HTML mogą posiadać odstępy pomiędzy sobą.

  border-collapse:separate;

Kolumny oraz wiersze przykładowego elementu "table" posiadają odstępy pomiędzy sobą.

<!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:8px;
        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>

Za pomocą wartości collapse właściwości border-collapse możemy sprawić, że kolumny oraz wiersze interesującej nas tabeli HTML nie mogą posiadać odstępów pomiędzy sobą.

  border-collapse:collapse;

Kolumny oraz wiersze przykładowego elementu "table" nie mogą posiadać odstępów pomiędzy sobą, ponieważ do wspomnianego elementu "table" została dodana właściwość "border-collapse" wraz z wartością "collapse".

<!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-collapse:collapse;
        border-spacing:8px;
        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>