CSS table

Använd CSS för att förbättra HTML-tabellernas utseende avsevärt:

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

Prova själv

Tabellkantlinjer

För att sätta tabellkantlinjer i CSS, använd gräns Egenskap.

Nedanstående exempel specificerar svarta kantlinjer för <table>, <th> och <td>-elementen:

Förnamn Efternamn
Bill Gates
Steve Jobs

Exempel

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

Prova själv

Observera:Tabellen i föregående exempel har dubbla kantlinjer. Detta beror på att tabellen och <th> och <td>-elementen har separata kantlinjer.

Full bredd tabell

I vissa fall verkar ovanstående tabell vara mycket liten. Om du behöver en tabell som täcker hela skärmen (full bredd), lägg till width: 100% till <table>-elementet:

Exempel

table {
  width: 100%;
}

Prova själv

Dubbla kantlinjer

Observera att tabellen ovan har dubbla kantlinjer. Detta beror på att tabellen och th- och td-elementen har separata kantlinjer.

För att ta bort dubbla kantlinjer, se exempel nedan.

Kombinera tabellkantlinjer

border-collapse Egenskapen sätter om tabellens kantlinjer ska kollapsas till en enda kantlinje:

Förnamn Efternamn
Bill Gates
Steve Jobs

Exempel

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

Prova själv

Om du bara vill ha en ram runt tabellen, måste du specificera gräns padding

Förnamn Efternamn
Bill Gates
Steve Jobs

Exempel

table {
  border: 1px solid black;
}

Prova själv

Tabellens bredd och höjd

Tabellens bredd och höjd definieras av width och height Attribute definition.

Nedanstående exempel sätter tabellens bredd till 100% och höjden på <th>-elementet till 50px:

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

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

Prova själv

För att skapa en tabell som endast tar upp hälften av sidan, använd width: 50%:

Exempel

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

Prova själv

Horisontell justering

text-align Egenskapen sätter den horisontella justeringen för innehållet i <th> eller <td> (vänster, höger eller centrerad).

Som standard är innehållet i <th>-elementet centrerat, medan innehållet i <td>-elementet är vänsterjusterat.

För att centrera innehållet i <td>-elementet, använd text-align: center:

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

th {
  text-align: center;
}

Prova själv

Nedanstående exempel gör texten vänsterjusterad i <th>-elementet:

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

th {
  padding: 15px;
}

Prova själv

Vertikal justering

vertical-align Egenskapen sätter den vertikala justeringen för innehållet i <th> eller <td> (överst, nederst eller centrerad).

Som standard är den vertikala justeringen av innehållet i tabellen centrerad (både <th> och <td>-element är det).

Nedanstående exempel sätter den vertikala textjusteringen för <td>-elementet till nedre justering:

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

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

Prova själv

表格内边距

tabellinre marginaler För att kontrollera avståndet mellan kant och tabellinnehåll, använd padding

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

egenskaper, för att uppnå horisontella avskiljningslinjer:
  egenskaper:
  padding: 15px;
}

Prova själv

text-align: left;

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

horisontella avskiljningslinjer Lägg till till border-bottom

Exempel

egenskaper, för att uppnå horisontella avskiljningslinjer:
  th, td {
}

Prova själv

border-bottom: 1px solid #ddd;

klickbar tabell på <tr>-elementet :hover

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

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

Prova själv

strips tabell

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

För att uppnå zebrastil på tabellen, använd nth-child() väljare, och lägg till background-color：

Exempel

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

Prova själv

Tabellfärg

Nedan specificeras bakgrundsfärgen och textfärgen för <th>-elementet:

Förnamn Efternamn Spar
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Exempel

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

Prova själv

Responsiv tabell

Om skärmen är för liten för att visa all innehåll, kommer den responsiva tabellen att visa en horisontell rullgardin:

Förnamn Efternamn 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

Lägg till med overflow-x:auto s kontainerelement (t.ex. <div>), för att uppnå responsiva effekter:

Exempel

<div style="overflow-x:auto;">
<table>
... tabellinnehåll ...
</table>
</div>

Prova själv

Kommentar:I OS X Lion (på Mac) är rullgardinerna dolda som standard och visas endast när de används (trots att "overflow:scroll" har ställts in).

Mer exempel

Gör ett stilfullt tabell
Detta exempel visar hur man skapar ett stilfullt tabell.
Ställ in tabellrubrikens plats
Detta exempel visar hur man lägger till tabellrubriker.

CSS-tabellattribut

egenskaper beskrivning
gräns Kortformad egenskap. Ställ in alla ramegenskaper i ett enda deklaration.
border-collapse Bestämmer om tabellramarna ska vävas samman.
border-spacing Bestämmer avståndet mellan närliggande cellers ramar.
caption-side Bestämmer platsen för tabellrubriken.
empty-cells Bestämmer om ramar och bakgrund ska visas på tomma celler i tabellen.
table-layout Ställ in layoutalgoritmen för tabeller.