Sissejuhatus CSS-i tabeli kujundamisse
CSS-i kasutamine, kuigi me võime kasutada ka HTML-tabeleid, on põhjus, et HTML-tabelis kuvatakse tabelipõhine lehe paigutus sageli aeglasemalt kui samaväärne CSS-põhine paigutus; see kehtib eriti lehtede kohta, millel on palju sisu. Tabelid ei tohiks olla küljendusabiteks. Ja kui ehitame brauseris HTML-tabeleid ilma stiilide või atribuutideta, kuvatakse see ilma ääristeta. Laua stiilimine CSS-iga võib selle välimust paremaks muuta.
CSS-tabeleid on üsna lihtne mõista ja kasutada. On vaja ainult meelde jätta HTML-i tabeli elementide vastavad CSS-i kuvaväärtuse väärtused. CSS-i abil oleme võimelised valmistama stiilseid tabeleid.
Mis on CSS-i tabeli kujundamine?
CSS (Cascading Style Sheets) tabel kirjeldab, kuidas paigutada ridade ja veergude elementide komplekt. HTML-tabelile rakendatud vaikimisi CSS on CSS-tabel.
- CSS on paindlikkuse kavandanud ja ümber kujundanud.
- See tähendab, et CSS-põhine paigutus tagab, et paigutate kõik oma stiilid (st väikestest muudatustest suuremate reegliteni) ühte kohta.
- Muutes sellel stiililehel seatud paigutusreegleid ja mõjutate iga sellele viitavat lehte.
- CSS-põhine lehe paigutus ilmub tavaliselt ekraanil kiiremini ja isegi allalaadimine toimub kiiremini kui tabelipõhine paigutus.
CSS-i tabeli stiili atribuudid
Allpool on toodud CSS-i tabelistiilide erinevad omadused:
1. Piiride kokkuvarisemine
Seda kasutatakse selleks, et näidata, kas tabeli lahtrite piirid peaksid olema eraldatud või ahendatud.
Süntaks: border-collapse: separate|collapse|initial|inherit;
- Äärise kokkuvarisemine: eraldi: seda kasutatakse nii, et külgnevatel lahtritel on oma ja iseseisvad piirid, mida ei jagata.
Süntaks
border-collapse: separate;
Piiride kokkukukkumise atribuudile seatud vaikeväärtus on eraldi. Kui nad on eraldatud, panevad brauserid piiride vahe atribuudi abil iga lahtri vahele paar pikslit ruumi.
Kood
Väljund:
- Äärise kokkuvarisemine: kokkuvarisemine: kui seame piiri kokkuvarisemise omaduse ahendama, eemaldab see lahtrite vahel ruumi.
Süntaks
border-collapse: collapse;
Kood
Väljund:
Isegi kui selle ruumi tühistada, määrates HTML-i lahtri eraldamise atribuudiks 0, kuvavad brauserid ikkagi topeltpiire. See tähendab, et ühe lahtri alumine äär ilmub lahtri ülemise piiri kohal, põhjustades piiride kahekordistumist. Piiride kokkuvarisemise atribuudiks seadmine kahandab nii lahtrite vahelise ruumi kui ka selle piiri kahekordistamise.
- Äärise kokkuvarisemine: algne: seda kasutatakse piiride kokkukukkumise atribuudi seadmiseks selle vaikeväärtusele.
- Äärise kokkuvarisemine: pärimine: seda kasutatakse siis, kui piiri kokkuvarisemise vara pärib oma vanematest elementidest. See omadus töötab ainult a-le rakendamisel
silt.
Väärtused: ahendama, eraldi, algne, pärima;
2. Piiride vahe
See määrab piiridega külgneva ruumi ja tabeli ümbritseva sisu. See sarnaneb sildi lahtrite eraldamisega
atribuut, välja arvatud see, et sellel on valikuline teine väärtus. See omadus töötab ainult a-le rakendamisel
silt.
Süntaks
border-spacing: Length|initial|inherit;Piiride vahe võtab tavaliselt ühe või kaks pikkuse väärtust. Selles määratletakse ainult üks väärtus, see määratleb lahtrite vahelise horisontaalse ja vertikaalse vahekauguse.
Kood
Väljund:
Kui täpsustatakse kaks väärtust, määratleb esimene väärtus lahtrite horisontaalse vahekauguse (tühik kummagi lahtri mõlemal küljel) ja teine väärtus määrab lahtritevahelise vertikaalse vahekauguse. (tühik, mis eraldab ühe lahtri põhja selle all oleva lahtri põhjast).
3. Pealdise külg
Tiitrite külje atribuut täpsustab tabeli pealdise paigutust. Tabeli pealdisele rakendamisel määrab see omadus, kas pealdis ilmub tabeli üla- või alaossa. Pealkiri ilmub tavaliselt tabeli ülaossa.
Süntaks
caption-side: top|bottom|initial|inherit;Sellel omadusel võib olla üks neljast väärtusest:
- Tiitri külg: ülemine: see on vaikimisi väärtus. Selles asetab ta pealdise tabeli kohale.
Süntaks:
caption-side:top;Kood
Väljund:
- Tiitrite külg: alt: asetab pealdise tabeli alla.
Süntaks:
caption-side:bottom;Kood
Väljund:
- Pealdise pool: algne: seda kasutatakse vara vaikeväärtuse seadmiseks.
- Subtiitrite külg: pärand : pärib selle atribuudi selle lähteelemendist.
Väärtused: ülemine, alumine, algne, päritav;
4. Tühjad lahtrid
See annab brauserile teada, kas see peaks kuvama tabeli lahtri, mis on täiesti tühi. See kontrollib eraldatud ääriste mudelit kasutavas tabelis selliste lahtrite ääriste ja tausta renderdamist, millel pole nähtavat sisu.
Süntaks:
empty-cells: show|hide|initial|inherit;Sellel omadusel võib olla üks neljast väärtusest:
- Tühi lahter: näita: seda omadust kasutatakse tühja lahtri ääriste kuvamiseks.
Süntaks:
empty-cells:show;Kood
Väljund:
- Tühi lahter: peida: seda omadust kasutatakse tühja lahtri ääriste peitmiseks.
Süntaks:
empty-cells: hide;Kood
Väljund:
- Tühi lahter: algne : seda kasutatakse vara vaikeväärtusele seadmiseks.
- Tühi lahter: pärima: pärib selle omaduse selle vanemalemendile.
Väärtused: näidata, peita, algne, pärida;
5. Lauakujundus
Juhib, kuidas veebibrauser tabelit joonistab, ja võib veidi mõjutada kiirust, millega brauser seda kuvab. Sellel omadusel võib olla üks neljast väärtusest.
Süntaks:
table-layout: auto|fixed|initial|inherit;Vaikeomadus on auto.
1. Tabelipaigutus: automaatne: automaatne muudab elementide laiuse automaatselt sisu kohandamiseks.
2. Tabel - paigutus: fikseeritud : fikseeritud säte sunnib brauserit muutma kõik veerud sama laiusega kui esimese rea veerud. Kui sisu läheb laiemalt kui esimene rida, siis see pakitakse ümber, lõigatakse ära või laiendatakse lahtritest väljapoole.
Kood
Väljund:
3. Tabelipaigutus: algne: seda kasutatakse vara vaikeväärtusele seadmiseks.
4. Tabelipaigutus : pärida: Pärib selle omaduse selle lähteelemendist.
Järeldus
CSS-i abil saame teha stiilseid tabeleid ja parandada laua välimust.
Soovitatavad artiklid
See on CSS-i tabeli kujundamise juhend. Siin käsitleme atribuute koodide, väljundite ja CSS-i tabeli kujundamise süntaksiga. Lisateavet leiate ka meie artiklitest -
- CSS eelised
- CSSi kasutusalad
- CSS-i sissejuhatus
- CSS-i teksti vormindamine