Kuva html-lehe tabeliäärised

Interneti-turundus

Sisukord:

Kuva html-lehe tabeliäärised
Kuva html-lehe tabeliäärised
Anonim

HTML-tabeli ääriseid on css-iga lihtne muuta. Nende ekraan on konfigureeritud atribuutide abil: ahendamine ja vahekaugus.

Tabelivaate muutmiseks kasutage piiride atribuutide rühma. See võimaldab teil kohandada laiust, värvi, ääriste olemasolu / puudumist, nende stiili ja muid kuvafunktsioone.

Põhitõed

Laadideta tabel näeb välja nagu ääristeta struktureeritud tekst. HTML-i tabel on loodud tänu siltidele:

  • tr stringide jaoks;
  • -s pealkirjade jaoks;
  • td veergude jaoks.

Pea Pea Pea
Cell Cell Cell
Cell Cell Cell

Teksti suurus ja font, taust, brauseriakna servast pärit polsterdus määratakse sisukonteineris css-is.


body { font-family: Helvetica, Sans-serif; fondi suurus: 5vw; värv: must; taustavärv: rgba(228, 228, 245); polsterdus: 20vh }
Ilma registreerimata

Stiilide abil loovad nad välja maatriksi välimuse. Piirivara võimaldab kirjutadahtml-tabeli äärise paksuse, tüübi ja värvi väärtus.


{ äärise laius: 2vw; ääriste stiil: täpiline; äärise värv: taevasinine }

Lühendatult malli äärisega: laiuse stiili värv.


{ ääris: 1px solid 4c6ea1; }

Teatud külje jaoks määrake vastav alt mustrile border-top(/parem/ alt/vasak)-stiil(/värv/laius/raadius).


{ äärise ülaosa värv: tumesinine; }

Padding määrab täidise lahtri sees tekstist raamini, teksti joondamine määrab joonduse.

Stiilide abil kujundavad need välja tabeli välimuse. Piiri atribuut võimaldab teil määrata äärise laiuse, stiili ja värvi. Padding määrab teksti täidise, teksti joondamine määrab joonduse.


th, td { border: 1vw solid 4c6ea1; polster: 1vw; teksti joondamine: vasakule; }
Lahtri piirid

Raame pole

Ei ole vaja kasutada äärist ega määrata piiri värvi, laiuse ja stiili eraldi, kuna saate teha ääristeta html-tabeli täiskujundusega. Näiteks määrab järgmine kood tausta, polsterduse ja ümardatud nurgad (viimane maatriks ilma sisemise ja välimise jooneta).


table { text-align: left; taustavärv: rgba(228, 228, 245); ääris-ülemine-vasak-raadius: 15em 1em; ääris-all-parem-raadius: 15em 1em; } td, th { polster: 1,5vw; }
Tabel ilma ääristeta

Kui igale lahtrile on võimalik määrata taust, võib ääristeta tabel välja näha, nagu oleks sellel äärised.


table { text-align: left; taustavärv: rgba(228, 228,245); laius: 70vw; piiride vahe: 2vh 2vh; } td, th { polster: 1,5vh; } td { taustavärv: rgba(247, 247, 255); }
Rakkude taust

Html-tabeli äärised saate eemaldada, jättes alles sisemised. Selleks määravad nad näiteks lahtrite piiriomaduse (tr), seavad külgnevatele külgedele ühised raamid (kokkutõmbamine) ja keelavad maatriksi ümber joonte tõmbamise (peidetud). Viimane toiming peidab lahtriread, mis, kui ahendamine on lubatud, asuvad tabeli välisservadega samas kohas.


tabel { text-align: center; border-collapse: kollaps; taustavärv: rgba(228, 228, 245); piiri raadius: 50% laius: 29vh; kõrgus: 10vh; ääriste stiil: peidetud; } td { polster: 1,5vh; ääris: 0,5vh täismust; }
Diagramm tabelist

Ahenda ja eralda

Html-i üks peamisi tabeli atribuute – border-collapse – määrab, kuidas lahtripiire kuvatakse. Atribuudil võib olla üks kolmest väärtusest: ahenda, eralda, päri.


tabel { border-collapse: kollaps; }

