Najnowsze tutoriale tworzenie stron internetowych
 

CSS stoły

❮ Poprzedni Następny rozdział ❯

Wygląd tabeli HTML można znacznie poprawić z CSS:

Firma Kontakt Kraj
Alfreds Futterkiste Maria Anders Niemcy
Berglunds snabbkop Christina Berglund Szwecja
Centro Comercial Montezumy Francisco Chang Meksyk
Ernst Handel Roland Mendel Austria
Wyspa Trading Helen Bennett UK
Koniglich Essen Philip Cramer Niemcy
Śmiejąc Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Włochy

Tabela Borders

Aby określić granice tabel w CSS, użyj border nieruchomości.

Poniższy przykład określa czarne obramowanie dla <table> , <th> i <td> elementy:

Przykład

table, th, td {
   border: 1px solid black;
}
Spróbuj sam "

Należy zauważyć, że powyższa tabela w przykładzie ma podwójne granic. To dlatego, że zarówno tabela i <th> i <td> elementy mają oddzielne granice.

Zwiń Tabela Borders

border-collapse właściwość określa, czy obramowanie tabeli powinny być zwinięte w jedną granicę:

Przykład

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Spróbuj sam "

Jeśli chcesz tylko obramowanie wokół stołu, tylko określenie border nieruchomości do <table> :

Przykład

table {
    border: 1px solid black;
}
Spróbuj sam "

Tabela szerokość i wysokość

Szerokość i wysokość tabeli są określone przez width i height właściwości.

Poniższy przykład ustawia szerokość tabeli do 100%, a wysokość <th> elementy do 50px:

Przykład

table {
    width: 100%;
}

th {
    height: 50px;
}
Spróbuj sam "

Wyrównanie w poziomie

text-align właściwość określa wyrównanie w poziomie (jak w lewo, w prawo lub środek) o zawartości <th> lub <td> .

Domyślnie treść <th> elementy są wyrównany do środka, a zawartość <td> elementy zostają wyrównane.

Poniższy przykład lewej wyrównuje tekst w <th> elementy:

Przykład

th {
    text-align: left;
}
Spróbuj sam "

Wyrównanie pionowe

vertical-align właściwość określa wyrównanie w pionie (jak góra, dół, lub w środku) z zawartością <th> lub <td> .

Domyślnie pionowe wyrównanie zawartości w tabeli jest środkowa (zarówno <th> i <td> elementy).

Poniższy przykład ustawia pionowe wyrównanie tekstu do dołu na <td> elementów:

Przykład

td {
    height: 50px;
    vertical-align: bottom;
}
Spróbuj sam "

Tabela Dopełnienie

Aby kontrolować przestrzeń między obramowaniem i materiałów w tabeli, należy użyć padding nieruchomości na <td> i <th> elementy:

Przykład

th, td {
    padding: 15px;
    text-align: left;
}
Spróbuj sam "

dzielniki Poziome

Pierwsze imię Nazwisko Oszczędności
Piotr Gryf bajeczny 100 $
Lois Gryf bajeczny $ 150
Joe Swanson 300 $

Dodaj border-bottom właściwość <th> i <td> dla przegród poziomych:

Przykład

th, td {
    border-bottom: 1px solid #ddd;
}
Spróbuj sam "

Hoverable Tabela

Użyj :hover przełącznik na <tr> , aby zaznaczyć wiersze tabeli na myszy nad:

Pierwsze imię Nazwisko Oszczędności
Piotr Gryf bajeczny 100 $
Lois Gryf bajeczny $ 150
Joe Swanson 300 $

Przykład

tr:hover {background-color: #f5f5f5}
Spróbuj sam "

Striped Stoły

Pierwsze imię Nazwisko Oszczędności
Piotr Gryf bajeczny 100 $
Lois Gryf bajeczny $ 150
Joe Swanson 300 $

Na stołach zebra paski, użyj nth-child() selektora i dodać background-color do wszystkich parzystych (lub nieparzystych) wierszy tabeli:

Przykład

tr:nth-child(even) {background-color: #f2f2f2}
Spróbuj sam "

Tabela kolorów

Poniższy przykład określa kolor tła i kolor tekstu <th> elementy:

Pierwsze imię Nazwisko Oszczędności
Piotr Gryf bajeczny 100 $
Lois Gryf bajeczny $ 150
Joe Swanson 300 $

Przykład

th {
    background-color: #4CAF50;
    color: white;
}
Spróbuj sam "

Tabela responsive

Dostosowana do tabeli powoduje wyświetlenie poziomego paska przewijania, jeśli ekran jest zbyt mały, aby wyświetlić pełną treść:

Pierwsze imię Nazwisko Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica Zwrotnica
Jill Kowal 50 50 50 50 50 50 50 50 50 50 50 50
Przeddzień Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Dodaj element kontenera (jak <div> ), z overflow-x:auto po <table> elementu, aby reagować:

Przykład

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Spróbuj sam "
Przykłady

Więcej przykładów

Bądź ozdobnego tabeli
Ten przykład pokazuje, jak stworzyć fantazyjne tabeli.

Ustaw pozycję podpisie tabeli
Ten przykład pokazuje jak umieścić podpis tabeli.

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»

Właściwości CSS Tab

Nieruchomość Opis
border Ustawia wszystkie właściwości granicznych w jednej deklaracji
border-collapse Określa, czy obramowanie tabeli powinny być zwinięte
border-spacing Określa odległość pomiędzy granicami sąsiednich komórkach
caption-side Określa umieszczenie podpisu tabeli
empty-cells Określa, czy ma być wyświetlany granic i tła na pustych komórek w tabeli
table-layout Ustawia układ algorytmu do zastosowania na stole

❮ Poprzedni Następny rozdział ❯