Lærðu hvernig á að búa til CSS töflu landamæri á aðeins fimm mínútum
Þú gætir hafa heyrt að CSS og HTML töflur blanda ekki saman. Þetta er einfaldlega ekki satt. Já, með því að nota HTML töflur fyrir skipulag er ekki lengur besta hönnun vefhönnunar, en það hefur verið skipt út fyrir CSS skipulagsstíl, en töflur eru enn réttar uppsetningar til að nota til að bæta við töfluupplýsingum á vefsíðu.
Því miður, vegna þess að svo margir fagfólk í vefjum hafa skotið frá borðum og hugsað að þau séu eitur, hafa margir þessir sérfræðingar litla reynslu af því að vinna með þetta sameiginlega HTML frumefni og baráttuna þegar þeir þurfa að takast á við þær á vefsíðu. Til dæmis, ef þú ert með borð á síðu og þú vilt bæta innri línur við borðfrumurnar.
CSS Tafla Landamæri
Þegar þú notar CSS til að bæta við landamærum í töflur, bætir það aðeins við landamærin utan um borðið. Ef þú vilt bæta innri línum við einstökum frumum þessar töflu þarftu að bæta við landamærum við innri CSS þættina. Þú getur líka notað HR merkið til að bæta við línum innan einstakra frumna.
Til þess að beita stílunum sem fjallað er um í þessari grein ættir þú að sjálfsögðu að hafa borð á vefsíðunni þinni. Þú ættir þá að búa til stílblað sem innri stíll lags í höfuðinu á skjalinu þínu (þú mun líklega gera þetta aðeins ef "vefsvæðið þitt" er einn síðu) eða fylgir skjalinu sem utanaðkomandi stíll lak (þetta er það sem þú gerir mun gera ef vefsíðan þín er margar síður sem leyfir þér að stilla allar síðurnar úr einu ytri blaði). Þú setur stíllinn til að bæta innri línum inn í þessi stíl blað.
Áður en þú byrjar
Fyrst þarftu að ákveða hvar þú vilt að línurnar birtast í borðið. Þú hefur nokkra möguleika, þar á meðal:
- Umkringdur öllum frumum til að mynda rist;
- Staðsetning línanna milli bara dálka;
- Bara á milli raða; eða
- Milli tiltekinna dálka eða raða.
Þú getur einnig staðsetur línur um einstaka frumur eða innan einstakra frumna.
Hvernig á að bæta við línum um öll frumurnar í töflu
Til að bæta við línum í kringum öll frumur í töflunni skaltu búa til þá töflu sem fylgir með því að bæta við eftirfarandi við stílblað þitt:
td, th {
landamæri: solid 1px svartur;
}
Hvernig á að bæta við línum milli bara dálka í töflu
Til að bæta við línum milli dálka (þetta skapar lóðréttar línur sem birtast frá toppi til botns í dálkum töflunnar), bætið eftirfarandi við stílblaðinu þínu:
td, th {
landamæris-vinstri: solid 1px svartur;
}
Þá, ef þú vilt ekki að þau birtist í fyrstu dálknum, þá verður þú að bæta við flokki í þá og td frumur. Í þessu dæmi gerum við ráð fyrir að við höfum flokk af neitandi landamærum á þessum frumum og við fjarlægjum landamærin við þessa nákvæmari CSS reglu. Svo hér er HTML kennslan sem við myndum nota:
class = "no-border">
Og þá gætum við bætt eftirfarandi stíl við stílblað okkar:
.no landamærin {
landamæris-vinstri: enginn;
}
Hvernig á að bæta við línum milli rétta í töflu
Eins og með því að bæta við línum milli dálka er hægt að gera þetta með einum einföldum stíl bætt við stílblað þitt. Neðan CSS myndi bæta við lóðréttum línum milli hverja röð borðsins:
tr {
Landamæri-botn: solid 1px svartur;
}
Og til að fjarlægja landamærin frá neðst á töflunni, myndirðu enn einu sinni bæta við bekknum við það tag:
class = "no-border">
Bættu eftirfarandi stíl við stílblað þitt:
.no landamærin {
landamærisbundinn: enginn;
}
Hvernig á að bæta við línum milli tiltekinna dálka eða raða í töflu
Ef þú vilt aðeins línur á milli tiltekinna röða eða dálka þarftu að nota flokk á þeim frumum eða röðum. Að bæta línu milli dálka er örlítið erfiðara en á milli raða vegna þess að þú verður að bæta við bekknum í hvert reit í þessum dálki. Ef borðið þitt er sjálfkrafa myndað af CMS af einhverju tagi gæti þetta ekki verið mögulegt, en ef þú ert handhönnun á síðunni getur þú bætt við viðeigandi flokkum eftir þörfum til að ná þessum áhrifum.
class = "sid-border">
Bæti línur milli raða er miklu auðveldara, þar sem þú getur bara bætt við bekknum í röðina sem þú vilt línuna á.
class = "border-bottom">
Bættu síðan við CSS við stílblaðið þitt:
.border-side {
landamæris-vinstri: solid 1px svartur;
}
.border-bottom {
Landamæri-botn: solid 1px svartur;
}
Hvernig á að bæta við línur um einstök frumur í töflu
Til að bæta við línum í kringum einstök frumur, bætirðu við flokk við frumurnar sem þú vilt landamærum í kringum:
class = "border">
Og þá bæta við eftirfarandi CSS við stílblað þitt:
.border {
landamæri: solid 1px svartur;
}
Hvernig á að bæta við línum innan einstakra frumna í töflu
Ef þú vilt bæta við línum inni í innihaldi klefi er auðveldasta leiðin til að gera þetta með láréttri reglumerkinu (
).
Gagnlegar ráðleggingar
Ef þú tekur eftir eyður í mörkum þínum, ættir þú að ganga úr skugga um að landamæri hrunið sé sett á borðið. Bættu eftirfarandi við stílblað þitt:
borð {
landamæri: hrynja;
}
Þú getur forðast öll ofangreint CSS og notað landamerki eiginleiki í töflumerkinu. Gerðu hins vegar grein fyrir að eiginleiki hans, en ekki úr gildi, er verulega minni sveigjanlegur en CSS, þar sem þú getur aðeins skilgreint breidd landamæranna og getur aðeins haft það í kringum öll frumur borðsins eða enginn.