Vaikimisi on määratud eraldama, nii et igal lahtril on oma ääris. Tänu kokkuvarisemisele saate rakuliinid liita nii, et nende sisu eraldatakse ühe kaadriga. Pildil on kolm ülalkirjeldatud piiri olekut: stiilid puuduvad; vaikimisi piiride kokkutõmbamisega; piiride ahendamisega, jättes lahtrite vahele ühise joone.

Stiilid ja piiride kokkuvarisemine

Topeltraamid

Ahendamise atribuut võimaldab teil teha HTML-tabelis lahtripiiremõlemad üksteisest sõltumatud ja ühised. Seda kasutatakse sageli koos atribuudiga border-spacing, mis kontrollib lahtripiiride vahelist vahekaugust. Saate määrata nii horisontaalse kui ka vertikaalse vahekauguse.


tabel { piirdevahe: 0,5vw 1vw; }

Esimene väärtus näitab lahtrite vahelist kaugust horisontaalselt, teine ​​- vertikaalselt. Kui raam on seatud tabeli enda jaoks, siis selle kauguse lahtriteni moodustab ka spasing omadus, kuid seda võib mõjutada ka maatriksi polsterdus. Juhtudel, kui maatriksil on taust, täidetakse lahtrite vaheline vaba ruum sellega.


tabel { piirdevahe: 0,5vw 1vw; ääris: 1vw solid 4c6ea1; polster: 1vw; taustavärv: must } td, th { border: 1vw solid 4c6ea1; polster: 0,3vw teksti joondamine: vasakule; taustavärv: valge }
piiride vahe

Tühjad lahtrid

Kui tabel ei ole seatud lahtrite ääriste kombineerimiseks, võimaldab tühjade lahtrite atribuut kuvada nende ridu ja tausta, mida peetakse tühjaks (märgitud kui nähtavus või millel pole märke). Kui soovite näidata iga lahtri ääriseid ja tausta, määrake atribuut kuvamiseks.


tabel { tühjad lahtrid: näita; }

Peida väärtus peidab tühjade kastide äärised ja taustad. Kui kõik rea lahtrid on tühjad, on real null kõrgus ja ainult üks vertikaalne joon.


tabel { piirdevahe: 0,5vw 1vw; piir: 0.1vw solid 4c6ea1; polster: 0,5vw taustavärv: rgba(33, 31, 171, 0,12); tühjad lahtrid: peida; } td, th { border: 0.3vw solid 4c6ea1; polster: 0,5vw teksti joondus:vasakule; taustavärv: valge }
tühjad rakud

Atribuut

Elementide rühmade (lahtrid, veerud, read, ridade või veergude rühmad) piiride määramiseks on olemas atribuut reeglid. Selle väärtus kirjutatakse otse tabelisildi html-i.

See võimaldab teil valikuliselt joonistada elementide piire. Piisab atribuudi määramisest html-is, see loob lahtrite vahele sisemised read. Html-tabeli ääris tuleb css-is käsitsi määrata.


Pea Pea Pea
Cell Cell Cell
Cell Cell Cell

tabel { border-top: 1vw solid 486743; fondi suurus: 5vw; } th, td { polster: 2vw; }
Atribuut elementidele ääriste joonistamiseks

Niisiis, esimene pilt näitab puhast atribuudi toimimist ilma täiendavate ääristeta tabeli kaudu. Teisel pildil on lõpetatud ülemine rida, mis määratakse juhise kaudu.


tabel { border-top: 1vw doted 486743; }

Atribuudil võib olla mitu väärtust. Kõik loob lahtrite vahele äärised, mille äärise laius on 1px. Cols loob read veergude vahele, read loob read ridade vahele, ükski ei kustuta servi. Pildil on näited tabelist kõigi ja ridade väärtustega.

Kõik ja read

Muutke lahtri piiri värvi ja raami laiust, kui kasutate reeglite atribuuti, kasutades äärise ja äärise värvi.

Stiilikonfliktid

Lahtrid, read,veergudele ja elemendirühmadele saab anda oma piiriväärtused. Samal ajal võivad need erineda kolme parameetri poolest: stiil, paksus ja värv.

