CSS tabel

Brug af CSS kan betydeligt forbedre udseendet af HTML-tabeller:

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

Prøv det selv

Tabellens kanter

For at sætte tabellens kanter i CSS, brug grænse Egenskab.

Følgende eksempel angiver sort kant til <table>, <th> og <td>-elementer:

Fornavn Efternavn
Bill Gates
Steve Jobs

eksempel

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

Prøv det selv

Bemærk:Tabellen i det foregående eksempel har dobbelte kanter. Dette skyldes, at tabellen og <th> og <td>-elementerne har separate kanter.

Fuld breddefordeling

I nogle tilfælde ser den øverste tabel måske lille ud. Hvis du har brug for en tabel, der dækker hele skærmen (fuld bredde), skal du tilføje width: 100% til <table>-elementet:

eksempel

table {
  width: 100%;
}

Prøv det selv

Dobbeltkant

Bemærk venligst, at tabellen ovenfor har dobbelte kanter. Dette skyldes, at tabellen og th- og td-elementerne har separate kanter.

For at fjerne dobbelte kanter, se nedenstående eksempel.

Fletning af tabellens kanter

border-collapse Egenskab sætter om tabellens kanter skal foldes sammen til én kant:

Fornavn Efternavn
Bill Gates
Steve Jobs

eksempel

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

Prøv det selv

Hvis du kun ønsker en kant omkring tabellen, skal du kun specificere grænse padding

Fornavn Efternavn
Bill Gates
Steve Jobs

eksempel

table {
  border: 1px solid black;
}

Prøv det selv

Tabellens bredde og højde

Tabellens bredde og højde defineres af width og height Egenskab definerer.

Følgende eksempel sætter tabellens bredde til 100% og højden på <th>-elementet til 50px:

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

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

Prøv det selv

For at skabe et bord, der kun optager halvdelen af siden, brug width: 50%:

eksempel

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

Prøv det selv

Vandret justering

text-align Egenskab sætter vandret justering af indholdet i <th> eller <td> (venstre, højre eller centreret).

Som standard er indholdet i <th>-elementet centreret, mens indholdet i <td>-elementet er venstrejusteret.

For at få indholdet i <td>-elementet også centreret, brug text-align: center:

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

th {
  text-align: center;
}

Prøv det selv

Følgende eksempel får teksten i <th>-elementet til at være venstrejusteret:

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

th {
  padding: 15px;
}

Prøv det selv

Lodret justering

vertical-align Egenskab sætter lodret justering af indholdet i <th> eller <td> (øverst, nederst eller centreret).

Som standard er lodret justering af indhold i tabellen centreret (både <th> og <td>-elementer er det).

Følgende eksempel sætter vertical-align på <td>-elementet til nederst:

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

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

Prøv det selv

表格内边距

indre tabelmargener For at kontrollere afstanden mellem kantene og tabelindholdet, brug padding

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

egenskab, for at opnå vandret adskillelse
  egenskab:
  padding: 15px;
}

Prøv det selv

text-align: left;

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

vandret adskillelse Tilføj til <th> og <td> for at tilføje border-bottom

eksempel

egenskab, for at opnå vandret adskillelse
  th, td {
}

Prøv det selv

border-bottom: 1px solid #ddd;

klikbare tabeller på <tr> elementet brug :hover

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

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

Prøv det selv

streng tabel

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

For at opnå zebra effekt, brug nth-child() vælger, og tilføj til alle parantes (eller odd) tabelrækker background-color:

eksempel

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

Prøv det selv

Tabel farve

I dette eksempel specificeres baggrundsfarven og tekstdesignet for <th> elementet:

Fornavn Efternavn Besparelser
Bill Gates $100
Steve Jobs $150
Elon Musk $300

eksempel

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

Prøv det selv

Responsiv tabel

Hvis skærmen er for lille til at vise hele indholdet, viser den responsiv tabel en horisontal rullemarker:

Fornavn Efternavn 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

Tilføj med <table> elementet omgivet af overflow-x:auto s sin beholderelement (f.eks. <div>), for at opnå responsiv effekt:

eksempel

<div style="overflow-x:auto;">
<table>
... tabel indhold ...
</table>
</div>

Prøv det selv

Bemærk:I OS X Lion (på Mac) er rullemarker standardmæssigt skjulte og vises kun ved brug (selvom "overflow:scroll" er indstillet).

Flere eksempler

Lav en stilfuld tabel
Dette eksempel viser, hvordan man opretter et stilfuldt tabel.
Indstil tabeloverskriftens placering
Dette eksempel viser, hvordan man placerer tabeloverskrifter.

CSS tabel egenskaber

egenskab beskrivelse
grænse Kortfattet egenskab. Indstil alle rammeegenskaber i én deklaration.
border-collapse Bestemmer om tabelrammerne skal foldes sammen.
border-spacing Bestemmer afstanden mellem nabne cellers rammer.
caption-side Bestemmer placeringen af tabeloverskrifter.
empty-cells Bestemmer om rammer og baggrund vises på tomme celler i tabellen.
table-layout Indstil layoutalgoritmen til brug i tabeller.