valijatabeli td:first-child , tabeli td:last-child abil saab määrata stiilid tabeli esimesele või viimasele veerule (v.a tabeli päise esimene lahter);
Tabelivalijaga td:nth-child (veeruvaliku reegel) saate määrata mis tahes tabeli veergude stiile.
Lisateavet CSS-i valijate kohta saate lugeda.
, ja kasutades pealdisepoolset atribuuti, saab selle asetada tabeli ette või alla. Pealkirja teksti horisontaalseks joondamiseks kasutage atribuuti teksti joondus. Pärandatud.
Tabel nr 1
Ettevõte |
Q1 |
Q2 |
Q3 |
Q4 |
...
pealdis ( pealdise pool: alumine; teksti joondamine: paremale; polsterdus: 10 pikslit 0; fondi suurus: 14 pikslit; )
Riis. 2. Näide tabeli all oleva päise kuvamisest 6. Kuidas eemaldada lahtriraamide vahelt ruumi
Vaikimisi eraldatakse tabeli lahtrite raamid väikese tühikuga. Kui määrate tabeli jaoks border-collapse: ahenda, tühimik eemaldatakse. Vara on päritud.
Süntaks
Tabel (ääris-ahenda: ahenda;)
Riis. 3. Näide tabelitest, kus on ühendatud ja eraldatud lahtriraamid
7. Kuidas suurendada lahtrikaadrite vahelist ruumi
Piirivahe atribuuti kasutades saate muuta lahtriraamide vahelist kaugust. See omadus kehtib kogu tabeli kohta. Pärandatud.
Süntaks
Tabel (ääriste ahendamine: eraldi; ääriste vahe: 10 pikslit 20 pikslit;) tabel (äärise ahendamine: eraldi; äärise vahe: 10 pikslit;)
Riis. 4. Näide tabelitest, kus lahtriraamide vahel on suurendatud tühikuid
8. Kuidas peita tühjad tabeli lahtrid
Atribuut tühjad lahtrid peidab või kuvab tühjad lahtrid. Mõjutab ainult lahtreid, mis ei sisalda sisu. Kui lahter on seatud taustale ja tabel on seatud tabeliks (äärise ahendamine: ahendamine;) , siis lahtrit ei peideta. Pärandatud.
Ettevõte |
Q1 |
Q2 |
Q3 |
Microsoft |
20.3 |
30.5 |
|
Google |
50.2 |
40.63 |
45.23 |
tabel (ääris: 1px tahke #69c; äärise ahendamine: eraldi; tühjad lahtrid: peida; ) th, td (ääris: 2px tahke #69c;)
Riis. 5. Näide tühja tabeli lahtri peitmisest 9. Paiguta tabel atribuudi table-layout abil
Tabeli paigutuse paigutus määratakse ühe kahest lähenemisviisist: fikseeritud paigutus või automaatne paigutus. Paigutuse all sisse antud juhul viitab sellele, kuidas tabeli laius jaotatakse lahtrite laiuste vahel. Vara ei ole päritav.
Süntaks
Tabel (tabeli paigutus: fikseeritud;)
10. Parimad tabelipaigutused
1. Horisontaalne minimalism
Horisontaalsed tabelid on tabelid, milles teksti loetakse horisontaalselt. Iga olem on eraldi rida. Saate anda sellistele tabelitele minimalistliku välimuse, asetades päise alla kahepikslise äärise.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table1.png)
Töötaja | Palk | Boonus | Juhendaja |
Stephen C. Cox | $300 | $50 | Bob |
Josephine Tan | $150 | - | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
tabel ( fondiperekond: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; fondi suurus: 14 pikslit; taust: valge; maksimaalne laius: 70%; laius: 70%; ääriste ahendamine: ahendamine; tekst -joondus: vasakule; th ( fondi kaal: tavaline; värv: #039; ääris-alumine: 2px solid #6678b1; polster: 10px 8px; ) td ( värv: #669; polster: 9px 8px; üleminek: .3s lineaarne ) tr:hover td (värv: #6699ff;)Kui ridu on palju, muudab see tabelikujundus nende lugemise keeruliseks. Selle probleemi lahendamiseks saate kõigi td elementide alla lisada ühe piksli äärise.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table2.png)
Td (ääris-alumine: 1px solid #ccc; värv: #669; polster: 9px 8px; üleminek: .3s lineaarne; )/*ülejäänud kood on nagu ülaltoodud näites*/
:hover-efekti lisamine elemendile tr muudab minimalistlikus stiilis kujundatud tabelid hõlpsamini loetavaks. Kui hõljutate kursorit lahtri kohal, tõstetakse sama rea ülejäänud lahtrid esile samaaegselt, muutes teabe jälgimise lihtsamaks, kui tabelitel on mitu veergu.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table3.png)
Th ( fondi kaal: tavaline; värv: # 039; täidis: 10 pikslit 15 pikslit; ) td ( värv: # 669; ääris ülaosas: 1 pikslit ühtlane # e8edff; täidis: 10 pikslit 15 pikslit; ) tr: hover td (taust: # e8edff ;)
2. Vertikaalne minimalism
Kuigi selliseid tabeleid kasutatakse harva, on vertikaalse orientatsiooniga tabelid kasulikud veeruga tähistatud objektide kirjelduste kategoriseerimiseks või võrdlemiseks. Saate kujundada need minimalistlikus stiilis, lisades veergude eraldamiseks ruumi.
![](https://i0.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table4.png)
Th ( fondi kaal: tavaline; ääris-alumine: 2 pikslit ühtlane #6678b1; ääris-parem: 30 pikslit ühtlane #fff; ääris-vasak: 30px ühtlane #fff; värv: #039; polster: 8px 2px; ) td ( ääris- paremal: 30px solid #ffff: 30px solid #fff: #669;
3. Kasti stiilis
Kõige usaldusväärsem stiil igat tüüpi laudade kujundamisel on nn kasti stiil. Piisab, kui valida hea värviskeem ja seejärel määrake kõigi lahtrite taustavärv. Ärge unustage rõhutada joonte erinevust, määrates äärised eraldajaks.
![](https://i1.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table5.png)
Th ( fondi suurus: 13 pikslit; fondi kaal: tavaline; taust: #b9c9fe; ääris ülaosas: 4 pikslit ühtlane #aabcfe; ääris-alumine: 1px solid #fff; värv: #039; polster: 8 pikslit; ) td ( taust : #e8edff border-bottom: 1px border-top: 1px solid läbipaistev tr:hover td (taust: #ccddff;)
Kõige keerulisem on leida värvilahendus, mis teie veebisaidiga harmooniliselt sobiks. Kui saidil on palju graafikat ja disaini, on teil seda stiili üsna raske kasutada.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table6.png)
Tabel ( fondiperekond: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; fondi suurus: 14 pikslit; maksimaalne laius: 70%; laius: 70%; teksti joondamine: keskel; ääriste ahendamine: ahendamine ääris-üles: 7px piiri-all: 13px border-right: 1px; tahke #9baff1; polster: 8px;
4. Horisontaalne sebra
Sebralaud näeb välja üsna atraktiivne ja mugav. Lisavärv Taust võib olla inimestele tabeli lugemisel visuaalseks vihjeks.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table7.png)
Th ( fondi kaal: tavaline; värvus: # 039; täidis: 10 pikslit 15 pikslit; ) td ( värv: # 669; ääris ülaosa: 1 pikslit, ühtlane # e8edff; täidis: 10 pikslit 15 pikslit; ) tr:nth-child(2n) ( taust: #e8edff;)
5. Ajalehe stiil
Nn ajaleheefekti saavutamiseks saab tabelielementidele ääriseid peale kanda ja sees olevate lahtritega mängida. Kerge, minimalistlik ajalehestiil võib välja näha selline: mängige värvilahendusega, lisage äärised, polsterdus, erinevad taustad ja hõljutage kursorit joone kohal.
![](https://i0.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table8.png)
Tabel (ääris: 1px solid #69c;) th ( fondi paksus: tavaline; värvus: #039; ääris-alumine: 1px katkendlik #69c; polster: 12px 17px; ) td ( värv: #669; polster: 7px 17px; ) tr:hover td (taust: #ccddff;)
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table9.png)
Tabel (ääris: 1 pikslit täis #69c;) th ( fondi kaal: tavaline; värvus: # 039; polster: 10 pikslit; ) td ( värv: # 669; ääris ülaosa: 1 pikslit katkendlik #fff; täidis: 10 pikslit; taust: #ccddff ) tr:hover td (taust: #99bcff;)
![](https://i1.wp.com/html5book.ru/wp-content/uploads/2014/06/top-table10.png)
Tabel (ääris: 1px solid #6cf;) th ( fondi kaal: tavaline; fondi suurus: 13 pikslit; värv: #039; teksti teisendus: suurtähed; ääris-parem: 1px solid #0865c2; ääris-ülaosa: 1px solid #0865c2 ääris-vasak: 1px ääris-all: 1px padding: 20px;
6. Tabeli taust
Kui otsite kiiret ja ainulaadne viis lauakujundus, valige tabeliteemaga seotud atraktiivne pilt või foto ja määrake see tabeli taustaks.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2019/04/top-table-11.png)
Png") 98% 86% no-repeat; ) th ( fondi kaal: tavaline; fondi suurus: 14 pikslit; värv: # 339; polster: 10 pikslit 12 pikslit; taust: valge; ) td ( värv: # 669; ääris- ülemine: 1px valge taust: rgba(51, 51, 153, .2);
Tabeli mõõtmed, kõrgus ja laius määratakse automaatselt sõltuvalt sellest, mida lahtrid sees sisaldavad. Mida rohkem sisu lahtrites, seda suurem on tabeli suurus ja vastupidi.
CSS-i funktsioonid võimaldavad teil aga HTML-is tabeli suurust muuta, määrates täpselt vajaliku laiuse ja kõrguse. Ausalt öeldes tuleb märkida, et tabeli atribuudid võimaldavad ka määrata nõutavad suurused. Kuid praegu räägime ainult CSS-ist.
Tuleb rõhutada, et igal laual on oma minimaalne laius ja minimaalne kõrgus, mida mõjutab selle sisu. Ja isegi kui määrate laiuse ja kõrguse väärtused veelgi väiksemaks, ei juhtu midagi. Laua küljed ei ületa nende miinimumi.
Tabeli laiuse määramiseks peate kasutama CSS-i atribuuti laius, ja kõrguse määramiseks on vaja vara kasutada kõrgus.
Näites näeb see välja selline.
Tabel ( laius: 500 pikslit; kõrgus: 100 pikslit; )
Tulemus brauseris:
![](https://i0.wp.com/webshake.ru/uploads/img/5f2634f710087f6c59ab7a581affb3612368c734ba447ec86d9a88e16e646cf2.png)
Täielik kood:
Tabel antud suurustega
Tabel antud suurustega
1 |
2 |
3 |
4 |
5 |
1 |
2 |
3 |
4 |
5 |
1 |
2 |
3 |
4 |
5 |
Tabeli laiuse ja kõrguse väärtusi saab määrata kui absoluutväärtus(pikslites) ja suhteline – protsentides. Näiteks vastavalt 20px ja 20%.
Kui kasutate tabeli mõõtmete määramiseks protsente, arvutatakse need lähteelemendi mõõtmete alusel. Kui me räägime oma näitest, siis me räägime brauseriakna kohta.
On veel üks tähendus - auto. Ja see on eriline, kuna selle abiga arvutatakse vaikimisi automaatselt laua laius ja kõrgus. Praktikas näeb selle väärtuse määramine välja selline.
Laius: auto;
Kõrgus: auto;
Tahaksime juhtida teie tähelepanu veel ühele asjale: oluline punkt. Parem on mitte näidata kõrgust protsentides, kuna reeglina need sel juhul ei tööta.
Üksikute lahtrite ja veergude suuruse määramine
Kui arvate, et brauser ei määranud lahtrite sisu põhjal veergude laiust õigesti, siis on teil õigus lahtrite ja veergude suurused ise määrata. Ja nüüd räägime sellest, kuidas HTML-tabelis lahtri suurust muuta.
Lahtrite suuruse muutmisel kasutatakse samu CSS-i atribuute nagu tabeli suuruste puhul, nimelt: laius Ja kõrgus.
Lahtritele stiilide lisamiseks võite kasutada ühte kahest valikust.
- Andke lahtritele üksikute klasside nimed. See näeb välja selline: class="cell-50px"
Ja pärast seda peaksite nende klasside jaoks stiile rakendama.
- Luba atribuut stiilis, mille sisse kirjutage vajalik CSS-kood.
Praktikas näeb teine võimalus välja selline:
...
|
Siiski tahame märkida, et lahtrite suurust ei ole vaja väga sageli muuta. Reeglina tehakse seda olukordades, kus on vaja tabeli veergudele määrata teatud laius. Sel juhul on probleem lihtsam lahendada. Peate lihtsalt määrama esimese rea lahtrite laiuse.
Tabel antud suurustega
1 |
2 |
3 |
4 |
5 |
1 |
2 |
3 |
4 |
5 |
1 |
2 |
3 |
4 |
5 |
Tulemus brauseris:
![](https://i2.wp.com/webshake.ru/uploads/img/7e36ba37a734b49dcb9c8210f55d6d1b2eb684d6b6e4cf3c0d403c5d6eb5c138.png)
Kuidas muuta tabelis fondi suurust
Sageli on vaja muuta tabelis oleva teksti suurust. Näiteks päise lahtrites. Seda saab teha CSS-i atribuudi abil fondi suurus. Määrame elementide fondi suuruse
: Th (fondi suurus: 30 pikslit;) Sellega on õppetund lõpetatud. Soovitan teil oma kodutööd hoolikalt läbi mõelda. Lihtsalt uurige seda hoolikalt ja mõelge sellele. Kõike paremat kõigile!
|