Kujunduskonfliktid tekivad ahendamise režiimis. Kuna ühele äärisele võib kehtida kahe erineva lahtri reegel, tekib probleem prioriteetse stiili valimisel. E. Malchuki sõnul võidab kõige "meeldivam" (välja arvatud peidetud).

  1. Kui ühe elemendi vaidlusalune ääris on peidetud ääriste stiilis atribuudis, võidab see stiil. Peidetud on kõrgeima prioriteediga.
  2. Väikseim kaal puudub. Samuti nõuab see, et rida ei kuvata, kuid käskkirja täitmiseks peab kõigil selle rea elementidel olema see (pole) reegel.
  3. Õhukeste ja paksude ääriste vahel on paksud äärised ülimuslikud.
  4. Samade raamide, kuid erinevate stiilide korral võidab alati topelttahke (topelt), millele järgneb pidev, katkendlik (kriips), punktiirjoon.
  5. Kui erinevus on ainult värvides, on väikseim komponent alati kõrgem (lahtri stiil on ülimuslik ridade suhtes ja read tabelite suhtes).

Konflikti illustratsioon

Stiilikonflikti on lihtne illustreerida juba käsitletud tabeliga. Piisab, kui lisada lahtritesse paar klassi ja määrata neile kujundus. HTML muutub:


Pea Pea Pea
Cell Cell Cell
Cell Cell Cell

Sellele vastav css.


body { font-family: Helvetica, Sans-serif; fondi suurus: 5vw; värv: must; marginaal: 0; laius: 80vw; taustavärv: valge polster: 3vw } tabel { taustavärv: rgba(33, 31, 171, 0,12); polster: 0,5vw border-collapse: kollaps; piiride vahe: 0,5vw 1vw; ääriste stiil: peidetud; } th { polster: 1vw; teksti joondamine: vasakule; piir: 0.1vw solid 4c6ea1; } td { polster: 1vw; ääris: 0,2vw punktiir 4c6ea1; }.second_cell { border: 0.01vw solid 4c6ea1; }.third_cell { border: 0.01vw double red; }
Piirikonflikt

Raamistiilid

Äärise kaunistusi saab määrata lahtri mõlemale küljele eraldi. Selleks piisab, kui märkida ääriste stiilis mitte üks väärtus, vaid loetleda vastav alt neli väärtust lahtri külgedele.


th, td { polster: 1vw; teksti joondamine: vasakule; piiri laius: 0,5vw äärise värv: tumepunane ääriste stiil: täpiline; }.seven { border-top-color: taevasinine; border-top-style: solid; ääris-parem-laius: 2vw; border-bottom-style: katkendlik; border-left-style: peidetud; }
Lahtri ääriste stiilid

Saate määrata andmed ühel real, sisestades ühe kuni nelja erineva väärtuse. Igast neist saab traditsiooniliselt ühe osapoole juhis.

  • Kui paned kaks väärtust, vastutab esimene alumise ja ülemise piiri eest, teine ​​vasaku ja parema piiri eest.
  • Kolmest vastutab esimene ülemise, teine ​​vasaku ja parema, kolmas alumise rea eest.
  • Neli väärtust määravad kordumatult iga read, alustades ülemisest kunipäripäeva vasakule.

Samuti saate määrata lahtri piiride välimuse, kasutades lihtsat andmete määratlust kummagi poole jaoks, nagu ülal näidatud.

Kokku on kümme raami stiili. Nad kõik muudavad rida või eemaldavad selle:

  • puudub – ääris puudub;
  • peidetud – rangem puudub, blokeerib kriipsu ilmumise (konfliktiolukorras);
  • täpiline – punktidest;
  • kriips – kriips;
  • tahke – tahke;
  • double – topelttahke;
  • soon - raam tundub olevat pinna sisse surutud;
  • harja – kumer joon;
  • sisustus – tegelikult käitub elemendi üks külg nagu hari, kui seda rakendatakse kogu elemendile, on ülemine ja vasak varjutatud ning alumine ja parempoolne on esile tõstetud;
  • algus – käitub elemendi ühele küljele kandmisel nagu soon, varjutades alaosa ja paremat osa, muutes ülemise ja vasaku heledamaks.

Igale lahtrile (ülemine ja vasak pool) rakendatakse ühte stiili. Et nad omavahel ei võistleks, on "nõrgematel" kõige suurem väärtus.


