Hvordan å style en tabell med CSS

Hvordan å style en tabell med CSS


Bruk CSS til å lage datatabellen attraktive og enkle å forstå.

Bruksanvisning

CSS for Borders

1 Opprette tabellen i vanlig måte. Hvis tabellen bruker kolonner for å organisere dataene bruker HTML-elementet th å skape kolonneoverskriftene. Hvis tabellen bruker rader for å organisere dataene, bruke HTML-te element for å skape radoverskrifter.

2 Opprette grenser i CSS krever to reglene i CSS. Med den første regelen, sette deg en grense for utsiden av tabellen. Du kan også sette grensen-kollaps regelen, slik at du bare har en grenselinje mellom tabellceller. (Hvis du vil doble grensen mellom tabellceller, ikke setter grensen-kollaps eiendom å kollapse.) Her er et eksempel regel:

table {

border-width: 1px;

border-style: solid;
border-color: # 000000;

border-collapse: collapse;

}

3 Hvordan å style en tabell med CSS

Deretter legger du til en ramme på tabelloverskriften (th) og tabelldata (td) celler i tabellen. Hvis du brukte border-kollaps: kollaps på bordet regelen, vil det være en enkelt grenselinje mellom cellene. Her er et eksempel regel:

th, td {

border-width: 1px;

border-style: solid;
border-color: # 000000;
}

Merk at gruppert velgeren th, td skaper den samme CSS-regel for både th og td elementer.

CSS for bildetekster og overskrifter

4 Hvordan å style en tabell med CSS


Hvis tabellen har en bildetekst, kan du bruke CSS til å style den. Tabellen vises i bildet i punkt 1, Trinn 3 har en bildetekst. Her er et enkelt eksempel på en stil regel for det.

bildetekst {

font-size: 1.4em;
font-weight: bold;
padding-bottom: 4px;

}

Sammenligne effekten av denne regelen med utseendet show i § 1, trinn 3.

5 Du kan plassere bildeteksten på enten øverst eller nederst på tabellen ved hjelp av en bildetekst-side: topp eller en bildetekst-side: bunn erklæring i bildeteksten regelen. 6 Hvordan å style en tabell med CSS


TH-elementet er fet og sentrert (hvis det er i en kolonne) som standard. Hvis du ønsker å endre utseendet på noen måte, kan du skrive en regel for th velgeren. Denne regelen, for eksempel, endrer farge, font-variant og bokstaven-avstanden.

th {

font-variant: small-caps;
color: #666666;
letter-spacing: 0.2em;

}

CSS for Cell Alignment

7 Hvordan å style en tabell med CSS


Standardverdien for den vertikale justeringen av tekst i tabellceller er sentralt. For å vise dette, ble litt mer tekst lagt til eksempelet tabellen.

8 Hvordan å style en tabell med CSS


Du kan velge vertikal-align: top eller vertikal-align: bunn. Her er et eksempel:

td {

vertical-align: top;

}

9 Hvordan å style en tabell med CSS


For å justere teksten horisontalt i tabellcellene, enten til venstre, høyre eller sentrum, bruker text-align eiendom. Siden standardverdien som er igjen, vil eksempelet regel endre verdien til sentrum.

td {

vertical-align: top;
text-align: center;

}

Hint

  • Regelen for tabellen kan inkludere andre egenskaper som bredde, bakgrunn, padding, font-size og andre CSS egenskaper.
  • Andre egenskaper kan brukes når styling th element, for eksempel bredde, bakgrunnsfarge og text-align.