Kuidas lisada CSS-i tabelisse siselende (piirid)

Lugege, kuidas CSS-i tabeli piiri luua vaid viis minutit

Võib-olla olete kuulnud, et CSS ja HTML-tabelid ei sega. See ei ole lihtsalt tõsi. Jah, paigutuse HTML- tabelite kasutamine ei ole enam veebidisaini parim tava, kuna see on asendatud CSS-i kujundusstiilidega, kuid tabelid on ikkagi õige märgistus, mida saab kasutada tabelis andmete lisamiseks veebilehele.

Kahjuks on paljud veebipõhised spetsialistid tabelist eemale tõrjunud, arvates, et nad on mürk, on paljudel nendel spetsialistidel vähe kogemusi selle ühise HTML-i elemendiga ja võitlust, kui nad peavad neid veebisaidil käsitlema. Näiteks kui teil on lehel tabel ja soovite lisada lahtrisse siseliine.

CSS tabeli piirid

Kui kasutate tabelite piiride lisamiseks CSS-i , lisab see ainult tabeli välispinna piiri. Kui soovite selle tabeli üksikutele lahtritele lisada siseliine, peate sisemistele CSS-elementidele lisama piirid. Samuti saate kasutada HR-sildi, et lisada read üksikutesse elementidesse.

Käesolevas artiklis käsitletud stiilide rakendamiseks peaksite ilmselgelt oma veebisaidil olema tabel . Seejärel peaksite oma dokumendi peas sisaldama stiililehte sisemise stiililehe kujul (tõenäoliselt teeme seda ainult siis, kui teie "sait" on üks lehekülg) või lisatud dokumendina välise laadilehe (see on see, mida te teeb siis, kui teie saidil on mitu lehte - mis võimaldab teil kõik lehed ühe välise lehe stiilis kujundada). Te panete stiile, et siseliide lisada sellesse stiilile.

Enne kui alustad

Esiteks peate otsustama, kus soovite, et read kuvatakse teie tabelis. Teil on mitu võimalust, sealhulgas:

Samuti saate positsioneerida read üksikute elementide või üksikute elementide sees.

Kuidas lisada liine kõik tabelis olevad lahtrid

Tabeli kõikide lahtrite ridade lisamiseks, selle võrgupõhise efekti loomiseks lisage oma stiililehte järgmiselt:

td, th {
piir: tahke 1px must;
}

Kuidas lisada liine lihtsalt tabeli veerus

Veerudevaheliste ridade lisamiseks (see loob vertikaaljooned, mis kulgevad tabeli veergudest ülalt alla), lisage oma stiililehte järgmiselt:

td, th {
piir-vasak: tahke 1px must;
}

Kui te ei soovi, et need kuvatakse esimeses veerus, peate lisama klassi nendele th ja td- rakkudele. Selles näites eeldame, et neil rakkudel on meil piiriüleste klasside klass, ja eemaldame piiri selle täpsema CSS-i reegliga. Nii et siin on HTML-klass, mida kasutame:

klass = "no-border">

Ja siis võime lisada meie stiililehe järgmise stiili:

.no-border {
border-left: none;
}

Kuidas lisada ridasid lihtsalt ridade vahel tabelisse

Nagu veergude vaheliste ridade lisamisel, saate seda teha vaid ühe lihtsa stiiliga, mis on lisatud teie stiililehele. Allpool olev CSS lisab tabeli iga rea ​​vahele vertikaalsed jooned:

tr {
border-bottom: tahke 1px must;
}

Ja et eemaldaksite tabeli alaosast piiri, lisage jälle selle tr-sildi klass:

klass = "no-border">

Lisage stiilile järgmine stiil:

.no-border {
border-bottom: puudub;
}

Kuidas lisada tabeleid konkreetsete veergude või ridade vahel

Kui soovite ainult konkreetsete ridade või veergude vahelisi ridu, peate nendele elementidele või ridadele kasutama klassi. Veerudevahelise joone lisamine on mõnevõrra raskem kui ridade vahel, kuna peate lisama klassi igasse selles veerus olevasse lahtrisse. Kui teie tabel genereeritakse automaatselt mõnevõrra CMS-ist , ei pruugi see olla võimalik, kuid kui olete leht käsitsi kodeerinud, võite selle efekti saavutamiseks lisada sobivad klassid.

class = "side-border">

Ridadevahelised lisad on palju lihtsamad, kuna saate lisada klassi rida, kuhu soovite rida lisada.

class = "border-bottom">

Seejärel lisage oma stiililehe CSS:

.poordipoolne {
piir-vasak: tahke 1px must;
}
.border-põhi {
border-bottom: tahke 1px must;
}

Kuidas lisada tabelisid üksikutele rakkudele

Üksikute lahtrite lisamiseks ridade lisamiseks lisage klass lahtritesse, kuhu soovite piiri ümber:

class = "border">

Seejärel lisage oma laadilehele järgmine CSS:

.order {
piir: tahke 1px must;
}

Kuidas lisada tabelisse üksikute rakkude ridu

Kui soovite lisada lahtri sisu jooni, on kõige lihtsam seda teha horisontaalse eeskirja märgendiga (


).

Kasulikud nõuanded

Kui märkate piire lüngad, peate veenduma, et teie lauale on määratud piiri kollapsi stiil. Lisage oma stiililehte järgmiselt:

tabel {
piiride kokkuvarisemine: kokkuvarisemine;
}

Saate vältida kõiki ülaltoodud CSS-i ja kasutada oma tabeli sildis piiri atribuuti. Kuid mõistke siiski, et tema atribuut, mis ei ole aegunud, on tunduvalt paindlikum kui CSS, kuna saate määratleda ainult piiri laiuse ja seda saab kasutada ainult kõigi tabeli lahtrite ümber või mitte.