tabel { taustavärv: rgba(33, 31, 171, 0,12); polster: 0,5vw border-collapse: kollaps; ääris: 0,3vw täismust; } th, td { polster: 1vw; teksti joondamine: vasakule; }.one { border-top: peidetud; border-left: peidetud; }.two { border-top: 0.4vw double 4c6ea1; border-left: 0,4vw double 4c6ea1; }.three { border-top: 0,5vw solid 4c6ea1; border-left: 0,5vw solid 4c6ea1; }.four { border-top: 0.7vw katkendlik 4c6ea1; ääris-vasak: 0,7vw katkendlik 4c6ea1; }.five { border-top: 0.8vw dotted4c6ea1; border-left: 0,8vw punktiir 4c6ea1; }.six { border-top: 0.9vw ridge 4c6ea1; ääris-vasak: 0,9vw ridge 4c6ea1; }.seven { border-top: 1vw outset 4c6ea1; border-left: 1vw outset 4c6ea1; }.eight { border-top: 1.1vw soon 4c6ea1; ääris-vasak: 1.1vw soon 4c6ea1; }.nine { border-top: 1.2vw inset 4c6ea1; ääris-vasak: 1,2vw sisestus 4c6ea1; }
Stiilide rakendamine

Struktuurmaterjal

Maatriksis esitatavate andmete olemus nõuab sageli tabeli enda, selle lahtrite, ridade või veergude ääriste muutmist. Selleks võite kasutada:

  • nullimisjooned (äärise laiuse jaoks määrake väärtus 0px);
  • peidetud.

Varjatud eelised on selle prioriteedi tugevus. Kui äärist mõjutab korraga kahe elemendi reegel ja ühel neist on äärise stiil peidetud, siis joont ei kuvata. See tähendab, et saate ohutult teha terve tabeli ja seejärel valikuliselt eemaldada mittevajalikud raamid.

Lahtrites peidetud kasutamine muudab piiride taastamise muude meetoditega võimatuks (va raskekaalu !oluline). Seega, kui teil on vaja eemaldada mõned lahtrite küljed, on parem mitte ühtegi külge kasutada.

Oletame, et on olemas tabel. Eesmärk on eemaldada esimese rea vertikaalsed äärised. See on tähistatud eraldi sildiga (pealkirjaga), seega pole lisaklassi vaja. Kui rakendate peidetud kogu märgendile, määrates selle äärisele vasakule, siis koos sisemiste ääristega eemaldatakse üks osa tabeli külgraamist, mida tingimus ei nõudnud. Kui aga kasutadanone ja maatriksjoon, siis on sisemiste tunnuste jaoks kaks mittekonfliktset reeglit ja ükski välisserva jaoks pole vastuolus sellele tabelis antud reegliga ja külg jääb paigale.

Varjatud ja mitte ühtegi

Üksikute lahtriridade eemaldamine toimub klasside abil, mis on määratud vastavatele elementidele, nagu on näidatud individuaalse stiili, laiuse ja värvi jaoks.

Kuigi HTML-tabeli külgäärise eemaldamine on lihtsam, kui viidata tabelis näidatud maatriksi välispiiridele. Piisab, kui kirjutada css-is konkreetse rea märge.


tabel { border-left-style: peidetud; }

Ridade ääriste eemaldamist on lihtne rakendada, kui äärise atribuudiks on määratud tr-s peidetud. Kaovad mitte ainult laua horisontaalsed jooned, vaid ka külgmised. Maatriks degenereerub vertikaalseteks veergudeks.


tr { border-style: peidetud; }

Kasutage !olulist viimase abinõuna. Selle lisamine pärast juhist annab sellele erilise prioriteedi.

HTML-tabeli äärised on paindlikud ja neid on lihtne kohandada. Piiri atribuutide rühm võimaldab peita elemente, muuta värvi, laiust või stiili. Tabelite puuduseks on see, et ühele elemendile rakendatud reeglite kombinatsiooni tulemus ei ole alati üheselt ennustatav. Seda silmas pidades on soovitatav kas vähendada ääriste võimalike stiilide arvu või rakendada neid punktide kaupa.

Populaarne teema