Uzziniet, kā izveidot CSS tabulas malu tikai piecas minūtes
Jūs, iespējams, dzirdējāt, ka CSS un HTML tabulas nesajauc. Tas vienkārši nav taisnība. Jā, izkārtojuma HTML tabulu izmantošana vairs nav labākā tīmekļa dizaina prakse, kas ir aizstāta ar CSS izkārtojuma stiliem, taču tabulas joprojām ir pareizā atzīme, ko izmantot, lai pievienotu tabulāros datus tīmekļa lapai.
Diemžēl tāpēc, ka tik daudzi tīmekļa profesionāļi ir apslāpušies no tabulām, uzskatot, ka tie ir inde, daudziem no šiem speciālistiem ir maz pieredze darbā ar šo kopējo HTML elementu un cīņu, kad viņiem ir jārīkojas ar tiem tīmekļa vietnē. Piemēram, ja lapai ir tabula, un vēlaties pievienot tabulas šūnām iekšējās rindas.
CSS tabulas robežas
Ja izmantojat CSS, lai pievienotu tabulas malām, tā tikai papildina robežu pie galda ārpuses. Ja vēlaties pievienot iekšējās līnijas atsevišķām šīs tabulas šūnām, jums jāpievieno iekšējās CSS elementu robežas. Jūs varat arī izmantot HR tag, lai pievienotu līnijas atsevišķās šūnās.
Lai piemērotu stilu, uz ko attiecas šis raksts, jums, protams, ir jābūt tabulai savā tīmekļa lapā. Pēc tam dokumenta galvai vajadzētu izveidot stilu lapu kā iekšējo stilu lapu (jūs, iespējams, izdarīsit tikai tad, ja jūsu vietne ir viena lapa) vai pievienota dokumentam kā ārēja stila lapa (tas ir tas, ko jūs darīs, ja jūsu vietnei ir vairākas lapas, ļaujot jums izveidot visas lapas no vienas ārējās lapas). Jūs ievietosiet stilus, lai šajā stilā ievietotu interjera līnijas.
Pirms sākat darbu
Vispirms jums ir jāizlemj, kur vēlaties rindas parādīties jūsu galda. Jums ir vairākas iespējas, tostarp:
- Visu šūnu ap to, kas veido tīklu;
- Rindu pozicionēšana starp kolonnām;
- Tikai starp rindām; vai
- Starp konkrētām kolonnām vai rindām.
Varat arī novietot līnijas ap atsevišķām šūnām vai atsevišķu šūnu iekšpusē.
Kā pievienot līnijas ap visām šūnām tabulā
Lai pievienotu rindas pa visām tabulā esošajām šūnām, izveidojot šo tīklu līdzīgu efektu, pievienojiet savai stila lapai šādus elementus:
td, th {
robeža: cieta 1px melna;
}
Kā pievienot rindas starp tabulas kolonnas
Lai pievienotu rindas starp kolonnas (tas izveido vertikālas līnijas, kuras tabulas slejās sākas no augšas uz leju), pievienojiet savai stila lapai šādus elementus:
td, th {
robeža-kreisais: ciets 1px melns;
}
Tad, ja jūs nevēlaties, lai tie parādās pirmajā kolonnā, jums būs jāpievieno klase tiem th un td šūnām. Šajā piemērā mēs pieņemam, ka šīm šūnām mums ir klase bez robežām , un mēs noņemam robežu ar šo konkrētā CSS noteikuma palīdzību. Tātad, šeit ir HTML klases mēs izmantotu:
class = "no-border">
Un tad mēs varētu pievienot šādu stilu mūsu stilu lapā:
.ne-border {
robeža-kreisais: nav;
}
Kā pievienot rindas starp rindām tabulā
Tāpat kā rindu pievienošana starp kolonnām, jūs varat to izdarīt tikai ar vienu vienkāršu stilu, kas pievienots jūsu stilu lapai. Zemāk esošā CSS pievienotu vertikālās līnijas starp katru mūsu tabulas rindu:
tr {
robeža-apakšā: cieta 1px melna;
}
Un, lai noņemtu robežu no tabulas apakšas, jūs atkal pievienosit šo tr tagu klasi:
class = "no-border">
Pievienojiet stilam šādu stilu:
.ne-border {
border-bottom: nav;
}
Kā pievienot rindas starp īpašām slejām vai rindām tabulā
Ja jūs vēlaties tikai līnijas starp noteiktas rindas vai kolonnas, šajās šūnās vai rindās jāizmanto klase. Rindas pievienošana starp kolonnām ir nedaudz sarežģītāka nekā starp rindām, jo jums ir jāpievieno klase katrai šai kolonnai. Ja jūsu tabula tiek automātiski ģenerēta no kāda veida CMS , tas var nebūt iespējams, taču, ja lapas ir kodētas ar roku, varat pievienot atbilstošas klases, lai sasniegtu šo efektu.
klase = "sānu robeža">
Rindu pievienošana rindām ir daudz vieglāka, jo jūs varat vienkārši pievienot klasi rindai, kurā vēlaties rindu.
class = "border-bottom">
Pēc tam pievienojiet CSS savai stila lapai:
robežas pusē {
robeža-kreisais: ciets 1px melns;
}
robeža-apakšdaļa {
robeža-apakšā: cieta 1px melna;
}
Kā pievienot līnijas ap atsevišķām šūnām tabulā
Lai pievienotu līnijas ap atsevišķām šūnām, jūs pievienojiet kategoriju šūnām, kurām vēlaties aprobežot:
class = "border">
Un pēc tam pievienojiet savu CSS stilu lapu:
robeža {
robeža: cieta 1px melna;
}
Kā pievienot tabulas atsevišķās šūnās
Ja vēlaties pievienot rindiņas šūnas saturā, vienkāršākais veids, kā to izdarīt, ir horizontālā noteikuma taga (
).
Noderīgi padomi
Ja pamanāt nepilnības jūsu robežās, jums jāpārliecinās, vai jūsu galdam ir iestatīts robežas sabrukšanas stils. Pievienojiet savai stila lapai šādu informāciju:
tabula {
robežas sabrukums: sabrukums;
}
Jūs varat izvairīties no visas iepriekšminētās CSS un izmantot tabulas tagā robežas atribūtu. Tomēr apzināties, ka viņa atribūts, lai arī tas nav novecojis, ir ievērojami mazāk elastīgs nekā CSS, jo jūs varat definēt tikai robežas platumu un to var apskatīt tikai pa visām tabulas šūnām vai ne.