Tabel on lahtrid, mis moodustavad ridu ja veerge. Tabelite näideteks on erinevad finantsaruanded, sporditulemused, kalendrid, ajakavad jne. Üksikut ruudustikuplokki nimetatakse tabeli lahtriks. Tabeli lahtrid võivad sisaldada mitmesugust teavet, sealhulgas numbreid, teksti ja isegi video- ja audioobjekte. HTML -keelt kasutades kirjutatakse tabelid rida -realt.
Element
toimib konteineri elementidena, mis määratlevad tabeli sisu. Tabelirea loomiseks peate elemendi sisse lisama
seotud blokeerimismärgend
(lühend inglise keelest. "taye row" - tabelirida). Kui palju silte
lisate, nii palju ridu tabelis ja seal on. Ava silt
tähistab uue rea algust tabelis. Elemendid asetatakse pärast seda |
(lühend inglise keeles "taye data" - tabeli andmed), millest igaüks määrab selles reas eraldi lahtri. Sisemine element |
panite oma sisu (tekst, numbrid, pildid jne) sellesse lahtrisse. Rea lõppu tähistab lõppmärgis |
.
Element
(lühendatud inglise keelest "taYe head" - tabeli pealkiri) - valikuline tabeli element, mida kasutatakse samamoodi nagu elementi |
selle eesmärk on aga rea või veeru päise loomine. Tavaliselt element |
paigutatakse tabeli esimesse ritta. Brauserid kuvavad elemendis teksti |
paksus kirjas ja tsentreerige see lahtri suhtes. Elemendi kasutamine koodis |
aitab inimesi, kes kasutavad ekraanilugejaid, ning parandab ka otsingumootorite tabelite indekseerimise toimivust.
Mõelge lihtsale tabelile, millel on kolm rida ja kolm veergu, kusjuures esimese rea lahtrid on vastavate veergude pealkirjad. Vaikimisi kuvatakse tabeleid tavaliselt ilma ääristeta:
Näide: lihtne HTML -tabel
| Rubriik 1 | Rubriik 2 | Rubriik 3 |
|---|
| Lahter 2x1 | Lahter 2x2 | Lahter 2x3 |
| Lahter 3x1 | Lahter 3x2 | Lahter 3x3 |
Laua ääris
Me juba teame, et vaikimisi kuvatakse tabeleid ilma ääristeta. Laua ümber äärise lisamiseks peate oma dokumendis määrama mõned lihtsad stiililehe reeglid. Kinnisvara piir juhib tabeli ruudustiku joonte kuvamist ja määrab ka laua ümber oleva piiri laiuse pikslites. Laua ümber ja lahtrite vahel ilmub ääris. Lisage atribuut, määrates juba loodud tabelisse ühe piksli laiune raam piir näiteks tabeli kõikide elementide puhul:
Näide: kinnisvara rakendamine piir
Raami ümber laua
| Rubriik 1 | Rubriik 2 | Rubriik 3 |
|---|
| Lahter 2x1 | Lahter 2x2 | Lahter 2x3 |
| Lahter 3x1 | Lahter 3x2 | Lahter 3x3 |
Ühe laua raam
Vaikimisi on külgnevatel tabeli lahtritel oma piir. Selle tulemuseks on mingi "topeltpiir", nagu ülaltoodud näites näha. Topeltpiirist vabanemiseks lisage CSS -i omadus piir-kokkuvarisemine oma stiililehele:
Näide: kinnisvara rakendamine piir-kokkuvarisemine
Raami ümber laua
| Rubriik 1 | Rubriik 2 | Rubriik 3 |
|---|
| Lahter 2x1 | Lahter 2x2 | Lahter 2x3 |
| Lahter 3x1 | Lahter 3x2 | Lahter 3x3 |
Tabeliväljad ja vahekaugused
Vaikimisi on tabeli lahtrid nende sisu järgi sobitatud, kuid mõnikord on vaja jätta tabeli andmete ümber täidis. Kuna tühikud ja veerised on seotud andmete esitamise elementidega, saab seda ruumi kohandada CSS -stiililehtede abil. Lahtri väli ( polsterdus) Kas lahtri sisu ja selle piiri vaheline kaugus. Selle lisamiseks kasutage atribuuti polsterdus elemendile |
või |
... Lahtrite vahe ( piiride vahekaugus) Kas nende vaheline kaugus on ( |
või |
). Esmalt määrake väärtus eraldi vara piir-kokkuvarisemine element
ja seejärel määrake parameetrite väärtust muutes lahtrite vahe piiride vahekaugus... Varem vastutasid väljad ja lahtrite vahe eest atribuudid. mobiilirakendus ja rakkude vahe element
kuid need olid HTML5 spetsifikatsioonis aegunud.
Kasutamise näide polsterdus ja piiride vahekaugus:
Näide: atribuutide rakendamine polsterdus ja piiride vahekaugus
polsterdus ja piiride vahe
| Lahter 1 | Lahter 2 |
| Lahter 3 | Lahter 4 |
Tabeli laius
Atribuudi abil saab määrata brauseriakna tabeli hõivatud laiuse laius CSS, pikslites või protsentides. Tabeli laiuse määramine pikslites võimaldab teil määrata selle täpse laiuse. Protsent võimaldab muuta tabeli paindlikuks, s.t. see "venib" või "kahaneb" sõltuvalt sellest, millised muud elemendid lehel asuvad ja kui suur on brauseriaken.
Siin on näide atribuudi kasutamisest laius: Tabel (laius: 100%;) Näide: kinnisvara rakendamine laius
| Lahter 1 | Lahter 2 |
| Lahter 3 | Lahter 4 |
laius: 100%
| Lahter 1 | Lahter 2 |
| Lahter 3 | Lahter 4 |
Ühendavad rakud (colspan ja rowspan)
Tabeli struktuuri üks peamisi omadusi on lahtrite ühendamine, mis hõlmab lahtri venitamist mitme rea või veeru ulatuses. See võimaldab keerulisi tabelistruktuure: päiseid
või rakud |
kombineeritakse atribuutide lisamisega colspan või reavahe... Atribuut colspan määrab lahtrite arvu, mida antud lahter horisontaalselt laiendab, ja reavahe- vertikaalselt.
Ühendage veerud
Veeru liitmine saavutatakse atribuudi abil colspan elementides |
või |
- lahtrit venitatakse järgmiste veergude katmiseks paremale. Järgmises näites atribuudi väärtus colspan on 2, mis tähendab, et lahter peaks hõlmama kahte veergu.
Näide: atribuudi rakendamine colspan
Colspani atribuut
| colspan= "2"> Kahe veeruga lahter |
|---|
| Lahter 1 | Lahter 2 |
| Lahter 3 | Lahter 4 |
Ühendavad stringid
Stringid on ühendatud atribuudi abil reavahe, käituvad täpselt nagu ühendatud veerud, ainsa erinevusega, et lahtrite vahemik on ülevalt alla ja hõlmab mitut rida.
See näide venitab tabeli esimese lahtri kaks rida allapoole:
Näide: atribuudi rakendamine reavahe
| Lahter kahel real |
Lahter 1 | Lahter 2 |
|---|
| Lahter 3 | Lahter 4 |
Rowspan atribuut
| reavahe= "2"> Lahter kahel real |
Lahter 1 | Lahter 2 |
|---|
| Lahter 3 | Lahter 4 |
Tabeli päis
Paarisilti kasutatakse tabeli pealkirja või pealdise loomiseks
(ingliskeelsest pealdisest - signatuur). Element
on tabeli päise korraldamiseks. Asub kohe sildi järel
kuid väljaspool rea või lahtri kirjeldust.
Näide: sildi kasutamine
Subtiitrite element
See on tabeli päis
| Lahter kahel real |
Lahter 1 | Lahter 2 |
|---|
| Lahter 3 | Lahter 4 |
Tabelielementide siltide rühmitamine
Tabeli elementide rühmitamiseks kasutage silte
,
ja
... Nii nagu veebileht võib sisaldada päist, keha ja jalust, võib tabel sisaldada päid, keha ja jaluseid. Tabeli ülaosas olevate ridade loogiliseks rühmitamiseks (st tabeli ülaosa loomiseks) kasutage märgendit
... Tabeli päised tuleb paigutada elementi
, näiteks:
| Rubriik 1 | Rubriik 2< /th> |
|---|
Tabeli põhisisu (põhiosa) peab olema elemendi sees
(selliseid tabeleid võib tabelis olla mitu). Tabeli allservas olevate ridade loogiliseks rühmitamiseks (st tabeli jaluse loomiseks) kasutage märgendit
(ühes tabelis on lubatud mitte rohkem kui üks silt
). Lähtekoodis silt
märgi ette paigutatud
... Peale loogilise rühmitamise on üks elementide kasutamise põhjusi
ja
kui teie tabel on liiga pikk, et seda korraga ekraanil kuvada (või printida), kuvab brauser pealkirja (
) ja viimane rida (
), kui kasutaja sirvib teie tabelit.
Näide: sildid
,
ja
Thead, tbody ja tfoot sildid
| See on tabeli päis |
|---|
| See on tabeli jalus |
| Lahter 1 | Lahter 2 | Lahter 3 | Lahter 4 |
Hoolimata sellest, et oleme ees
lisatud
, ilmub see siiski tabeli lõpus. See tuleb sellest, et
võib sisaldada palju ridu. Kuid brauser peab enne kõigi (potentsiaalselt arvukate) andmeridade hankimist tabeli põhja renderdama. Sellepärast
koodis kirjutatakse elemendi ette
.
Ülesanded
Tabelid on üks olulisemaid, kuid samas keerukaid elemente, mis peavad veebilehtedel olema. Nende abiga on mugav esitada olulist ja kasulikku teavet üsna lühikeses vormis. Loomulikult võimaldab enamik eri mootoritega töötavaid mallide toimetajaid automaatselt sisestada tabeli saidi lehele või eraldi väljaandesse, kuid mis siis, kui veebiressursi kujundus ja selle lehed luuakse nullist? Siis võib algaja võlur silmitsi seista probleemiga: kuidas seda teha. Mõelgem välja, kuidas seda elementi õigesti ja kiiresti luua. Toimetaja valimineEsiteks, alustades tabeli loomist, peaksite otsustama redaktori üle, milles te töötate. Loomulikult on lihtsaim viis valida programm, milles loote saidi põhikoodi. Kuid selleks on kõige parem kasutada vana head märkmikku. Võite küsida, miks oma elu keerulisemaks muuta, sest kui teete toimetusse kõik korraga, siis on ka tulemus kohe näha ja saate kasutada ka programmi näpunäiteid. Jah, see on tõsi, kuid luues tabeli nullist, ei saa te mitte ainult põhjalikult uurida selle loomise põhimõtet, vaid ka vältida tüütuid kirjavigu ja põhikoodi vigu. Mõnikord juhtub, et kursor liigub kogemata alla ja kirjutamise käigus hiilib koodi sisse viga, mida on mõnikord raske leida. Kui olete märkmikule tabeli loonud, saate selle šifri kopeerida ja kleepida sinna, kuhu soovite. Tabeli loomise algoritmKõigepealt paneme kokku lühikese algoritmi, kuidas HTML -vormingus tabelit teha. See võimaldab teil mõista iga sammu järjestust. Seejärel analüüsime täpselt, kuidas iga punkti täita. 
Alustame ettevalmistavatest sammudest. 1. Joonista paberilehele tabeli skemaatiline pilt. 2. Loendame ridade ja lahtrite arvu. Kui viimase arv on erinev, loeme iga rea kohta eraldi. 3. Määrake reas päise lahtrite arv (näiteks lahtrid "Ei", "Nimi" jne). 4. Kirjutage üles tabeli peamised parameetrid - värv, kõrgus ja laius, teksti joondamine - üldiselt kõik, mida peate vajalikuks. 1. Sisestage tabeli sildid. 2. Sisestage reasildid vajaliku numbri alusel. 3. Sisestage ridadesse lahtrite sildid (tavalised ja suurtähed), lähtudes ka paberile kirjutatud numbrist. 4. Määrake tabeli parameetrid tervikuna. 5. Vajadusel määrake üksikute rakkude indikaatorid. 6. Me täidame oma lahtrid tekstiga. 
Loo tabelNii et olete valinud redaktori, mõtleme nüüd välja, kuidas HTML -vormingus tabelit luua. Märgend, millega tabel sisestatakse lehe koodi ( ), on seotud, st meie ehitus algab selle sildiga ja lõpeb tähega .Pärast tabelisiltide sisestamist jätkame ridade ja lahtrite loomist. Märgime kohe, et ka need elemendid on paaris. Silt määrab stringid ja | - rakud. Päise lahtrite jaoks kasutage paaristatud elementi | . Nagu juba mainitud, on esimene samm joonte koostamine ja seejärel lahtrite kirjutamine nendesse. Selleks, et mitte segadusse sattuda, soovitame kas taanduda ühe või kahe rea iga ploki vahele või kirjutada uus elementide plokk, kasutades klahvi "Tab". Kuidas see välja võiks näha? Nagu see: ;;| P / p nr. | ;| Perekonnanimi | ; ;;| 1 | ;| Ivanov | ; | ; .
Nagu näete, pole selles midagi keerulist. Peaasi, et mitte segi ajada ridade ja lahtrite arvu. Vastasel juhul võib laud viltu minna. Oleme arutanud tabeli loomist HTML -is, nüüd saame jätkata nii maatriksi enda kui ka selle ridade ja lahtrite parameetritega. 
Tabeli parameetridKoodi kirjutamisel peaksite pöörama tähelepanu järgmistele punktidele: piiride joondamine, taust, tekst jne. Tabeli parameetrid on märgendis määratud ... Need sisaldavad:1. Piir - piiride laius. Määra täisarvuks. Vaikimisi on mis tahes tabeli piirid nullid. 2. Bordercolor - äärise värv. Seda saab seada kuueteistkümnendarvulise värvikoodina (# 00008B) ja selle nime inglise keeles (DarkBlue). Vaikimisi on see alati hall. 3. Bgcolor - määratakse ka koodi või nime järgi. 4. Joondamine - teksti joondamine laua taga. Vaikimisi on joondatud vasakule. Selle parameetri jaoks on järgmised valikud. - vasakule - keerake ümber paremale;
- parem -mähkimine vasakule;
- keskel - kuvab tabeli keskel ilma ümbriseta.
5. Laius ja kõrgus - laua laius ja kõrgus. Seda saab määrata nii pikslites kui ka protsentides (brauseriakna suuruse suhtes). Selle või selle näitaja määramisel peaksite pöörama erilist tähelepanu disainile. Parameetrile peab järgnema "võrdusmärk", millele järgneb määratud väärtus jutumärkides. Mis puudutab teksti värvi, siis on see kujundatud samamoodi nagu tavaline HTML -vormingus tekst. Näide laua kujundusest: ;;| P / p nr. | ;| Perekonnanimi | ; ;;| 1 | ;| Ivanov | ; | ; .
Stringi parameetridNiisiis, oleme juba välja mõelnud, kuidas teha tabel HTML -is ja registreerida selle peamised parameetrid. Aga mis siis, kui meil on vaja rida esile tõsta? Kas seda tuleks kujundada erinevalt tabeli põhitekstist? Stringi parameetrid on märgendisse kirjutatud täpselt sama mis tabeli andmed. Stringile saab määrata järgmised muutujad:1. Piir, bordercolor ja bgcolor, mida te juba teate. 2. Joondamine - teksti joondamine reale. See võib võtta väärtusi vasakule, keskele ja paremale. 3. Valign - see silt joondab teksti vertikaalselt. See võtab järgmised väärtused: - ülaosa - tekst joondatakse ülemise äärisega;
- keskel - keskel;
- alt - mööda alumist piiri.
Näide rea vormindamisest: ;| P / p nr. | ;| Perekonnanimi | ; .
Lahtrite parameetridJa viimane asi, millele tasub tähelepanu pöörata neile, kes soovivad teada, kuidas HTML -is tabelit teha, on üksikute lahtrite parameetrid, nii tavalised kui ka suurtähed. Tegelikult tehakse kõike samamoodi nagu laua või rea puhul. Ainus asi on see, et lisatakse veel kaks olulist elementi: 1. Colspan - see parameeter määrab veergude arvu, mida lahter võib hõlmata. 2. Rowspan - näitab juba ridade arvu, mille see lahter hõivab. Kuna disain ei erine rea kirjutamisest, ei too me koodi näidet. 
järeldusedLaua tegemine pole nii keeruline, kui esmapilgul võib tunduda. Tema koodi kirjutamisel on peamine asi visadus ja tähelepanu. Mis puutub tabeli HTML -i lisamisse, siis peate lihtsalt selle šifri kopeerima ja kleepima täpselt oma lehe kohta, kus see teie arvates peaks asuma. Katsetage julgelt ja saate peagi täiuslikuks laudade loomise tehnika. Edu!
HTML -tabelid on nii funktsionaalsed, et saate neid kasutada tervete saitide trükkimiseks (lugemiseks). Nüüd räägime lihtsate HTML -tabelite sisestamisest veebilehele, parsides ainult märgistus, kuid mitte puudutades kujundust, sest parem on tabeleid kaunistada CSS -stiilidega.
Tabeli sildid ja atribuudid
Siin on tabelite loomiseks vajalikud põhielemendid:
- anum, mille sees laud asub (sama mis märgistatud või
nummerdatud loendite jaoks).
- piir- atribuut, mis määrab raamide paksuse. Selle asemel on parem kasutada CSS -i piiri.
-
täpsustab tabeli allkirja. Te ei pea konteinerit kasutama, kuid kui otsustate ikkagi tabeli pealkirja panna, pange see kohe sildi taha
, väljaspool rakke ja jooni.
- paarisilt, mis sisaldab tabelirida (horisontaalselt samal tasemel asuvad lahtrid).
|
- silt, mis loob tabeli päise lahtri. Väliselt erineb selle sisu teiste lahtrite sisust - tavaliselt tekstis |
brauser on julge ja tsentreeritud.
- konteiner, millega luuakse lihtne lahter. Kui palju selliseid silte string sisaldab (silt
, selles on sama palju rakke: üks silt - üks lahter.
-
võimaldab teil veerge kiiresti ja ilma koodi segamata rühmitada, et määratleda nende ühised omadused. Konteineri abil saate tabeli loogilised osad üksteisest eraldada. Asub sildi järel
, kui mitte, siis pärast
.
-
kasutatakse samal eesmärgil nagu
.
võib sisaldada
aga mitte vastupidi.
- span- atribuut, mis määrab veergude arvu, millele konteineri atribuudid rakendatakse
.
-
,
ja
- mahutid, mis võimaldavad teil laua vastavalt jagada ülemiseks (päised), põhi- (kere) ja alumiseks (lõplikuks) osaks. HTML -tabelis on nende siltide järjestus sama kui konteinerite järjestus
,
ja HTML -dokumendis.
- colspan vaja ühendada lahtrid järjest. Atribuudi väärtus sisaldab arvu, mis määrab ühendatavate lahtrite arvu.
- reavaheühendab lahtrid veergudeks.
Näide tabeli loomiseks
Looge HTML -dokument ja kopeerige sinna järgmine kood:
Tabeli näide
Veebisaidi loomise tööriistad
| Ametisse nimetamine | Tööriist |
| Märgistus | Html | XHTML |
| Registreerimine | CSS |
| Arendus | PHP | Python |
Brauseris näeb dokument välja selline: Analüüsime, millised koodiridad mille eest vastutavad.
- avas laua, määrates raamide paksuse.
-
Veebisaidi loomise tööriistad
- nimetas seda.
- avas rea.
|
Ametisse nimetamine |
- lõi lahtri pealkirja kujundusega.|
Tööriist |
- lõi reale teise päise lahtri. Colspani parameeter näitas, et see lahter peaks horisontaalselt hõivama kaks.
- sulges liini. Ülejäänud read loodi samamoodi. |
Märgistus |
Html |
XHTML |
- lisas tabeli teise rea tavaliste, mitte päise lahtritega. Järgmised read ja lahtrid sisestati sarnaselt.
- pani laua kinni.
on laua keha. Keha koosneb ridadest ja veergudest. Tabel täidetakse rida -realt.
Iga silt loob uue rea. Edasi pesitsenud luuakse veerge. Võimalik on luua mitu veergu. Sellisel juhul peate jälgima veergude arvu igas reas. Näiteks kui esimesel real oli 5 veergu, siis ka järgmistel ridadel peaks olema 5 veergu. Vastasel juhul laud hõljub. Rakke on võimalik kombineerida.
Kuidas teha tabelit html -vormingus
Toome näite, html -koodi:
| Tabeli näide |
| 1. veerg |
2. veerg |
Pöörake tähelepanu lahtrile | ... Lahtrite horisontaalseks ühendamiseks kasutame spetsiaalset atribuuti colspan. Selle arvväärtus näitab ühendatavate veergude arvu. Selle atribuudi analoog on ka: silt | (tabeli päis), kuhu peate kirjutama ka colspan. Tulemus jääb samaks. Kuid sageli kasutatakse tavalist td.
Nüüd vaatame lähemalt kõiki märgendi atribuute.
.
Märgistage atribuudid ja omadused
Avasildi juurde saate kirjutada erinevaid atribuute.
1. Property align = "parameeter" - määrab tabeli joonduse. See võib võtta järgmisi väärtusi:
Ülaltoodud näites joondasime tabeli keskel align = "center".
Seda atribuuti saab rakendada mitte ainult tabeli, vaid ka üksikute tabeli lahtrite jaoks. või stringid | ... Seega on joondamine erinevates rakkudes erinev.
Näiteks
| ... |
| ... |
...
2. Atribuudi taust = "URL" - määrab taustapildi. URL -i asemel tuleb kirjutada taustapildi aadress.
Näide
| Tabeli näide |
| 1. veerg |
2. veerg |
Lehel teisendatud järgmiseks:
Ülaltoodud näites asub meie taustapilt kaustas img (mis asub html -lehega samas kataloogis) ja pildi nimi on fon.gif. Pange tähele, et märgendisse oleme lisanud style = "color: white;" ... Kuna taust on peaaegu must, nii et tekst ei sulanduks taustaga, tegime teksti valgeks.
3. Atribuut bgcolor = "värv" - määrab tabeli taustavärvi. Värvina saate valida kogu paleti (vt html -värvide koodid ja nimed)
4. Atribuudi piir = "number" - määrab tabeli äärise paksuse. Eelmistes näidetes määrasime piiri = "1", mis tähendab, et äärise laius on 1 piksel.
5. Atribuut bordercolor = "värv" - määrab äärise värvi. Kui ääris = "0", siis äärist pole ja äärise värv ei ole mõttekas.
6. Atribuut cellpadding = "number" - taane raamilt lahtrisisule pikslites.
7. Atribuut cellpacing = "number" - lahtrite vaheline kaugus pikslites.
8. Atribuudi veerud = "number" - veergude arv. Kui te seda ei määra, määrab brauser veergude arvu ise. Ainus erinevus on see, et selle parameetri täpsustamine kiirendab tõenäoliselt tabeli laadimist.
9. Atribuudi raam = "parameeter" - kuidas kuvada ääriseid laua ümber. See võib võtta järgmisi väärtusi:
- tühine - ärge tõmmake piire
- piir - piir laua ümber
- ülal - äär tabeli ülaosas
- all - äär tabeli allosas
- hsides - lisage ainult horisontaalsed äärised (tabeli üla- ja alaosa)
- vsides - tõmmake ainult vertikaalseid piire (tabeli vasakule ja paremale)
- rhs - ääris ainult laua paremal küljel
- lhs - ääris ainult laua vasakul küljel
10. Atribuudi kõrgus = "number" - määrab tabeli kõrguse: kas pikslites või protsentides.
11. Atribuudireeglid = "parameeter" - kus kuvada lahtrite vahelisi piire. See võib võtta järgmisi väärtusi:
- kõik - iga tabeli lahtri ümber tõmmatakse joon
- rühmad - rida kuvatakse siltide moodustatud rühmade vahel , , ,
või
- veerud - rida kuvatakse veergude vahel
- pole - kõik piirid on peidetud
- read - piir tõmmatakse sildi kaudu loodud tabeliridade vahele
12. Atribuudi laius = "number" - määrab tabeli laiuse: kas pikslites või protsentides.
13. Property class = "klassi_nimi" - saate määrata selle klassi nime, kuhu tabel kuulub.
14. Atribuudi stiil = "stiilid" - stiile saab määrata iga tabeli jaoks eraldi.
Nüüd on aeg sukelduda tabelisse ja vaadata tabeli lahtrite atribuute. Need atribuudid tuleb kirjutada algusmärgendisse.
.
Atribuudid ja omadused ja |
1. Property align = "parameeter" - määrab eraldi tabeli lahtri joondamise. See võib võtta järgmisi väärtusi:
- vasak - vasak joondus
- keskel - keskjoondus
- paremale - paremale joondamine
2. Atribuudi taust = "URL" - määrab lahtri taustapildi. URL -i asemel tuleb kirjutada taustapildi aadress.
3. Atribuut bgcolor = "värv" - määrab lahtri taustavärvi.
4. Atribuut bordercolor = "värv" - määrab lahtri äärise värvi.
5. Atribuut char = "letter" - määrab tähe, millest joondamine tuleks teha. Joondamisatribuudi väärtuseks tuleb määrata char.
6. Atribuut colspan = "number" - määrab ühendatavate horisontaalsete lahtrite arvu.
7. Atribuudi kõrgus = "number" - määrab tabeli kõrguse: kas pikslites või protsentides.
8. Atribuudi laius = "number" - määrab tabeli laiuse: kas pikslites või protsentides.
9. Atribuut rowspan = "number" - määrab ühendatud vertikaalsete lahtrite arvu.
10. Atribuut valign = "parameeter" - lahtri sisu vertikaalne joondamine.
- ülaosa - joondab lahtri sisu rea ülaosaga
- keskmine - keskmine joondus
- alt - joondage põhjaga
- baasjoon - baasjoone joondamine
Märkus 1 Sildi jaoks | saadaval on samad valikud nagu | ... Ühe sildi parameetrid | rakendatakse hierarhiliselt kõigile selle sees
Kuidas vältida lauarakkude kokkukleepumist
Äärise (lahtrite äär) ja lahtrite vahelise polsterdamise korral liimitakse need ikkagi kokku ja saate kahekordse piiri. Selle vältimiseks peate stiililehel registreerima tabeli border-collapse: collapse:
...
Hea lugeja, nüüd oled html tabelisildi kohta palju rohkem teada saanud. Nüüd soovitan teil liikuda järgmise õppetunni juurde.
Lihtsa HTML -tabeli lähtekood
Lahter 1 |
Lahter 2 |
Lahter 3 |
Lahter 4 |
Lahter 5 |
Lahter 6 |
Lahter 7 |
Lahter 8 |
Lahter 9 |
HTML tabeli päised
HTML -tabelites on kahte tüüpi lahtreid. Märgend määratleb tavalist tüüpi lahtri. Kui lahter toimib pealkirjana, identifitseeritakse see sildiga.
Näidis HTML -tabel pealkirjaga
| Volkswagen AG |
Daimler AG |
BMW kontsern |
|---|
| Audi |
Mercedes-Benz |
Bmw |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Nutikas |
Rolls-Royce |
HTML -tabeli lähtekood koos päistega
Volkswagen AG |
Daimler AG |
BMW kontsern |
|---|
Audi |
Mercedes-Benz |
Bmw |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Nutikas |
Rolls-Royce |
Ühendage lahtrid HTML -tabelis
HTML -tabelitel on võimalus ühendada lahtreid horisontaalselt ja vertikaalselt.
To ühendage lahtrid horisontaalselt kasutage atribuuti colspan = " NS", kambris või kus x
To ühendage lahtrid vertikaalselt kasutage atribuuti rowspan = " NS", kambris või kus x- ühendatavate rakkude arv.
Rakke saab ühendada horisontaalselt ja vertikaalselt samal ajal. Selleks kasutage soovitud lahtri jaoks atribuute colspan ja rowspan.
Lahtritekst |
Pange tähele, et lahtrite ühendamisel muutub rea üksuste arv. Näiteks kui tabelil on 3 lahtritega veergu ja me ühendame esimese ja teise lahtri, siis on seda rida määratleva märgendi sees 2 elementi, esimene neist sisaldab atribuuti colspan = "2".
Näide HTML -tabelist lahtrite liitmisega
Ühendatud lahtritega HTML -tabeli allikas
Nissan |
|---|
Mudel |
Varustus |
Kättesaadavus |
|---|
Nissan Qashqai |
VIISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Päised ja jalused ning allkiri HTML -tabelites
HTML -tabeleid saab jagada kolmeks alaks: päis, põhiosa, jalus.
Selleks pakitakse tabeli valitud osa read siltidega. määratleb päiseala, - jalusala, - tabeli sisu.
Vaikimisi pole päised ja jalused stiilis (seda saab vajadusel teha CSS -i kaudu), kuid brauserid saavad neid kasutada. Näiteks mitmeleheküljelise tabeli printimisel võidakse päised ja jalused igal prinditud lehel dubleerida.
Piirkonnasiltide paigutamise õige järjekord tabeli HTML -koodis on järgmine: esmalt päis, seejärel jalus, seejärel põhiosa. Sel juhul kuvatakse lehe põhiosa päiste ja jaluste vahel.
Vajadusel saate tabelisse allkirja lisada. Selleks kasutage silti.
Näidis HTML -tabel päiste ja jaluste ning allkirjaga
Tabeli lähtekood päiste ja jaluste ning allkirjaga
Täielik komplekt Renault Sandero Stepway
Iseloomulik |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Kättesaadavus |
+ |
+ |
+ |
|---|
Mootori võimsus |
0,9 (90 hj) |
0,9 (90 hj) |
1,5 (90 hj) |
|---|
Kütus |
bensiin |
bensiin |
diisel |
|---|
Toksilisuse määr |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Veerud ja veerugrupid
HTML -tabeli saab siltide ja abil jagada veergudeks ja veerugruppideks.
See eraldamine võimaldab teil määrata tabeli stiilid, kasutades minimaalset arvu CSS -atribuute, vähendades seeläbi tabelikoodi hulka (selle asemel, et määratleda stiilid iga veeru lahtri jaoks, saate määrata stiilid ühele või mitmele veerule korraga).
Sildid ja paigutatud sildi ette siltide ette, AKP6 (EDC) Edasikandumine |
HTML tabeli c allikas ja
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Iseloomulik |
|---|
1,5 (90 hj) |
1,2 (115 hj) |
1,5 (90 hj) |
Mootori võimsus |
|---|
diisel |
bensiin |
diisel |
Kütus |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Edasikandumine |
|---|
Tabelid saidi lehe paigutuses
Kaasaegsetel saitidel on oluline lehti õigesti kuvada nii arvutites kui ka mobiilseadmetes. HTML -lehe skeleti loomiseks ei ole soovitatav kasutada tabeleid, kuna kaob võimalus kohandada sisu erineva suurusega ekraanidele (arvutid, nutitelefonid, tahvelarvutid).
Tabelirühma silte on kõige parem kasutada lehel tabelivormingus sisu kuvamiseks.
| |
|
| | |
| | |
