CSS taulukko

Using CSS can greatly improve the appearance of HTML tables:

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

Kokeile itse

表格边框

如需在 CSS 中设置表格边框，请使用 raja 属性。

以下示例为 <table>、<th> 和 <td> 元素规定了黑色边框：

Etunimi Sukunimi
Bill Gates
Steve Jobs

Esimerkki

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

Kokeile itse

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

Esimerkki

table {
  width: 100%;
}

Kokeile itse

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

Etunimi Sukunimi
Bill Gates
Steve Jobs

Esimerkki

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

Kokeile itse

如果只希望表格周围有边框，则仅需为 <table> 指定 raja padding

Etunimi Sukunimi
Bill Gates
Steve Jobs

Esimerkki

table {
  border: 1px solid black;
}

Kokeile itse

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

以下示例将表的宽度设置为 100%，将 <th> 元素的高度设置为 50px：

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

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

Kokeile itse

要创建仅占页面一半宽度的表，请使用 width: 50%：

Esimerkki

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

Kokeile itse

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

th {
  text-align: center;
}

Kokeile itse

以下示例使 <th> 元素中的文本左对齐：

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

th {
  padding: 15px;
}

Kokeile itse

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中的内容垂直对齐是居中（<th> 和 <td> 元素都是）。

以下示例将 <td> 元素的垂直文本对齐方式设置为下对齐：

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

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

Kokeile itse

表格内边距

taulukon sisäpuolinen marginaali Jos haluat hallita reunan ja taulukon sisällön välistä etäisyyttä, käytä <td> ja <th>-elementtejä padding

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

ominaisuudet, jotta voidaan saavuttaa horisontaalinen erottelu:
  ominaisuudet:
  padding: 15px;
}

Kokeile itse

text-align: left;

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

horisontaalinen erottelu Lisää <th> ja <td> elementteihin border-bottom

Esimerkki

ominaisuudet, jotta voidaan saavuttaa horisontaalinen erottelu:
  th, td {
}

Kokeile itse

border-bottom: 1px solid #ddd;

��kytettävä taulukko Käytä <tr>-elementillä :hover

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

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

Kokeile itse

sauvakirjoinen taulukko

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Jotta voidaan saavuttaa sauvakirjoinen taulukkoefekti, käytä nth-child() valitsin, ja lisätään kaikki parilliset (tai epäparilliset) taulukorivit: background-color:

Esimerkki

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

Kokeile itse

Taulukon värit

Tässä esimerkissä määritetään <th>-elementin taustaväri ja tekstin väri:

Etunimi Sukunimi Säästöt
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esimerkki

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

Kokeile itse

Responsiivinen taulukko

Jos näyttö on liian pieni näyttääkseen kaikki sisällön, responsiivinen taulukko näyttää horisontaalisen roolikuvin:

Etunimi Sukunimi Pisteet Pisteet Pisteet Pisteet Pisteet Pisteet Pisteet Pisteet Pisteet Pisteet
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

Lisää <table>-elementin ympärille overflow-x:auto skenaarion elementti (esim. <div>), jotta voidaan saavuttaa responsiivinen tulos:

Esimerkki

<div style="overflow-x:auto;">
<table>
... taulukon sisältö ...
</table>
</div>

Kokeile itse

Huomautus:OS X Lionissa (Macissa) roolikuva on oletuksena piilotettu ja se näkyy vain käytettäessä (vaikka "overflow:scroll" on asetettu).

Lisää esimerkkejä

Tee koristeltu taulukko
Tämä esimerkki näyttää, miten luodaan koristeltu taulukko.
Aseta taulukkopäätteen sijainti
Tämä esimerkki näyttää, miten taulukkopäätetään.

CSS-taulukkoominaisuudet

ominaisuudet kuvaus
raja Yhdistetty ominaisuus. Asetetaan kaikki reunan ominaisuudet yhdessä lauseessa.
border-collapse Määritetään, tulisiko taulukon reunat yhdistää.
border-spacing Määritetään vierekkäisten solujen reunojen etäisyys.
caption-side Määritetään taulukon otsikon sijainti.
empty-cells Määritetään, näytetäänkö reunat ja tausta taulukon tyhjissä soluissa.
table-layout Asetetaan taulukon asettelu-algoritmi.