border-collapse w CSS3

By /

CSS

Właściwość CSS border-collapse jest stosowana do tabel i ma kluczowe znaczenie dla wizualnego aspektu prezentacji danych tabelarycznych w stronach internetowych. Pozwala ona na określenie, czy ramki komórek tabeli mają być wyświetlane jako oddzielne ramki czy też mają być scalone w jedną ciągłą ramkę.

Wprowadzenie do border-collapse

Właściwość border-collapse przyjmuje dwa główne wartości:

  • separate, która jest wartością domyślną, oznacza, że ramki komórek są wyświetlane oddzielnie.
  • collapse, która powoduje, że ramki są scalane w jedną ciągłą linię.

Użycie border-collapse: collapse; jest często preferowane, ponieważ tworzy bardziej uporządkowany i czytelny wygląd tabel, szczególnie przy obecności wielu danych.

Przykład użycia border-collapse

Poniżej znajduje się prosty przykład kodu HTML i CSS, który demonstruje użycie border-collapse. Nie jest wymagane użycie JavaScript, ponieważ border-collapse jest czysto stylistyczną właściwością CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania border-collapse w CSS3</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Nazwa</th>
        <th>Cena</th>
        <th>Ilość</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$2</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Cherry</td>
        <td>$3</td>
        <td>20</td>
    </tr>
</table>

</body>
</html>

W tym przykładzie zdefiniowaliśmy styl dla tabeli, który ustawia border-collapse na collapse, co oznacza, że ramki komórek są scalone. Każda komórka (th, td) ma ustawiony obramowanie, wyrównanie tekstu i padding, co zwiększa czytelność tabeli.

Podsumowanie

Właściwość border-collapse w CSS3 jest niezwykle użyteczna przy stylizowaniu tabel, pozwalając na łatwe przejście między wyglądem oddzielonych ramkami komórek a bardziej zintegrowanym i estetycznym wyglądem scalonych ramek. Pozwala to projektantom i programistom na lepszą kontrolę nad prezentacją danych tabelarycznych, co przekłada się na lepszą użyteczność i estetykę stron internetowych. Wybór między collapse a separate zależy głównie od preferowanego wyglądu i specyfikacji projektu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top