Hvordan lage tabeller i CSS
Lage tabeller ved hjelp av Cascading Style Sheets (CSS) er en avansert måte å vise data eller for å opprette en side layout. CSS lar deg lage renere kode, noe som resulterer i raskere siden lastes, og gjør det mulig å lage mer av en tilpasset bord. Ved hjelp av en enkel HTML-sorterte liste, tildeler CSS stil regler for hvert element for å definere hvordan du viser tabellen og presentere innholdet. Stilregler kan være skreddersydd for å tillate deg å lage alle typer tabeller, fra enkle til komplekse.
Bruksanvisning
CSS-kode
1 Åpne et nytt dokument i en HTML-tekstredigeringsprogram, for eksempel BBEdit eller Dreamweaver.
2 Lag en klasse stil regel som heter ".table". Denne regelen definerer bordet skrift. For eksempel:
.table {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
3 Lag en klasse stil regel som heter ".table ul". Denne regelen definerer sorterte liste margin, padding, flyte og grensen. For eksempel:
.table ul {
margin: 0px;
padding: 0px;
float: left;
border-top: 0px none;
}
4 Lag en klasse stil regel som heter ".table ul li". Denne regelen definerer listeelementet padding, list-style-type, bakgrunnsfarge, skriftstørrelse, bunn grensen, bord bredde og bakgrunnsfarge. For eksempel:
.table ul li {
padding: 5px 5px 10px 10px;
list-style-type: none;
background-color: #CCCCFF;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
width: 150px;
color: #000033;
}
5 Lag en klasse stil regel som heter ".table ul li.heading". Denne regelen definerer listen overskriften sin skriftegenskaper, bakgrunnsfarge og bunngrense. For eksempel:
.table ul li.heading {
font-weight: bold;
color: #333366;
background-color: #9999CC;
text-transform: uppercase;
font-size: 16px;
border-bottom: 1px solid #FFFFFF;
}
6 Navn og lagre din CSS fil med "Css" forlengelse.
7 Koble CSS-fil til HTML ved å åpne HTML-dokumentet og legge til en kobling i dokumentet "hodet" element. For eksempel:
<Link href = "http://www.yoursite.com/table.css~~number=plural" rel = "stylesheet" type = "text / css" media = "all" />
HTML kode
8 Skriv åpningen "<div>" tag og legge til "table" class regelen. Dette tildeler bordet stil. For eksempel:
<Div class = "table">
9 Skriv åpningen "<ul>" sorterte liste tag. Dette begynner den første kolonnen i tabellen.
10 Skriv åpningen "<li>" listeelement tag og legge til "overskrifter" class regelen. Dette tildeler listen overskriften stil. For eksempel:
<Li class = "overskrifter">
11 Skriv inn listeelement tekst og lukke "</ li>" tag. Teksten er kolonne første overskrift. For eksempel:
<Li class = "posisjoner"> Kolonne 1 </ li>
12 Angi så mange listepunkt koder etter behov. Den angis i disse listeelementer tekst er dataene som vises under kolonnen ett. For eksempel:
<Li> Rad 1, kolonne 1 </ li>
<Li> Rad 2, kolonne 1 </ li>
<Li> Rad 3, kolonne 1 </ li>
1. 3 Skriv inn den avsluttende "</ ul>" tag for å fullføre den første kolonnen i tabellen.
14 Gjenta trinn to, tre og fire for å legge til flere kolonner og rader i tabellen, om nødvendig. For eksempel:
<Ul>
<Li class = "overskriften"> Kolonne 2 </ li>
<Li> Rad 1, kolonne 2 </ li>
<Li> Rad 2, kolonne 2 </ li>
<Li> Rad 3, kolonne 2 </ li>
</ Ul>
15 Skriv inn den avsluttende "</ div>" tag.
16 Navn og lagre HTML-fil med ".html" forlengelse.
Hint
- Du kan legge til flere spesifikasjoner stil, for eksempel skriftstørrelse eller farge, i hvert CSS rule.If du ikke ser CSS-reglene trer i kraft, må du kontrollere at begge filene er lagret, og deretter bruke HTML teksteditor er "Refresh" -funksjon.