Tātad, mēs kopā ar jums esam izpētījuši visvienkāršākās darbības, kuras var veikt ar tabulas malām. Un tagad galds izskatās daudz estētiskāk. Tomēr šūnu aizpildīšana tieši balstās uz robežām. To var viegli novērst, vienkārši atvelkot šūnas HTML tabulā. Un tad teksts rāmja iekšpusē, šūnā, būs vieglāk lasāms.
Lai šūnā izveidotu ievilkumus, izmantojiet atribūtu šūnu polsterējums par tagu
... Tomēr ir vēl viena, vēlamāka iespēja: CSS.
Šajā gadījumā atkāpes tiek iestatītas, izmantojot īpašību polsterējums... Ar tās palīdzību nebūs grūti atkāpties, ja nepieciešams, tas ir, augšā, pa labi, apakšā vai pa kreisi, izmantojot attiecīgi vienu no šīm īpašībām: polsterējums, polsterējums-pa labi, polsterējums-dibens un polsterējums-pa kreisi.
Jūs varat iestatīt, cik pikseļu jābūt atkāptiem. Šeit ir piemērs, kur būs apakšējā mala 20
pikseļi, un viss pārējais būs 10
... Tādi CSS-kods izskatīsies šādi:
Td (polsterējums: 10 pikseļi; polsterējums apakšā: 20 pikseļi;)
Un pilns stilu kods šajā posmā:
Tabula (apmale: stabila 1px zila; apmales sabrukšana: sakļaut;) td (apmale: cieta 1px zila; polsterējums: 10px; polsterējums apakšā: 20px;)
Rezultāts pārlūkprogrammā:
Atkāpe starp šūnām
Parasti uzdevumus, kas saistīti ar tabulu izveidi, var atrisināt, izmantojot tagus, atribūtus un rekvizītus, kas ļauj veidot apmales, atkāpes šūnās, kā arī iestatīt pašu šūnu krāsu fonu.
Atkāpes tabulās ir ne tikai šūnu iekšpusē. Tie var būt arī starp pašām šūnām.
Atkāpes starp šūnām var veikt divos veidos:
- izmantojot atribūtu šūnu atstarpe par tagu
.
- izmantojot CSS-īpašumi robežu atstarpes.
Jāuzsver, ka robežu atstarpes ir rakstīts tabulai kopumā, savukārt īpašums polsterējums nosaka tieši šūnām.
Apskatīsim piemēru:
Tabula (apmale: stabila 1px zila; apmales sabrukšana: atsevišķa; atstarpe starp apmalēm: 5px;) td (apmale: cieta 1px zila; polsterējums: 10px; polsterējums apakšā: 20px;)
Un rezultāts:
Uzreiz noteiksim, ka nevajadzētu mēģināt veidot šādus ievilkumus, izmantojot robežas sabrukums: sabrukums... Patiešām, izmantojot šo iespēju, šūnas "pielīp" viena otrai.
Un, lai tie būtu atsevišķi viens no otra, jums vajadzētu izmantot robeža-sabrukums: atsevišķi... Ir svarīgi saprast, ka šī vērtība ir noklusējuma vērtība. Un to izmanto tikai, lai skaidri parādītu, kā šī problēma tiek atrisināta. Ja mēs izdzēsīsim šo rindu, rezultāts šūnu veidā, kas atrodas atsevišķi viens no otra, tiks saglabāts.
CSS specifikācija dod neierobežotas iespējas galda noformēšanai. Pēc noklusējuma tabulai un tabulas šūnām nav redzamu apmaļu vai fonu, un tabulas šūnas nav blakus viena otrai.
Tabulas šūnu platumu nosaka to satura platums, tāpēc tabulas kolonnu platums var būt atšķirīgs. Visu rindu šūnu augstums ir vienāds, un to nosaka augstākās šūnas augstums.
Tabulu formatēšana
1. Galda robežas robeža
Tabula un tajā esošās šūnas pēc noklusējuma tiek parādītas pārlūkprogrammā bez redzamām malām. Galda apmales ko nosaka robežas īpašums:
Tabula (apmales sakļaušana: sakļaušana; / * noņemiet tukšās vietas starp šūnām * / apmale: 1 pikseļu pelēks; / * tabulai iestatiet 1 pikseļu pelēko ārējo apmali * /)
Galvenes šūnu apmales katrai kolonnai ir iestatīts pirmais elements:
Th (apmale: 1px vienlaidus pelēks;)
Šūnu robežas galda elementiem ir iestatīti elementi td:
Td (apmale: 1 pikseļu pelēks;)
Blakus esošo šūnu apmales platums netiek dubultots, tāpēc visas tabulas robežas varat iestatīt šādā veidā:
Th, td (apmale: 1px vienlaidus pelēks;)
Tabulas ārējo apmali var izvēlēties, piešķirot tai lielāku platumu:
Tabula (apmale: 3 pikseļi, pelēka;)
Apmales var iestatīt daļēji:
/ * iestatiet tabulai 3 pikseļu pelēku ārējo apmali * / table (border-top: 3px solid pelēks;) / * iestatiet 1px pelēku apmali galda korpusa šūnai * / td (border-bottom: 1px solid pelēks;)
Jūs varat lasīt vairāk par pierobežas īpašumu.
2. Kā iestatīt galda platumu un augstumu
Noklusējuma galda platums un augstums nosaka tās šūnu saturs. Ja platums nav norādīts, tad tas būs vienāds ar platākās rindas (līnijas) platumu.
Tabulas un kolonnas platums iestatiet, izmantojot platuma rekvizītu. Ja tabulai ir norādīts tabula (platums: 100%;), tad tabulas platums būs vienāds ar konteinera bloka platumu, kurā tā atrodas.
Tabulas un kolonnu platums parasti tiek norādīts pikseļos vai%, piemēram:
Tabula (platums: 600 pikseļi;) th (platums: 20%;) td: pirmais bērns (platums: 30%;)
Galda augstums nav uzstādīts. Rindu augstums tabulas var manipulēt, pievienojot elementiem augšējo un apakšējo polsterējumu
un | ... Nav ieteicams fiksēt augstumu, izmantojot augstuma īpašību. Th, td (polsterējums: 10 pikseļi 15 pikseļi;) 3. Kā iestatīt tabulas fonu
Noklusējuma galda fons un šūnas ir caurspīdīgas. Ja lapai vai blokam, kurā ir tabula, ir fons, tad tas spīdēs cauri tabulai. Ja fons ir iestatīts gan tabulai, gan šūnām, tad vietās, kur tabulas un šūnu fons pārklājas, būs redzams tikai šūnu fons. Tabula kopumā un tās šūnas var būt šādas:
aizpildīt,
,
.
4. Tabulas kolonnas
CSS tabulas modelis galvenokārt ir vērsts uz virknēm (rindām), kas izveidotas, izmantojot tagu | ... Praksē ir gadījumi, kad jums ir nepieciešams īpašs kolonnu formatējums, kas ir iespējams šādos veidos: izmantojot tagu
Jūs varat iestatīt fonu jebkuram kolonnu skaitam;
izmantojot tabulu td: first-child, table td: last-child selector, varat ieveidot tabulas pirmo vai pēdējo kolonnu (izņemot tabulas galvenes pirmo šūnu);
izmantojot tabulas atlasītāju td: nth-child (kolonnu atlases noteikums), jūs varat noformēt visas tabulas kolonnas.
Jūs varat lasīt vairāk par CSS atlasītājiem.
5. Kā tabulai pievienot virsrakstu
Tabulai varat pievienot nosaukumu, izmantojot tagu
, un izmantojot paraksta puses īpašību, to var novietot tabulas priekšā vai zem tās. Teksta līdzināšanas rekvizītu izmanto, lai horizontāli izlīdzinātu virsraksta tekstu. Mantojis.
1. tabula
| Uzņēmums |
1. jautājums |
Q2 |
3. jautājums |
Q4 |
...
paraksts (paraksta puse: apakšā; teksta līdzināšana: pa labi; polsterējums: 10 pikseļi 0; fonta lielums: 14 pikseļi;) 
Rīsi. 2. Piemērs galvenes parādīšanai zem tabulas 6. Kā noņemt plaisu starp šūnu rāmjiem
Pēc noklusējuma tabulas šūnu robežas ir atdalītas ar nelielu atstarpi. Ja iestatāt robežas sakļaušanu: sakļaut tabulu, tad sprauga tiks noņemta. Īpašums tiek mantots.
Sintakse
Tabula (robežas sabrukums: sabrukums;)
Rīsi. 3. Tabulu piemērs ar apvienotām un sadalītām šūnu robežām
7. Kā palielināt atstarpi starp šūnu robežām
Izmantojot rekvizītu ar robežām, varat mainīt attālumu starp šūnu robežām. Šis īpašums attiecas uz tabulu kopumā. Mantojis.
Sintakse
Tabula (robežas sakļaušana: atsevišķa; robežu atstatums: 10 pikseļi 20 pikseļi;) tabula (robežas sakļaušana: atsevišķi; atstarpe starp robežām: 10 pikseļi;)
Rīsi. 4. Tabulu piemērs ar palielinātām atstarpēm starp šūnu rāmjiem
8. Kā paslēpt tukšās tabulas šūnas
Tukšo šūnu rekvizīts slēpj vai parāda tukšas šūnas. Ietekmē tikai šūnas, kurās nav satura. Ja šūnai ir norādīts fons un tabulai (border-collapse: collapse;), tad šūna netiks paslēpta. Mantojis.
| Uzņēmums |
1. jautājums |
Q2 |
3. jautājums |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
tabula (apmale: 1px cieta # 69c; robežas sabrukšana: atsevišķi; tukšas šūnas: paslēpt;) th, td (robeža: 2px cieta # 69c;) 
Rīsi. 5. Piemērs tukšas tabulas šūnas slēpšanai 9. Izkārtojuma tabulas izkārtojums, izmantojot tabulas izkārtojuma rekvizītu
Galda izkārtojuma izkārtojumu nosaka viena no divām pieejām: fiksēts izkārtojums vai automātisks izkārtojums. Izkārtojums šajā gadījumā nozīmē to, kā tabulas platums ir sadalīts starp šūnu platumu. Īpašums netiek mantots.
Sintakse
Tabula (tabulas izkārtojums: fiksēts;)
10. Labākie galda izkārtojumi
1. Horizontālais minimālisms
Horizontālās tabulas ir tabulas, kurās teksts tiek lasīts horizontāli. Katra vienība ir atsevišķa rinda. Šādas tabulas varat veidot minimālisma stilā, zem virsraksta ievietojot divu pikseļu apmali.
| Darbinieks | Alga | Bonuss | Uzraugs |
|---|
| Stīvens Kokss | $300 | $50 | Bobs |
| Josephin tan | $150 | - | Annija |
| Joyce ming | $200 | $35 | Endijs |
| Džeimss A. Pentela | $175 | $25 | Annija |
tabula (fontu saime: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; fons: balts; maksimālais platums: 70%; platums: 70%; border-collapse: collapse; text -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; polsterējums: 10px 8px;) td (krāsa: # 669; polsterējums: 9px 8px; pāreja: .3s lineāra;) tr: hover td (krāsa: # 6699ff;)Pateicoties lielam rindu skaitam, šis tabulu dizains apgrūtina to lasīšanu. Lai atrisinātu šo problēmu, zem visiem td elementiem varat pievienot viena pikseļa apmali.
Td (apmale-apakšā: 1 pikseļi cieta #ccc; krāsa: # 669; polsterējums: 9 pikseļi 8 pikseļi; pāreja: .3s lineāra;) / * pārējais kods ir tāds pats kā iepriekšējā piemērā * /
Pievienojot tr: elementam a: hover efektu, tabulas minimālisma stilā kļūst vieglāk lasāmas. Novietojot peles kursoru virs šūnas, pārējās vienas rindas šūnas tiek iezīmētas vienlaikus, kas vienkāršo informācijas uzskaites procesu, ja tabulās ir vairākas kolonnas.
Th (fonta svars: normāls; krāsa: # 039; polsterējums: 10 pikseļi 15 pikseļi;) td (krāsa: # 669; apmales augšdaļa: 1 pikseļa cieta # e8edff; polsterējums: 10 pikseļi 15 pikseļi;) tr: hover td (fons: # e8edff ;)
2. Vertikālais minimālisms
Lai gan šādas tabulas tiek izmantotas reti, vertikāli orientētas tabulas ir noderīgas, lai kategorizētu vai salīdzinātu kolonnu aprakstīto objektu aprakstus. Jūs varat veidot tos minimālisma stilā, pievienojot atstarpi, kas atdala kolonnas.
Th (fonta svars: normāls; robeža apakšā: 2 pikseļi cieta # 6678b1; apmale labajā pusē: 30 pikseļi cieta #fff; robeža pa kreisi: 30 pikseļi cieta #fff; krāsa: # 039; polsterējums: 8 pikseļi 2 pikseļi;) td (apmale labajā pusē: 30 pikseļi cieta #fff; robeža pa kreisi: 30 pikseļi cieta #fff; krāsa: #669; polsterējums: 12 pikseļi 2 pikseļi;)
3. "Kastes" stils
Visuzticamākais visu veidu galdu dekorēšanas stils ir tā sauktais "kastes" stils. Pietiek izvēlēties labu krāsu shēmu un pēc tam iestatīt fona krāsu visām šūnām. Neaizmirstiet uzsvērt atšķirību starp līnijām, nosakot robežas kā atdalītājus.
Th (fonta lielums: 13 pikseļi; fonta svars: normāls; fons: # b9c9fe; apmales augšdaļa: 4 pikseļi cieta #aabcfe; apmale-apakšā: 1 pikseļa cieta #fff; krāsa: # 039; polsterējums: 8 pikseļi;) td (fons : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid caurspīdīgs; polsterējums: 8px;) tr: hover td (background: #ccddff;)
Visgrūtāk ir atrast krāsu shēmu, kas harmoniski iekļausies jūsu vietnē. Ja vietne ir ielādēta ar grafiku un dizainu, tad jums būs diezgan grūti izmantot šo stilu.
Tabula (fontu saime: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; maksimālais platums: 70%; platums: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- pa kreisi: 1px cieta # 9baff1; krāsa: # 039; polsterējums: 8px;) td (fons: # e8edff; robeža pa labi: 1px cieta #aabcfe; robeža pa kreisi: 1px cieta #aabcfe; krāsa: # 669; polsterējums: 8px ;)
4. Horizontālā zebra
Zebra galds izskatās diezgan pievilcīgs un ērts. Papildu fona krāsa var kalpot par vizuālu norādi, lai cilvēki varētu lasīt tabulu.
Th (fonta svars: normāls; krāsa: # 039; polsterējums: 10 pikseļi 15 pikseļi;) td (krāsa: # 669; apmales augšdaļa: 1 pikseļa cieta # e8edff; polsterējums: 10 pikseļi 15 pikseļi;) tr: n-tas bērns (2n) ( fons: # e8edff;)
5. Avīzes stils
Lai panāktu tā saucamo laikraksta efektu, varat uzlikt tabulas elementiem apmales un spēlēties ar šūnām iekšpusē. Viegls, minimāls laikraksta stils varētu izskatīties šādi: spēlējiet ar krāsām, pievienojiet apmales, polsterējumu, dažādus fonus un a: kursora efektu, virzot kursoru virs līnijas.
Tabula (apmale: 1px cieta # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px dashed # 69c; polsterējums: 12px 17px;) td (krāsa: # 669; polsterējums: 7px 17px; ) tr: virziet kursoru td (fons: #ccddff;)
Tabula (apmale: 1px cieta # 69c;) th (font-weight: normal; color: # 039; polsterējums: 10px;) td (krāsa: # 669; border-top: 1px dashed #fff; polsterējums: 10px; background: #ccddff;) tr: virziet kursoru td (fons: # 99bcff;)
Tabula (apmale: 1px cieta # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: lielie burti; apmale labajā pusē: 1px cieta # 0865c2; apmales augšdaļa: 1px cieta # 0865c2; robeža pa kreisi: 1 pikseļa cieta # 0865c2; apmales apakšējā daļa: 1 pikseļa cieta #fff; polsterējums: 20 pikseļi;) td (krāsa: # 669; robeža pa labi: 1 pikseļa pārtraukta # 6cf; polsterējums: 10 pikseļi 20 pikseļi;)
6. Tabulas fons
Ja jūs meklējat ātru un unikālu galda noformēšanas veidu, izvēlieties pievilcīgu attēlu vai fotoattēlu, kas saistīts ar galda tēmu, un iestatiet to kā galda fonu.
Png ") 98% 86% neatkārtojas;) th (fonta svars: normāls; fonta izmērs: 14 pikseļi; krāsa: # 339; polsterējums: 10 pikseļi 12 pikseļi; fons: balts;) td (krāsa: # 669; apmale- augšā: 1 pikseļi vienkrāsaini balta; polsterējums: 10 pikseļi 12 pikseļi; fons: rgba (51, 51, 153, .2); pāreja: .3s;) tr: kursors td (fons: rgba (51, 51, 153, .1); )
Sveiki visiem! Tātad, tagad jūs varat izveidot elementāras tabulas, kas sastāv no tik daudz rindu un kolonnu, cik nepieciešams. Nav slikti, nav slikti. Tagad parunāsim par šo tabulu dizainu.
Pēdējā nodarbībā tabulas tika parādītas bez apmalēm. Un, redzi, tas izskatās tā-tā, to pat nevar nosaukt par zīmi. Lai tabulas apmales izveidotu HTML formātā, pievienojiet tagam
atribūts robeža, piešķirot tai vērtību, kas nav nulle.
Tāpēc izveidosim tabulai robežas. Piemēram, par to, kas mums jau ir:
| Augšējā kreisā šūna | Augšējā labā šūna |
| Apakšējā kreisā šūna | Apakšējā labā šūna |
Rezultāts pārlūkprogrammā:
Kā noņemt tabulas apmales
Savukārt, lai noņemtu HTML tabulas apmales vai arī teiktu, lai padarītu tās neredzamas, jums ir nepieciešams atribūts robeža iestatīt vērtību 0
... Pēc šīm vienkāršajām darbībām rāmis tiks noņemts.
Šis atribūts ļauj izveidot, bet ne pārvaldīt robežas. Tas ļauj mainīt tikai to biezumu.
Tāpēc tagad mēs runāsim par CSS kuru īpašības to padara iespējamu ar robeža izveidojiet dažādas robežas gan katrā šūnā, gan ārpus tās, ap galdu kopumā.
Apskatīsim, kā piemērot CSS, lai izveidotu tabulas ārējās un iekšējās robežas.
Lai to izdarītu, noņemiet atribūtu border no mūsu tabulas un pievienojiet stilus:
Tabulas piemērs
| Augšējā kreisā šūna |
Augšējā labā šūna |
| Apakšējā kreisā šūna |
Apakšējā labā šūna |
Rezultāts pārlūkprogrammā:
Tagad pievienosim arī robežas katrai šūnai. Lai to izdarītu, vienkārši pievienojiet stilus:
Rezultāts pārlūkprogrammā:
Kā noņemt polsterējumu starp šūnām HTML tabulā
Piekrītiet, ka CSS robeža neizskatās tā, kā vēlaties. Neapšaubāmi, no estētikas viedokļa ir ko darīt. Pārlūkprogrammas lapā varat redzēt, ka pēc noklusējuma tas atsevišķi parāda tabulu un šūnu robežas. To skaidri parāda piemērs.
Tomēr ir pilnīgi iespējams atbrīvoties no šādām robežām, kuras sauc par dubultām, ja izmantojam robežas sabrukšanas CSS īpašumu. Praksē tas izskatās šādi:
Tabula (apmale: stabila 1 pikseļa zila; apmales sabrukšana: sakļaut;) ...
Tā rezultātā attālums starp šūnām tiek noņemts:
Apmales atribūtam piešķirtā sakļaušanas vērtība noņem dubultās apmales. Kā redzat, rezultāts ir blakus esošo šūnu robežu, kā arī šūnu robežu un tabulas ārējās robežas sabrukums. Kas attiecas uz pēdējo, to var pilnībā noņemt. Un, ja ir nepieciešams to parādīt, jums jāpalielina tā platums. Tādējādi mēs atbrīvojāmies no atdalītājiem tabulā. Un nākamajā nodarbībā mēs runāsim par to, kā jūs varat iestatīt vertikālās un horizontālās robežas. Lai veicas visiem!
Tabulas dati- informācija, ko var attēlot tabulas veidā un loģiski sadalīt kolonnās un rindās. HTML tagu izmanto, lai tīmekļa lapās parādītu tabulas datus
, kas ir konteiners ar tabulas saturu. HTML tabulas saturs ir aprakstīts pa rindām, katra rinda sākas ar sākuma tagu un beidzas ar noslēguma tagu
.
Taga iekšpusē
tabulas šūnas atrodas, tās attēlo ar tagiem | vai | ... Tieši šūnās ir viss tīmekļa lapā parādītais tabulas saturs.
Galda rāmis
Pēc noklusējuma HTML tabula tīmekļa lapā tiek atveidota bez apmales; lai tabulai pievienotu apmales, tāpat kā visiem pārējiem elementiem, tiek izmantots apmales CSS rekvizīts. Bet jāatzīmē, ka, ja jūs pievienojat robežu tikai elementam , tad tas tiks parādīts ap visu tabulu. Lai tabulas šūnām būtu arī apmale, elementiem būs jāiestata apmales rekvizīts | un | . Tabula, th, td (apmale: 1px melns;) Izmēģiniet " Tagad gan tabulai, gan šūnām ir apmales, savukārt katrai šūnai un tabulai ir savas robežas. Rezultātā starp rāmjiem parādījās tukša vieta; rekvizīts ar atstarpi starp robežām ļauj kontrolēt šīs telpas lielumu, kas ir iestatīts visai tabulai. Citiem vārdiem sakot, jūs nevarat kontrolēt atšķirības starp dažādām šūnām atsevišķi.
Pat ja noņemat atstarpes starp šūnām, izmantojot rekvizītu ar robežām atstarpes vērtību 0, šūnu robežas pieskaras viena otrai, dubultojoties. Robežas sakļaušanas rekvizīts tiek izmantots šūnu robežu apvienošanai. Tam var būt divas vērtības:
- atsevišķi: ir noklusējums. Šūnas tiek parādītas nelielā attālumā viena no otras, katrai šūnai ir sava robeža.
- sakļaut: savieno blakus esošos rāmjus vienā, visas atstarpes starp šūnām, kā arī starp šūnām un galda rāmi tiek ignorētas.
Dokumenta nosaukums
| Vārds | Uzvārds |
|---|
| Homērs | Simpsons |
| Mārža | Simpsons |
| Vārds | Uzvārds |
|---|
| Homērs | Simpsons |
| Mārža | Simpsons |
Izmēģiniet " Galda izmērs
Pēc rāmju pievienošanas galda šūnām kļuva pamanāms, ka šūnu saturs ir pārāk tuvu malām. Izmantojot polsterējuma īpašību, varat pievienot atstarpi starp šūnu malām un to saturu: Th, td (polsterējums: 7 pikseļi;) Izmēģiniet " Galda izmērs ir atkarīgs no tā satura, taču bieži rodas situācijas, kad galds ir pārāk šaurs un kļūst nepieciešams to izstiept. Tabulas platumu un augstumu var mainīt, izmantojot platuma un augstuma rekvizītus, iestatot vēlamos izmērus vai nu pašai tabulai, vai šūnām: Tabula (platums: 70%;) th (augstums: 50 pikseļi;) Izmēģiniet " Teksta līdzināšana
Pēc noklusējuma teksts tabulas galvenes šūnās ir izlīdzināts centrā, un teksts parastās šūnās ir izlīdzināts pa kreisi, izmantojot teksta līdzināšanas rekvizītu, varat kontrolēt teksta horizontālo izlīdzināšanu.
Vertikālās izlīdzināšanas CSS rekvizīts ļauj kontrolēt teksta satura vertikālo izlīdzināšanu. Pēc noklusējuma teksts ir vertikāli izlīdzināts ar šūnu centru. Vertikālo izlīdzināšanu var ignorēt ar vienu no vertikālās izlīdzināšanas rekvizīta vērtībām:
- augšā: teksts ir līdzināts šūnas augšdaļai
- vidū: izlīdzina tekstu centrā (noklusējums)
- apakšā: teksts ir izlīdzināts ar šūnas apakšdaļu
Dokumenta nosaukums
| Vārds | Uzvārds |
|---|
| Homērs | Simpsons |
| Mārža | Simpsons |
Izmēģiniet " Tabulas rindu fona krāsas maiņa
Aplūkojot lielas tabulas, kurās ir daudz rindu ar daudz informācijas, var būt grūti izsekot, kuri dati pieder konkrētai rindai. Lai palīdzētu lietotājiem orientēties, pārmaiņus varat izmantot divas dažādas fona krāsas. Lai izveidotu aprakstīto efektu, varat izmantot klases atlasītāju, pievienojot to katrai otrajai tabulas rindai:
Dokumenta nosaukums
| Vārds | Uzvārds | Pozīcija |
|---|
| Homērs | Simpsons | tēvs |
| Mārža | Simpsons | māte |
| Bārts | Simpsons | dēls |
| Liza | Simpsons | meita |
Izmēģiniet "Klases atribūta pievienošana katrai otrajai rindai ir garlaicīgs uzdevums. CSS3 ir pievienota: n-bērna pseidoklase, lai alternatīvi risinātu šo problēmu. Tagad interleaving efektu var panākt tikai, izmantojot CSS, nemainot dokumenta HTML marķējumu. Izmantojot pseidoklasi: n-bērns, tabulā varat atlasīt visas nepāra vai pāra rindas, izmantojot vienu no atslēgvārdiem pat (pāra) vai nepāra (nepāra): Tr: n-tas bērns (nepāra) (fona krāsa: # EAF2D3;) Izmēģiniet " Mainiet līnijas fonu, virzot kursoru
Vēl viens veids, kā uzlabot tabulas datu lasāmību, ir mainīt rindas fona krāsu, virzot kursoru virs tās. Tas palīdzēs izcelt vēlamo tabulas saturu un uzlabos datu vizuālo uztveri.
Šī efekta ieviešana ir ļoti vienkārša, šim nolūkam tabulas rindu atlasītājam jāpievieno: hover pseido-klase un jāiestata vēlamā fona krāsa: Tr: virziet kursoru (fona krāsa: # E0E0FF;) Izmēģiniet " Tabulas izlīdzināšana centrā
HTML tabulas pielīdzināšana centram ir iespējama tikai tad, ja tabulas platums ir mazāks par tā pamatelementa platumu. Lai izlīdzinātu tabulu centrā, jums jāizmanto piemales īpašums, nosakot tam vismaz divas vērtības: pirmā vērtība būs atbildīga par tabulas ārējo malu augšpusē un apakšā, bet otrā - par automātisku centra izlīdzināšanu : Tabula (mala: 10 pikseļi automātiski;) Izmēģiniet " Ja jums ir vajadzīgas dažādas piemales tabulas augšpusē un apakšā, tad varat iestatīt piemales rekvizītu uz trim vērtībām: pirmā būs atbildīga par augšējo malu, otrā - par horizontālo līdzinājumu, bet trešā - par apakšējo malu: Tabula (mala: 10 pikseļi automātiski 30 pikseļi;)
Mēs esam apsvēruši daudzas lapas elementu veidošanas metodes, piemēram, teksta informāciju, saites, attēlus, virsrakstus, taču ar to vēl nepietiek. Savos rakstos es bieži izmantoju HTML elementus, piemēram, tabulas, jo vairumā gadījumu tie ir palīdzēt organizēt svarīgu informāciju un atvieglot tās pasniegšanu.
Šajā rakstā es jūs iepazīstināšu ar HTML tabulu veidošanas sarežģītību, un jūs uzzināsit jaunas CSS īpašības, kas paredzētas šo mērķu sasniegšanai.
Hiperteksta iezīmēšanas valodas HTML ir nodrošinājis mums daudzas iespējas saistīt CSS stilus ar desmit unikāliem tagiem, kas paredzēti darbam ar tabulām, es iesaku tos atkārtot pirms turpmākas izpētes:
| Tag | Apraksts |
|---|
| Nosaka tabulas saturu. |
|
| Norāda tabulas nosaukumu. |
|
| Definē tabulas galvenes šūnu. |
|---|
|
| Definē rindu tabulā. |
|
| Definē tabulas datu šūnu. |
| Izmanto, lai tabulā ietvertu grupas virsrakstu (tabulas virsraksts). |
| |
Izmanto, lai saturētu tabulas "ķermeni". |
|
Izmanto, lai saturētu tabulas "kājeni" (kājeni). |
|
| Definē norādītās kolonnas rekvizītus katrai kolonnai tagā .
|
|
| Tabulā nosaka kolonnu grupu. |
Darbs ar tabulas ievilkumiem
Polsterējuma izmantošana tabulā
Tabulas ievilkumi
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
Šajā piemērā mēs:
- Novietojiet galdu centrā, izmantojot horizontālās centrēšanas tehniku ar ārējām malām (mala: 0 automātiski).
- Tabulas nosaukumam (tags ) mēs iestatījām apakšējo polsterējumu uz 19 pikseļiem. Ceru, ka jūs nemulsina nevienmērīgie skaitļi :)
Mūsu piemēra rezultāts:
Attālums starp šūnām
Pēc iepriekš minētā piemēra jūs, iespējams, pamanījāt, ka starp visām tabulas šūnām ir plaisa. Apskatīsim, kā noņemt plaisu starp tabulas šūnām vai palielināt to.
Lai iestatītu attālumu starp blakus esošo šūnu robežām, jāizmanto CSS rekvizīts - robežu atstarpe.
Mainiet atstarpi starp tabulām
attālums starp robežām: 30 pikseļi 10 pikseļi;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
atstarpe starp robežām: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
attālums starp robežām: 0.2em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Šajā piemērā mēs:
- pludiņš: pa kreisi). Ja jūs nokavējāt peldošo elementu tēmu, tad šajā apmācībā vienmēr varat atgriezties pie tā - "".
- Turklāt mēs iestatījām galda polsterējumu labajā pusē uz 30 pikseļiem un iestatījām tabulu vertikālo izlīdzinājumu (elementa augšdaļa ir izlīdzināta ar augstākā elementa augšdaļu). Šajā rakstā mēs atgriezīsimies pie detalizētas šī īpašuma apspriešanas.
- ) - treknrakstā.
- Tabulas šūnām (galvenei un datu šūnām) mēs iestatījām 1 pikseļu stingru apmali ar # F50 hex un iestatām polsterējumu uz 19 pikseļiem visām pusēm.
- Pirmajam galdam ar klasi .pirmkārt mēs noteicām atstarpi starp tabulas šūnām (rekvizītu ar robežām) uz 30 pikseļiem 10 pikseļi otrajai tabulai ar klasi .sekundē vienāds ar nulli, trešajam galdam ar klasi .trešais vienāds ar 0,2 em.
Es vēršu jūsu uzmanību uz to, ka, ja īpašumā ar robežām ir norādīta tikai viena garuma vērtība, tad tā norāda atstarpi gan horizontāli, gan vertikāli, un, ja ir norādītas divas garuma vērtības, tad pirmā nosaka horizontālo attālumu , un otrā vertikālā. Attālumu starp blakus esošo šūnu malām var norādīt CSS vienībās (px, cm, em utt.). Negatīvas vērtības nav atļautas.
Mūsu piemēra rezultāts:
Rādīt robežas ap tabulas šūnām
Tu vari teikt: - Tātad, mēs noņēmām atstarpes starp šūnām, izmantojot robežu atstarpes īpašību ar vērtību 0, bet kāpēc tagad šūnu robežas krustojas?
Dubultās robežas veidojas tāpēc, ka vienas šūnas apakšējā robeža tiek pievienota šūnas augšējai robežai, kas atrodas zem tās, līdzīga situācija rodas šūnu malās, un tas ir loģiski no attēlošanas viedokļa tabulā, bet, par laimi, ir veids, kā pateikt pārlūkprogrammai, ka mēs esam, mēs nevēlamies redzēt tik nekaunīgu šūnu robežu uzvedību.
Lai to izdarītu, jums jāizmanto īpašums CSS border-collapse. Dīvainā kārtā, izmantojot robežas sabrukšanas īpašību ar sakļaušanas vērtību, ir labākais veids, kā novērst plaisu starp šūnām, nesaņemot dubultas robežas starp tām.
Apsveriet robežas uzvedības salīdzinājumu, izmantojot rekvizītu ar atstarpēm ar vērtību 0 un robežas sakļaušanas īpašumu ar sakļautības vērtību:
Robežu parādīšanas piemērs ap tabulas šūnām
atstarpe starp robežām: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-collapse: sabrukums;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Šajā piemērā mēs:
- Lika mūsu galdiem peldēt un izlīdzināt pa kreisi (pludiņš: pa kreisi), iestatīt to labo polsterējumu uz 30 pikseļiem.
- Iestatiet tabulas nosaukumu (tagu ) - treknrakstā.
- Tabulas šūnām (galvenei un datu šūnām) mēs iestatījām 5 pikseļu stingru apmali ar # F50 hex un iestatījām fiksētu platumu 50 pikseļi un 75 pikseļu augstumu.
- Pirmajam galdam ar klasi .pirmkārt mēs iestatām atstarpi starp tabulas šūnām uz nulli (attālums starp robežām: 0;), bet otrajai tabulai ar klasi .sekundē iestatiet robežas sabrukšanas rekvizītu, lai sakļautu, kas, ja iespējams, apvieno šūnu robežas vienā.
Mūsu piemēra rezultāts:
Tukša šūnu uzvedība
Izmantojot CSS, varat iestatīt, vai rādīt tabulas tukšo šūnu robežas un fonus. Tukšo šūnu īpašums ir atbildīgs par šo uzvedību, kas pēc noklusējuma, kā jūs, iespējams, pamanījāt no iepriekšējiem piemēriem, parāda tukšas šūnas.
Pāriesim pie piemēra:
Tukšu tabulas šūnu parādīšanas piemērs
tukšas šūnas: parādīt;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
tukšas šūnas: slēpt;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
No šī piemēra ir ļoti vienkārši saprast, kā darbojas rekvizīts tukšas šūnas, ja tas ir iestatīts slēpt, tad tukšās šūnas un tajās esošais fons tiks paslēptas, ja iestatīts rādīt (pēc noklusējuma), tad tās tiks parādītas.
Tabulas galvenes atrašanās vieta
Apskatīsim vēl vienu vienkāršu tabulu veidošanas īpašību - parakstu puse, kas nosaka tabulas paraksta pozīciju (virs vai zem tabulas). Pēc noklusējuma parakstu puses rekvizīts ir iestatīts uz augšu, kas parakstu novieto virs tabulas. Lai virsrakstu ievietotu zem tabulas, jums jāizmanto rekvizīts ar zemāko vērtību.
Apskatīsim šī īpašuma izmantošanas piemēru:
Paraksta puses rekvizīta izmantošanas piemērs
Virzās virs galda
| Vārds | Cena |
| Zivs | 350 rubļi |
| Gaļa | 250 rubļu |
Virsraksts zem tabulas
| Vārds | Cena |
| Zivs | 350 rubļi |
| Gaļa | 250 rubļu |
Šajā piemērā mēs esam izveidojuši divas klases kas kontrolē tabulas galvenes pozīciju. Pirmā klase ( .topCaption) virs tā ievieto tabulas nosaukumu, mēs to attiecinājām uz pirmo tabulu un otro klasi ( .bottomCaption) ievieto tabulas nosaukumu zem tā, mēs to attiecinājām uz otro tabulu. Klase .topCaption ir noklusējuma parakstu puses īpašums un tika izveidots demonstrācijas nolūkos.
Mūsu piemēra rezultāts:
Horizontālā un vertikālā izlīdzināšana
Vairumā gadījumu, strādājot ar tabulām, jums būs jāpielāgo satura izlīdzināšana galvenē un datu šūnās. Teksta līdzināšanas rekvizīts tiek izmantots horizontālai līdzināšanai, līdzīgi kā jebkura teksta informācija. Šī rekvizīta izmantošanu tekstam mēs apspriedām iepriekš rakstā "".
Lai iestatītu satura izlīdzināšanu šūnās, jums ir jāizmanto īpaši atslēgvārdi ar teksta līdzināšanas īpašumu. Apskatīsim šī īpašuma atslēgvārdu pielietojumu nākamajā piemērā.
Horizontālās izlīdzināšanas piemērs tabulā
|
Nozīme | Apraksts |
|
pa kreisi | Līdzina šūnas tekstu pa kreisi. Tas ir noklusējums (ja teksta virziens ir no kreisās uz labo). |
|
taisnība | Līdzina šūnas tekstu pa labi. Tas ir noklusējums (ja teksta virziens ir no labās uz kreiso). |
|
centrā | Izlīdzina šūnas tekstu ar centru. |
|
pamatot | Izstiepj līnijas tā, lai katrai rindai būtu vienāds platums (izstiepj šūnas tekstu atbilstoši platumam). |
Šajā piemērā mēs esam izveidojuši četras klases, kas šūnās iestatīja atšķirīgu horizontālu izlīdzināšanu un piemēroja tos tabulas rindām. Šūnas vērtība atbilst rekvizīta teksta līdzināšanai vērtībai
Mūsu piemēra rezultāts:
Papildus horizontālajai izlīdzināšanai tabulas šūnās varat definēt arī vertikālu izlīdzināšanu, izmantojot vertikālās izlīdzināšanas rekvizītu.
Lūdzu, ņemiet vērā, ka, strādājot ar tabulas šūnām, tiek izmantotas tikai šādas šī rekvizīta vērtības*:
*
-Tabulas šūnai piemērotās vērtības sub, super, text-top, text-bottom, length un% uzvedīsies tā, it kā izmantotu bāzes vērtību.
Apskatīsim lietošanas piemēru:
Vertikālās izlīdzināšanas piemērs tabulā
|
Nozīme | Apraksts |
|
bāzes līnija | Izlīdzina šūnas bāzes līniju ar vecāku bāzes līniju. Tas ir noklusējums. |
|
tops | Šūnas saturu izlīdzina vertikāli uz augšu. |
|
vidū | Izlīdzina šūnas saturu vertikāli vidū. |
|
apakšā | Šūnas saturu izlīdzina vertikāli uz leju. |
Šajā piemērā mēs esam izveidojuši četras klases, kas šūnās iestatīja atšķirīgu vertikālu izlīdzināšanu un piemēroja tos tabulas rindām. Šūnas vērtība atbilst šai rindai lietotā vertikālās izlīdzināšanas rekvizīta vērtībai.
Algoritms tabulas izkārtojuma ievietošanai pārlūkprogrammā
CSS pēc noklusējuma izmanto pārlūkprogrammas automātisko tabulas izkārtojuma algoritmu. Šajā gadījumā kolonnas platumu nosaka šūnas visplašākais nepārkāpjošais saturs... Šis algoritms dažos gadījumos var būt lēns, jo pārlūkprogrammai pirms galīgā izkārtojuma noteikšanas ir jāizlasa viss tabulas saturs.
Lai mainītu tabulas izkārtojuma veidu pārlūkprogrammā ar automātiska uz fiksēts, jāizmanto tabulas izkārtojuma CSS rekvizīts ar fiksētu vērtību.
Šajā gadījumā horizontālais izvietojums ir atkarīgs tikai no no tabulas platuma un kolonnu platuma, nevis no šūnu satura. Pārlūkprogramma sāk rādīt tabulu tūlīt pēc pirmās rindas saņemšanas. Rezultātā fiksētais algoritms ļauj izveidot šādas tabulas izkārtojumu ātrāk nekā izmantojot automātisko versiju. Strādājot ar lielām tabulām, varat izmantot fiksētu algoritmu, lai uzlabotu veiktspēju.
Apskatīsim šī īpašuma pielietojumu ar šādu piemēru:
Tabulas izkārtojuma rekvizīta izmantošanas piemērs
galda izkārtojums: auto;
| Vārds |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Kvieši |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
galda izkārtojums: fiksēts;
| Vārds |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Kvieši |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
Šajā piemērā mēs:
Tabulu rindu un kolonnu veidošana
Mēs jau daļēji esam skāruši tabulas rindu un kolonnu veidošanas metodes rakstā "". Šajā rakstā mēs apskatījām grupas pseidoklases izmantošanu, kas ļauj mainīt rindu stilus tabulās, izmantojot vērtības pat (godīgi) un nepāra (nepāra) vai elementāri matemātiskā formula.
Apskatīsim iepriekšējās metodes un izpētīsim jaunus veidus, kā tabulās veidot rindu un kolonnu stilu. Pāriesim pie piemēriem.
Piemērs, kā izmantot: n-tā bērna pseidoklasi ar tabulām
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
Šajā piemērā mēs:
Mūsu piemēra rezultāts:
Pāriesim pie nākamā piemēra, kurā apskatīsim tabulas rindu veidošanas iespējas.
Tabulu rindu veidošanas piemērs
|
apkalpošana | Cena |
|
Summa |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
Šajā piemērā mēs:
- Iestatiet tabulas platumu līdz 100% no vecākā elementa platuma, galvenei un datu šūnām iestatiet 1 pikseļu platu apmali.
- Instalēts vienumam (Tabulas kājene) fona krāsa - koraļļi, par elementu (Tabulas "Galvene") iestatiet fona krāsu Sudrabs.
- Priekšmetiem
kas atrodas elementa iekšpusē (tabulas pamatteksts) iestatiet fona krāsas maiņu, virzot kursoru (pseido klase: kursors) c balts par krāsu haki(visa rinda ir iezīmēta).
Mūsu piemēra rezultāts: Rīsi. 153 Rindu veidošanas piemērs tabulās Šis piemērs parāda, kā tabulas šūnām (rekvizītam) piemērot stūra noapaļošanu.
Šūnas noapaļošanas piemērs
Šajā piemērā mēs:
- Centrējiet tabulu ar polsterējumu, iestatiet galvenes šūnu platumu un augstumu līdz 50 pikseļiem, kā norādīts caurspīdīgs robeža 5 pikseļi.
- Konstatēja, ka, virzot kursoru (pseidoklase: virziet kursoru) virs galvenes šūnas, tas iegūst fonu zils krāsas, apelsīns teksta krāsa, apmale apelsīns krāsas 5 pikseļi un 100%rādiuss.
- Caurspīdīga robeža ir nepieciešams, lai rezervētu vietu robežai, kas tiks parādīta, virzot kursoru, ja tas netiks izdarīts, tabula "pārlēks".
Mūsu piemēra rezultāts:
Šis piemērs skar HTML elementu izmantošanu un un to stils.
Tabulas kolonnu izcelšanas piemērs
|
Pieteikuma numurs | apkalpošana | cena, berzēt. | Kopā |
|
1 | Dziedāšana |
6 000 |
6 000 |
|
2 | mazgāšana |
2 000 |
2 000 |
|
3 | Tīrīšana |
1 000 |
1 000 |
|
4 | Urdošs |
1 500 |
1 500 |
|
5 | Lasīšana |
3 000 |
3 000 |
Šajā piemērā mēs:
Mūsu piemēra rezultāts:
Nu, un pēdējais piemērs, kas ir diezgan grūti saprotams un prasa padziļinātas zināšanas CSS, jo tas skar nākotnes tēmas, kas plānotas detalizētam pētījumam šī kursa ietvaros.
Iepriekšējā piemērā mēs sapratām, ka HTML elements jūs varat lietot tikai vienu CSS rekvizītu-fona krāsu, bet jūs nevarat tieši iestatīt fona krāsu, virzoties uz šī elementa. Šajā piemērā mēs apskatīsim, kā izcelt tabulas kolonnu, izmantojot tikai CSS.
Piemērs tabulas kolonnu un rindu izcelšanai, virzot kursoru
|
Pieteikuma numurs | apkalpošana | cena, berzēt. | Kopā |
|
1 | Dziedāšana |
6 000 |
6 000 |
|
2 | mazgāšana |
2 000 |
2 000 |
|
3 | Tīrīšana |
1 000 |
1 000 |
|
4 | Urdošs |
1 500 |
1 500 |
|
5 | Lasīšana |
3 000 |
3 000 |
Šajā piemērā mēs:
- Mēs iestatām, lai mūsu tabula aizņemtu 100% no vecāka elementa, tabulas šūnas aizņem 25% no vecāka elementa un tām ir 1 pikseļu zaļa vienkrāsaina apmale, galvenes un datu šūnas ir 45 pikseļu augstas. Mēs noņemām plaisu starp šūnām, izmantojot robežas sabrukšanas īpašību ar vērtību
.
- Un tā, izmantojot :: pēc pseidoelementa, pēc katra elementa pievienojiet saturu.
virzot kursoru. :: pēc pseidoelementa obligāti tiek lietots kopā ar rekvizītu saturs, pateicoties kuram mēs ievietojam bloka elementu ar fona krāsu meža zaļš un ir absolūta pozicionēšana.
- Absolūtā pozicionēšana šeit ir nepieciešama, lai nobīdītu elementu attiecībā pret tā priekšteča norādīto malu, savukārt priekšteča pozīcijas vērtībai ir jābūt citai, nevis noklusējuma statiskajai, pretējā gadījumā skaitlis tiks attiecināts pret norādīto pārlūkprogrammas loga malu šī iemesla dēļ klājām galdam relatīvā pozicionēšana(radinieks).
- Mūsu ģenerētajam blokam mēs iestatījām augšējo īpašumu, kas norāda novietotā elementa nobīdes virzienu no augšējās malas, un apakšējo īpašību, kas norāda novietotā elementa nobīdes virzienu no apakšējās malas. Abiem rekvizītiem tika norādīta vērtība 0, tāpēc bloks pilnībā aizņems elementu no tabulas apakšas un augšdaļas, šī bloka platums tika iestatīts uz 25%, šī vērtība atbilst šūnas platuma vērtībai pati.
- Un pēdējais īpašums, ko mēs iestatījām šim blokam: z-indekss ar vērtību "-1", tas nosaka pozicionēto elementu secību pēc Z ass... Šis rekvizīts ir nepieciešams, lai teksts būtu šī bloka priekšā, nevis aiz tā, ja neiestatīsit vērtību, kas ir mazāka par nulli, tad bloks aizvērs tekstu.
Mūsu piemēra rezultāts:
Ja šajā pētījuma posmā jūs nesaprotat elementu pozicionēšanas procesu, tad nekautrējieties, šī ir grūti saprotama tēma, kuru mēs arī neuzskatījām, bet mēs to noteikti izskatīsim nākamajā raksta rakstā. apmācība "Pozicionēšanas elementi CSS".
Jautājumi un uzdevumi par tēmu
Pabeidziet prakses darbību, pirms pāriet uz nākamo tēmu:
 Ja jums ir grūtības pabeigt praksi, jūs vienmēr varat atvērt piemēru atsevišķā logā un pārbaudīt lapu, lai uzzinātu, kāds CSS tika izmantots.
2016-2020 Denis Boļšakovs, jūs varat nosūtīt komentārus un ieteikumus par vietnes darbu uz [email protected]
| |
|
| |
