Tabele CSS

Użycie CSS może znacznie poprawić wygląd tabel HTML:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Spróbuj sam

Obramowanie tabeli

Aby ustawić obramowanie tabeli w CSS, użyj border Atrybuty.

Poniżej przykład ustawienia czarnego obramowania dla elementów <table>, <th> i <td>:

Imię Nazwisko
Bill Gates
Steve Jobs

Element

table, th, td {
  border: 1px solid black;
}

Spróbuj sam

Uwaga:W powyższym przykładzie tabela ma podwójne obramowanie. To dlatego, że element table oraz <th> i <td> mają oddzielne obramowania.

Tabela pełna szerokości

W niektórych przypadkach tabela wydaje się być mała. Jeśli potrzebujesz tabeli zajmującej całą ekran (pełna szerokość), dodaj width: 100% do elementu <table>:

Element

table {
  width: 100%;
}

Spróbuj sam

Podwójne obramowanie

Proszę zauważyć, że powyższa tabela ma podwójne obramowanie. To dlatego, że tabela oraz elementy th i td mają oddzielne obramowania.

Aby usunąć podwójne obramowanie, zobacz poniższy przykład.

Scalanie obramowań tabeli

border-collapse Atrybut ustawia, czy obramowanie tabeli ma być scalone w jedną linię:

Imię Nazwisko
Bill Gates
Steve Jobs

Element

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Spróbuj sam

Jeśli chcesz, aby tylko obramowanie tabeli było widoczne, wystarczy określić border padding

Imię Nazwisko
Bill Gates
Steve Jobs

Element

table {
  border: 1px solid black;
}

Spróbuj sam

Szerokość i wysokość tabeli

Szerokość i wysokość tabeli są określone przez width i height Definicja atrybutu.

Poniżej przykład ustawienia szerokości tabeli na 100% oraz wysokości elementu <th> na 50px:

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

table {
  width: 100%;
}
th {
  height: 50px;
}

Spróbuj sam

Aby utworzyć tabelę zajmującą połowę strony, użyj width: 50%:

Element

table {
  width: 50%;
}
th {
  height: 70px;
}

Spróbuj sam

Wyrównanie poziome

text-align Atrybut ustawia sposób wyrównania poziomego treści w <th> lub <td> (lewo, prawo lub środek).

Domyślnie, zawartość elementu <th> jest wyrównywana na środek, a zawartość elementu <td> jest wyrównywana na lewo.

Aby wyrównać zawartość elementu <td> na środek, użyj text-align: center:

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

th {
  text-align: center;
}

Spróbuj sam

Poniżej przykład ustawienia wyrównania tekstu w elementach <th> na lewe:

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

th {
  padding: 15px;
}

Spróbuj sam

Wyrównanie pionowe

vertical-align Atrybut ustawia sposób wyrównania pionowego treści w <th> lub <td> (góra, dół lub środek).

Domyślnie, wyrównanie pionowe treści w tabeli jest środkiem (elementy <th> i <td> są takie same).

Poniżej przykład ustawienia wyrównania tekstu elementu <td> na dolne:

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

td {
  height: 50px;
  vertical-align: bottom;
}

Spróbuj sam

表格内边距

wewnętrzny margines tabeli Aby kontrolować odstęp między krawędzią i zawartością tabeli, użyj na elemencie <td> i <th> padding

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

atrybut, aby osiągnąć poziome linie oddzielające:
  atrybut:
  padding: 15px;
}

Spróbuj sam

text-align: left;

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

poziome linie oddzielające dodaj do <th> i <td> border-bottom

Element

atrybut, aby osiągnąć poziome linie oddzielające:
  th, td {
}

Spróbuj sam

border-bottom: 1px solid #ddd;

tabela z podświetlonymi wierszami na elemencie <tr> użyj :hover

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

tr:hover {background-color: #f5f5f5;}

Spróbuj sam

tabela paski

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Aby osiągnąć efekt pasków, użyj nth-child() selektor, aby dodać kolor tła do wszystkich parzystych (lub nieparzystych) wierszy tabeli: background-color:

Element

tr:nth-child(even) {background-color: #f2f2f2;}

Spróbuj sam

Kolor tabeli

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

Imię Nazwisko Oszczędności
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Element

th {
  background-color: #4CAF50;
  color: white;
}

Spróbuj sam

Tabela responsywna

Jeśli ekran jest zbyt mały, aby wyświetlić całą zawartość, responsywna tabela wyświetli paski przewijania poziome:

Imię Imię Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Dodaj do otoczenia elementu <table> atrybut overflow-x:auto kontenera (np. <div>), aby osiągnąć efekt responsywny:

Element

<div style="overflow-x:auto;">
<table>
... zawartość tabeli ...
</table>
</div>

Spróbuj sam

Uwaga:W systemie OS X Lion (na Macu) paski przewijania są domyślnie ukryte i są wyświetlane tylko podczas użycia (nawet jeśli ustawiono "overflow:scroll").

Więcej przykładów

Stwórz stylizowaną tabelę
Ten przykład pokazuje, jak stworzyć stylizowaną tabelę.
Ustawienie pozycji tytułu tabeli
Ten przykład pokazuje, jak umieścić tytuł tabeli.

Atrybuty tabeli CSS

atrybut opis
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。