- Kuidas lisada tabelireale
äärist alaosa? - Määra äärise alumine elemendiks Tabeli rida
element - Stiilitabeli element
- Stiili 'td' element
- Stiili 'tr' element
Kuidas lisada tabelireale
äärist alaosa? Tabelireale äärise põhja lisamine lisab äärise kogu reale, et luua parem visuaalne kogemus ja meelitada kasutaja tähelepanu.
Üksikasjalik näide äärise põhja lisamisest tabelireale
on näidatud allpool:
Määrake äärise alaosa väärtuseks Tabeli rida
Looge meie HTML-failis lihtne tabel, mis sisaldab 3 rida ja 3 veergu, mis on tehtud
, ja elementide abil:
< laud >
< tr klass = 'rida' >
< th > Nimi < / th >
< th > Olek < / th >
< th > Ruum nr < / th >
< / tr >
< tr klass = 'rida' >
< td > Fakhar < / td >
< td > Üliõpilane < / td >
< td > 05 < / td >
< / tr >
< tr klass = 'rida' >
< td > Omar < / td >
< td > Üliõpilane < / td >
< td > 05 < / td >
< / tr >
< / laud >Ülaltoodud koodilõigu puhul oleme tabeliridadele
määranud klassi “rida”, et sellele saaks hiljem CSS-is juurde pääseda.
Veebileht näeb välja selline:
Stiilitabeli element
Valige CSS-i osas tabeli element ja joondage tekst keskele. Pärast seda kasutage ' piiri-kokkuvarisemine ” atribuut, et määrata selle väärtus ahenema:
laud
{
border-collapse: kollaps;
teksti joondamine: keskel;
}Stiili 'td' element
Parema visuaalse esituse huvides lisame tabeliandmetele “
” ja tabeli päise “ ” elementidele 20 pikslit: td
{
polster: 20px;
}
th
{
polster: 20px;
}Väljund näeb välja selline:
Ülaltoodud väljundis on näidatud 20 piksli täidis ja tekst on joondatud keskele.
Stiili 'tr' element
Lisage CSS-failis atribuut border-alt alumine atribuut 'tr' valija alla. See määrab igale tabeli reale, sealhulgas pealkirjareale. Näiteks määrake selle väärtuseks 2px solid darkcyan:
tr {
ääris-alumine: 2px tahke tumetsüaan;
}Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja järgmine:
See on kõik, kuidas lisada ääris iga tabelirea lõppu
”. Järeldus
Elemendi
allserva äärise lisamiseks määrake CSS-i atribuut border-collapse ahendamiseks ja kasutage elemendi ' ' atribuuti border-bottom. See võimaldab CSS-i atribuudil rakendada tabelile piire. Nii saate hõlpsasti lisada igale '
' märgisele äärise põhja. - Määra äärise alumine elemendiks Tabeli rida