HTML-tabelle - Nuttige wenke - 2021
die HTML-tabelle dit word nie net op die gewone manier gebruik nie (as 'n stel data versprei oor selle, rye en kolomme), maar ook om die inligting op die bladsy te plaas. Eenvoudig gestel, u kan die volledige HTML-bladsy in die vorm van 'n tabel aanbied en die menu byvoorbeeld in die linkerkolom, die hoofinligting in die middelste kolom en aanvullende skakels in die regterkolom plaas. Die aantal kolomme, rye en dienooreenkomstig selle word slegs deur u gekies en kan een wees.
Vanaf die bladsy wat u nou lees, is dit oorspronklik gebou op hierdie beginsel: dit is verdeel in verskillende rye, en elke ry in kolomme (en, in verskillende rye, 'n ander aantal kolomme). In sommige van die resulterende selle word op hul beurt meer tabelle geplaas (tabelle word in tabelle ingevoeg). U kan dit selfs net visueel sien.
Oor die algemeen maak dit die gebruik van tabelle in HTML baie makliker. U sal egter alles sien! Laat ons dus direk oefen.
§ 1. Die opstel van 'n tabel
Van ama word 'n tabel in HTML geskep met en -etikette, tabelrye (geplaas tussen en tags) en, en tabelkolomme (geplaas tussen en tags) en tags.
Skep byvoorbeeld 'n tabel wat bestaan ​​uit een ry en twee kolomme. Die HTML sal so lyk:
Maar meestal is daar baie rye en kolomme in die tabel, en met so 'n rekord sal u voortdurend verward wees. Daarom beveel ek eers die eerste metode aan.
§ 2. Tafelraam (grense)
Die tabel in blaaiers verskyn standaard sonder 'n raam. Om die tabelraam sigbaar te maak, word die attribuut "wat u alreeds vertroud is met die vorige afdelings" gebruik:grens»:
En dan wys die blaaier:
Eerste sel Tweede sel
Die begin van die "grens" -kenmerk beïnvloed slegs die buitenste grens; grense tussen selle kan nie verander word nie. Dit kan óf gewys word óf nie. Byvoorbeeld, as u die waarde van die "grens" -kenmerk verander van "1" na "5":
U kan die kleur van die tabelrand verander deur die "bordercolor". Byvoorbeeld:
Dan sal ons in die blaaier sien:
§ 3. Inkeping in die tabel
Om die inkeping te verander tussen aangrensende selle van die tabel, gebruik die HTML-attribuut die "Cellspacing". Kom ons kompliseer die tabel vir duidelikheid: maak twee rye van drie kolomme en pas die kenmerk "selafstand" toe:
Die B-router sal wys:
Eerste sel Tweede sel Derde sel
Vierde sel Vyfde sel Sesde sel
Inkeep binne selle die kenmerk "Celafstand". As ons die eerste reël in ons HTML-kode verander:
§ 4. Die vereniging van tafelselle
Om tafelselle horisontaal (kolomme) of vertikaal (rye) te kombineer, word die volgende eienskappe in HTML gebruik:
colspan - selle horisontaal (kolomme) te kombineer,
rowspan - selle vertikaal (rye) saamsmelt.
Verander byvoorbeeld ons HTML-kode:
Eerste en tweede selle Derde sel
Eerste sel Tweede sel Derde en sesde selle
Vierde sel Vyfde sel
§ 5. Die titel van die tabel
As u 'n tabel gebruik om data te organiseer (en nie vir bladsyuitleg nie), moet u miskien 'n kopskrif gebruik. Die tabeltitel word opgestel deur die tag. Byvoorbeeld:
In 'n blaaier lyk dit so:
U kan die kenmerk "opin lyn te bring". Om in lyn te kom met die tabel.
Die lyn-kenmerk het die volgende waardes:
links - bring die titel in lyn met die linkerkant van die tafel,
reg - belyn die titel aan die regterkant van die tafel,
sentrum - bring die titel in lyn met die middel van die tabel (standaardwaarde),
top - dieselfde as "sentrum", werk slegs in alle blaaiers,
onderkant - die titel word geplaas onder die tafel in die middel.
§ 6. Afmetings van die tabel
En u kan die grootte van die tabel en selle verander deur die volgende kenmerke te gebruik:
wydte - die breedte van die tabel, kolom, sel,
hoogte - die hoogte van die tafel, ry, sel.
En x-waardes word in pixels of persentasie gespesifiseer. Byvoorbeeld:
§ 7. Tabelbelyning
In HTML word die horisontale belyning van die tabel ten opsigte van die bladsy gedoen met behulp van die kenmerk wat u reeds ken:in lyn te bring". Die betekenis daarvan is ook aan u bekend:
sentrum - belyning van die tafel in die middel,
links - belyning van die tafel na links,
reg - belyning van die tafel na regs.
Standpunt vind belyning aan die linkerkant plaas. 'N Voorbeeld:
Om die teks in die tabel (en die ander inhoud daarvan) in lyn te bring, moet u die kenmerk "align" gebruik om elke spesifieke sel! omdat dit is in die selle dat die volledige inhoud van die tabel geleë is. 'N Voorbeeld:
Eerste sel (regs in lyn) Tweede sel (gesentreer) Derde sel
Vierde sel Vyfde sel Sesde sel (regs in lyn)
Om die inhoud vertikaal in lyn te bring sel die kenmerk "valign", Wat die volgende betekenisse het:
basislyn - belyning op die basislyn,
onderkant - belyning aan die onderrand,
middel - belyning in die middel (standaardwaarde),
top - belyning op die boonste rand.
Rande en rame
Die tabel het standaard geen rand nie. U kan dit byvoeg deur die grensattribuut van die tag te gebruik
. Blaaiers vertoon egter soms hierdie grens anders, daarom is dit beter om hierdie proses toe te ken aan die werk met style:
Agtergrond en tekskleur
Om die agtergrond van 'n HTML-sel, ry of individuele sel, op die etikette aan te dui
Die volgende opsies kan toegepas word:
agtergrond - die beeld word as agtergrond gebruik. U kan die lêernaam of die pad daarna spesifiseer,
bgkleur - die agtergrond is 'n spesifieke kleur. U kan beide die naam van die skakering van belangstelling en die heksadesimale kode spesifiseer.
Om die kleur van teks in 'n HTML-tabel te verander, moet u 'n tag gebruik.
§ 8. Tabelagtergrond
In HTML word die agtergrondkleur van die tabel of sy individuele selle opgestel met behulp van die 'bgcolor". Ons het gesels oor hoe om die gewenste kleur van 'n element in HTML te kies in die les oor die eienskappe van die body tag. 'N Voorbeeld:
In die blaaier sal ons sien:
U kan prente gebruik as die agtergrond van die tabel of as 'n enkele sel. In HTML word dit gedoen met behulp van die "agtergrond". Die waarde van die "agtergrond" -kenmerk is die adres na die prent (hoe ons die grafika in hierdie les bestudeer het). Voorbeeld agtergrondprent vir die hele tabel:
Derde sel Vierde sel
Vir 'n enkele sel word die agtergrondprent soos volg gestel:
In HTML word die inkeping in 'n tabel opgestel met behulp van 'n tag
selafstand - die afstand tussen die grense van naburige selle,
sellulering - die afstand tussen die inhoud en die grens van die sel.
Die visuele vertoon van hierdie kode in die blaaier is soos volg:
U kan twee parameters spesifiseer vir elke afsonderlike sel of ry wat horisontale (belyn) en vertikale (valign) teksbelyning in die HTML-tabel uitvoer.
Die parameter op die lyn kan die volgende waardes hê:
links - belyning aan die linkerkant,
regs - belyning op die regtergrens,
middel - middel belyning.
Die waardevolle parameter kan die volgende waardes hê:
onderkant - belyning op die onderste grens,
bo - belyning met die boonste grens,
middel - belyning in die middel.
Voeg beeld in HTML-tabel in
Webmeesters het dikwels 'n vraag oor hoe om 'n foto in 'n HTML-tabel in te voeg? Om dit te kan doen, is dit nodig om die adres of prentnaam na die etiket in die toepaslike sel te registreer .
alt - alternatiewe teks wat in die blaaier vertoon word wanneer die beeldweergawe-funksie gedeaktiveer is,
titel - titel van die foto,
belyn - horisontale belyning,
valign - vertikale belyning.
Boonop kan die prentjie in 'n spesiale etiket as 'n skakel toegedraai word.
Selle saamsmelt in 'n HTML-tabel
Nabye selle in 'n enkele kolom of ry kan gekombineer word met behulp van die rye en kolspan-parameters van die tag .
Die unie van die kolomme van een ry lyk soos volg:
Natuurlik kan u self HTML-tabelle maak deur al die HTML-tags te handmatig te skryf. Die tabel loop in hierdie geval die gevaar dat dit nie korrek saamgestel word nie, aangesien die menslike faktor homself op die hart dra as hy met groot volumes inligting werk.
Spesiale HTML-tafelopwekkers bestaan ​​al lank om u tyd te bespaar. Met hul hulp kan u maklik 'n tabel met baie instellings skep.
Een van die mees algemene tafelopwekkers is die Russiese taaldiens http://rusws.ru/genertabtag. In sy arsenaal is daar baie instellings vir die bou van tafels: u kan die agtergrondkleur, belyning, tafelwydte, raamdikte, ens. Instel.
Dit is 'n uitstekende opsie om eenvoudige tabelle te genereer, maar vir meer ernstige doeleindes, beveel ons aan dat u ander dienste gebruik:
Dieselfde diens het 'n redelik gerieflike HTML-redigeerder waarin u 'n tabel kan bou, 'n tabel kan invul en die kode daarvan kan kry:
As u besluit om die dienste van 'n tafelgenerator te gebruik, moet u die keuse van die diens wat u pas, versigtig benader, deur die gewildste daarvan te toets en die beste te kies.
Merkers en tabelkenmerke
Hier is die basiese elemente wat u benodig om tabelle te skep:
- die houer waarin die tafel geleë is (dieselfde as vir gemerkte of vir genommerde lyste).
grens - 'n kenmerk wat die dikte van die rame bepaal. In plaas daarvan is dit beter om die CSS-grenseienskap te gebruik.
stel die handtekening van die tabel op. Die houer kan nie gebruik word nie, maar as u nog steeds besluit om na die tafel te kyk, plaas dit onmiddellik na die etiket , buite selle en rye.
- 'n paar-etiket met 'n tabelry (selle wat op dieselfde vlak horisontaal geleë is).
- Die merker wat die tabel van die kopkop skep. Uiterlik is die inhoud daarvan anders as die inhoud in ander selle - gewoonlik die teks binne-in Die blaaier is vet en gesentreerd.
- die houer waarmee 'n eenvoudige sel geskep word. Hoeveel sulke etikette sal die string bevat (tag , daar sal soveel selle daarin wees: een merker - een sel.
kan u kolomme vinnig en sonder die kode verstop om algemene eienskappe daarvoor in te stel. Deur die houer te gebruik, kan u die logiese dele van die tafel van mekaar skei. Dit is na die etiket geleë, as dit nie is nie, dan na .
gebruik word vir dieselfde doel as. mag bevat, maar nie andersom nie.
span - 'n Kenmerk wat die aantal kolomme spesifiseer waarop die eienskappe van houers van toepassing is.
, en - houers waarmee u die tafel onderskeidelik in boonste (hoof-), hoof- (onderkant) en onderste (finale) dele kan verdeel. In die HTML-tabel is die volgorde van hierdie merkers dieselfde as die volgorde van houers en in die HTML-dokument.
colspan nodig om selle in 'n ry te kombineer. Die attribuutwaarde bevat 'n syfer wat die aantal selle bepaal wat saamgevoeg moet word.
rowspan verbind selle in kolomme.
Tabel skepping voorbeeld
Skep 'n HTML-dokument en kopieer die volgende kode daarin:
In die blaaier sal die dokument so lyk:
Kom ons kyk watter kodes daarvoor verantwoordelik is.
- maak die tafel oop en vra die dikte van die rame.
Gereedskap om webwerwe te skep - met die titel.
- maak die lyn oop.
aanstelling - het 'n sel met die kopkop geskep.
hulpmiddel - het 'n tweede kopsel in die ry geskep. Die colspan-parameter het aangedui dat hierdie sel twee horisontaal moet inneem. - die lyn gesluit. Net so het ons die oorblywende reëls geskep.
- het die tweede ry van die tabel bygevoeg met gewone, maar nie kop nie, selle. Daaropvolgende rye en selle is op dieselfde manier ingevoeg. - maak die tafel toe.
HTML Basics - 'n gratis videotutorial van 2 uur oor HTML-basiese begrippe,
'N Gratis kursus op perseeluitleg - 'n voorbeeld van blokuitleg van voor af,
Die uitleg van die webwerf vanaf nuuts af 2.0 is 'n volwaardige betaalde kursus.
§ 9. Gevolgtrekking
In HTML word tabelle, soos ek al aan die begin gesê het, hoofsaaklik vir bladsyuitleg gebruik. Dit is hul hoofdoel. In elke sel van die tabel kan u enige ander data invoeg: teks, prente of 'n ander tabel. Daarom is dit so handig om HTML-bladsye op te merk en dit in afsonderlike blokke te verdeel. U kan byvoorbeeld so 'n "komposisie" skep:
O, waar is my jeug!
En dit is die eenvoudigste ding wat met tabelle gedoen kan word! Dit is absoluut moontlik vir elke beginner om 'n webwerf op te stel wat op tabelvorm gebaseer is. Hierdie les is 'n bewys hiervan.
In die algemeen is dit nou die tyd vir onafhanklike eksperimente. Aangesien die les oor is skep tabelle in HTML voltooi. En daarmee is my verhaal oor die basiese beginsels van HTML voltooi.
En meya hierdie kennis, het ek begin om die hele webwerf te harp. Daarom beveel ek u aan om hierdie kennis prakties toe te pas. Alhoewel daar nog 'n gedeelte oor HTML-metatags is, hou hulle nie direk verband met die skepping van die webwerf nie. Konsolideer dus die kennis van hierdie deel en klik op die "Volgende" knoppie.
Deel die skakel na Seoded.ru met vriende, kennisse en mense met wie jy gesels in sosiale netwerke en forums! Boekmerk die webwerf self! So wen.