Jūs, iespējams, dzirdējāt, ka CSS un HTML tabulas nesajauc. Tas tā nav. Jā, izkārtojuma HTML tabulu izmantošana vairs nav labākā prakse, jo tās ir aizstātas 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.
Tā kā tik daudzi tīmekļa speciālisti nenoķer galdus, domājot, ka tie ir nekas, bet nepatikšanas, daudziem no šiem speciālistiem ir maza pieredze darbā ar šo kopējo HTML elementu, un viņi cīnās, kad viņiem ir jāpievieno iekšējās līnijas, lai tabulā ievietotu tīmekļa vietnes.
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 izmantot HR tagu, lai pievienotu līnijas atsevišķās šūnās.
Lai pielietotu šajā apmācībā aprakstītos stilus, tīmekļa lapās ir nepieciešama tabula. Tad jūs izveidojat stila lapu kā iekšējo stilu lapu sava dokumenta galā (ja jums ir darīšana tikai ar vienu lapu) vai pievienota dokumentam kā ārējā stila lapa (ja vietnei ir vairākas lapas). Jūs ievietojat stilus, lai ievietotu interjera līnijas stilā.
Pirms sākat darbu
Izvēlieties, kur vēlaties, lai līnijas parādās tabulā. 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
- 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 līnijas ap visām tabulas šūnām, izveidojot režģa efektu, pievienojiet savu stilu tabulai sekojošo:
td, th {robeža: cieta 1px melna;} Lai pievienotu rindas starp kolonnām, lai izveidotu vertikālas līnijas, kas tabulas kolonnās tiek virzītas no augšas uz leju, pievienojiet savai stilu tabulai šādus elementus: td, th {robeža-kreisais: ciets 1px melns;} Ja jūs nevēlaties, lai vertikālās līnijas parādās pirmajā slejā, jūs pievienojat klasi th un td šūnas. Šajā piemērā pieņemt klasi bez robežām uz šīm šūnām un noņemiet robežu ar CSS noteikumu. Izmantojamā HTML klase ir: class = "no-border"> Pēc tam pievienojiet stila tabulai šādu stilu: .ne-border {robeža-kreisais: nav;} Tāpat kā ar rindu pievienošanu starp kolonnām, jūs varat pievienot horizontālās līnijas starp rindām ar vienu vienkāršu stilu, kas pievienots stilu lapai, šādi: tr {robeža-apakšā: cieta 1px melna;} Lai no tabulas apakšdaļas noņemtu robežu, jūs atkal pievienosiet to kategorijai tag: class = "no-border"> Pievienojiet stilam šādu stilu: .ne-border {border-bottom: nav;} 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"> Vieglāk pievienot rindas starp rindām, jo jūs varat pievienot klasi rindai, kurā vēlaties rindu. class = "border-bottom"> Pēc tam pievienojiet CSS savai stilu lapai: robežas pusē {robeža-kreisais: ciets 1px melns;}robeža-apakšdaļa {robeža-apakšā: cieta 1px melna;} Lai pievienotu līnijas ap atsevišķām šūnām, jūs pievienojiet kategoriju šūnām, kurām vēlaties aprobežot: class = "border"> Tad pievienojiet savai stilu tabulai šādu CSS: robeža {robeža: cieta 1px melna;} Ja vēlaties pievienot līnijas šūnas saturā, visvienkāršākais veids, kā to izdarīt, ir ar horizontālā noteikuma tagu (). Ja novērojat nepilnības jūsu robežās, pārliecinieties, vai tabulā ir iestatīts robežas sabrukšanas stils. Pievienot savu stilu: tabula {robežas sabrukums: sabrukums;} Jūs varat izvairīties no visiem un izmantot tabulas tagā robežas atribūtu. Tomēr apzināties, ka šis atribūts, kamēr nav novecojis, ir ievērojami mazāk elastīgs nekā CSS, jo jūs varat definēt tikai robežas platumu un to var apzīmēt tikai pa visām tabulas šūnām vai nē. Kā pievienot rindas starp tabulas kolonnas
Kā pievienot rindas starp rindām tabulā
Kā pievienot rindas starp īpašām slejām vai rindām tabulā
Kā pievienot līnijas ap atsevišķām šūnām tabulā
Kā pievienot tabulas atsevišķās šūnās
Noderīgi padomi
