Eltrovi la plej el la HTML-tabloj per lernado de tabeloj
HTML-tabelo-atributoj donas al vi multe pli kontrolon pri HTML-tabloj. Estas multaj atributoj haveblaj al tabloj por fari ilin pli interesaj kaj ŝanĝi la aspekton de via paĝo.
HTML-TABLA Elemento-Atributoj
En HTML5 la elemento uzas la tutmondajn atributojn kaj unu alian atributon:. Kaj ĝi ŝanĝis nur havi la valoron de 1 aŭ malplena (te limo = ""). Se vi volas ŝanĝi la larĝecon de la limo, vi devas uzi la limon-larĝa CSS-posedaĵon.
Vidu sube por lerni pri la validaj tabeloj de HTML5.
Ankaŭ ekzistas pluraj atributoj, kiuj estas parto de la HTML 4.01-specifaĵo, kiu fariĝis malaktuala en HTML5:
- -Ĉi la CSS-kompletigan proprieton sur la elementoj TD kaj TH de la tablo.
- -Ĉi la CSS-posedaĵon limas-interspacon sur la tablo.
- -Use CSS-stiloj limo-koloro: nigra; kaj landlima stilo sur la tablo.
- -Use CSS- stiloj limo-koloro: nigra; kaj landlima stilo sur la taŭgaj elementoj de la tablo.
- -Instead, vi devus priskribi la strukturon de la tablo en CAPTION aŭ metu la tutan tablon en FIGURO kaj priskribi ĝin en FIGCAPIO. Alternative vi povus simpligi la strukturon de la tablo por ke neniu klarigo estu necesa.
- -Ĉu la CSS larĝa propraĵo.
Kaj unu atributo, kiu estis senkulpigita en HTML 4.01 kaj ankaŭ malaktuala en HTML5.
Lernu pli pri la HTML 4.01-Tabloj-Atributoj.
- vicigi -Use la CSS-rando-posedaĵon anstataŭe.
Ankaŭ ekzistas pluraj atributoj, kiuj ne estas parto de iu ajn HTML-specifaĵo.
Uzu ĉi tiujn atributojn, se vi scias, ke la retumiloj, kiujn vi subtenas, povas manipuli ilin kaj vi ne zorgas pri valida HTML.
- -Ĉu la CSS-posedaĵon fonkolora anstataŭe.
- bordercolor -Ĉu la CSS-proprieta limo-koloron anstataŭe.
- bordercolorlight -Use la CSS-posedaĵo limo-koloron anstataŭe.
- bordercolordark -Ĉu la CSS-proprieta limo-koloron anstataŭe.
- koloj - Ne ekzistas alternativo al ĉi tiu atributo.
- alteco - Anstataŭe la CSS-posedaĵon alte.
- -Ĉu anstataŭ la CSS-posedaĵa rando.
- -Ĉu anstataŭ la CSS-posedaĵa rando.
- -Ĉu la CSS-proprieto anstataŭas blankan spacon.
- -Ĉu la CSS-posedaĵo vertikala-aligno anstataŭe.
Lernu pli pri la Specifaj Tabloj-Atributoj de la Foliumilo.
HTML5 TABLEA Elemento-Atributoj
Kiel ni menciis pli supre, ekzistas nur unu atributo, preter la tutmonda atributoj, valida sur HTML5-TABLE-elemento: limo.
La landlima atributo estas uzata por difini limon ĉirkaŭ la tuta tablo kaj ĉiuj ĉeloj en ĝi. Estis ia demando pri ĉu ĝi estus inkluzivita en la HTML5-specifaĵo, sed ĝi restis ĉar ĝi disponigis informojn pri la tablo-strukturo, preter simple stilaj implikaĵoj.
Por aldoni la landliman atributon, vi agordas la valoron al 1 se estas limo kaj malplena (aŭ forĵetas la atributon) se ne ekzistas. Plej multaj retumiloj ankaŭ subtenos 0 por neniu limo, kaj iu ajn alia entjera valoro (2, 3, 30, 500, ktp) por deklari la larĝan limon en pikseloj, sed ĉi tio estas malaktuala en HTML5. Anstataŭe, vi devus uzi CSS-landlimajn proprietojn por difini la limon larĝe kaj aliajn stilojn.
Por krei tablon kun limo, skribu:
border = "1" >
Jen tablo kun limo
Estas atributoj de HTML 4.01 kiuj estas malaktualaj en HTML5. Se vi planas skribi HTML 4.01-dokumentojn, vi povas lerni ilin, alie, vi povas ignori ilin. Plejparto de ĉi tiuj atributoj havas alternativojn, priskribitaj pli supre.
Ni priskribas la atributojn de la elemento valida en HTML5 (kaj HTML 4.01). Ĉi tio priskribas la TABLE-atributojn, kiuj estas validaj en HTML 4.01, sed estas malaktualaj en HTML5. Se vi ankoraŭ skribas HTML-4.01-dokumentojn, vi povas uzi ĉi tiujn atributojn, sed la plej multaj el ili havas alternativojn, kiuj faros viajn paĝojn pli estonte-pruveblaj por kiam vi moviĝos al HTML5.
Valida HTML 4.01 Atributoj
La atributo ni priskribis supre.
La sola diferenco en HTML 4.01 el HTML5 estas, ke vi povas specifi tutan entjeron (0, 1, 2, 15, 20, 200, ktp) por difini la larĝecon de la limo en pikseloj.
Por konstrui tablon kun 5px limo, skribu:
border = "5" >
Ĉi tiu tablo havas 5px limon.
Vidu ekzemplon de du tabloj kun limoj.
La atributo difinas la kvanton de spaco inter ĉelaj limoj kaj la enhavo de la ĉelo. La defaŭlta estas du pikseloj. Ŝanĝu la ĉenon al 0 se vi deziras neniun spacon inter la enhavo kaj limoj.
Por agordi la ĉelon al 20, skribu:
cellpadding = "20" >
Ĉi tiu tablo havas alŝutiĝon de 20.
Ĉeloj estas apartigitaj per 20 rastrumeroj.
Rigardu ekzemplon de tablo kun cellpadding
La atributo difinas la kvanton de spaco inter la tabeloj kaj la ĉela enhavo. Kiel cellpadding, la defaŭlta fiksas du pikselojn, do vi devas agordi ĝin al 0 se vi deziras neniun ĉelan interspacon.
Por aldoni ĉelon interspacon al tablo, skribu:
cellspacing = "20" >
Ĉi tiu tablo havas ĉirkaŭaĵon de 20.
Ĉeloj estos apartigitaj per 20 rastrumeroj.
Vidu tablon kun ĉelo
La atributo identigas, ke partoj de la limo ĉirkaŭ la ekstera tablo videblas. Vi povas fiksi vian tablon sur la kvar flankoj, unuflanke, supre kaj malsupre, maldekstren kaj dekstren, aŭ neniun.
Jen la HTML por tablo kun nur la maldekstra flanko:
frame = "lhs" >
Ĉi tiu tablo
Havos
nur la
maldekstra flanko kadrita.
Kaj alia ekzemplo kun la malsupra kadro:
frame = "below" >
Ĉi tiu tablo havas kadron ĉe la malsupro.
Rigardu iujn tabulojn per kadroj
La atributo estas simila al la kadra atributo, nur ĝi influas la limojn ĉirkaŭ la ĉeloj de la tablo. Vi povas agordi regulojn sur ĉiuj ĉeloj, inter kolumnoj, inter grupoj kiel TBODY kaj TFOOT aŭ neniu.
Por konstrui tablon kun linioj nur inter la vicoj, skribu:
rules = "vicoj" >
Ĉi tiu tabelo 4x4 havas
la vicoj ne kolumnoj
priskribita per la
reguloj atributo.
Kaj alia kun linioj inter la kolumnoj:
rules = "cols" >
Ĉi tio estas
tablo
kie la
kolumnoj
estas
reliefigita
Jen ekzemplo de tabulo kun reguloj
La atributo provizas informojn pri la tablo por ekranaj legantoj kaj aliaj uzantoj, kiuj povus havi problemojn por legi tabulojn. Por uzi la resuman atributon, vi skribas mallongan priskribon de la tablo kaj metu tion kiel valoro de la atributo. La resumo ne montriĝas en la retpaĝo en plej normaj retumiloj.
Jen kiel skribi simplan tablon kun resumo:
summary = "Ĉi tiu estas specimena tablo, kiu enhavas kompletan informon. La celo de ĉi tiu tablo estas pruvi resumon." >
kolumno 1 vico 1
kolumno 2 vico 1
kolumno 1 vico 2
kolumno 2 vico 2
Vidi tablon kun resumo
La atributo difinas la larĝecon de la tablo en ĉu pikseloj aŭ kiel procento de la ujo. Se la larĝo ne estas aro, la tablo nur prenos tiom multe da spaco, kiel ĝi bezonas por montri la enhavon, kun maksimuma larĝo same kiel la larĝa de la gepatra elemento.
Por konstrui tablon kun specifa larĝo en pikseloj, skribu:
larĝa = "300" >
Ĉi tiu tablo estas 80% de la larĝa de la ujo en ĝi.
Kaj por konstrui tablon kun larĝeco, kiu estas procento de la gepatra elemento, skribu:
larĝa = "80%" >
Ĉi tiu tablo estas 80% de la larĝa de la ujo en ĝi.
Vidu ekzemplon de tablo kun larĝa
Deprecata HTML 4.01 TABLEA Atributo
Ekzistas unu atributo de la TABLE-elemento, kiu estas malpreciza en HTML 4.01 kaj malaktuala en HTML5: vicigi . Ĉi tiu atributo lasas vin agordi kie la tablo devas esti lokita sur la paĝo relativa al la teksto, kiu estas apud ĝi. Ĉi tiu atributo estis senkulpigita en HTML 4.01, kaj vi devus eviti uzi ĝin. Anstataŭe, vi devus uzi la CSS-posedaĵon aŭ la randon-maldekstran: aŭtomatan; kaj rando-dekstra: aŭtomobilo; stiloj La kaleŝeja proprieto donas al vi rezulton, kiu estas pli proksima al tio, kion la alinea atributo havigis, sed ĝi povas influi kiel la resto de la paĝo enhavas. La rando-dekstra: aŭtomata; kaj rando-maldekstra: aŭtomobilo; estas kion la W3C rekomendas kiel alternativo.
Jen senpaga ekzemplo uzante la alinea atributo:
align = "dekstra" >
Ĉi tiu tablo estas ĝuste vicigita
Teksto ĉirkaŭas ĝin maldekstre
Vidu senpremitan ekzemplon per la alinea atributo.
Kaj por akiri la saman efikon kun valida HTML (ne-senprekrebla), skribu:
stilo = "flosilo: dekstra;" >
Ĉi tiu tablo estas ĝuste vicigita
Teksto ĉirkaŭas ĝin maldekstre
La jenaj klarigas atributojn de la TABLEO, kiuj ne estas parto de iu ajn HTML-specifaĵo.
La antaŭaj informoj priskribas atributojn de la HTML-elemento, kiuj estas validaj en HTML 4.01 sed estas malaktualaj en HTML5.
La jenaj priskribas atributojn de la TABLEO, kiuj ne estas validaj en iu ajn aktuala specifaĵo. Se vi ne zorgas pri ĉu viaj paĝoj validiĝas kaj viaj uzantoj uzas retumilon kiu subtenas ĉi tiujn elementojn, tiam vi povas uzi ĉi tiujn elementojn. Sed la plimulto de ili estas nekompreneblaj en modernaj foliumiloj aŭ havas alternativojn, kiuj estas pli normalaj.
Ni ne rekomendas uzi ĉi tiujn atributojn sur viaj HTML-tabloj.
La atributo estas malnova atributo kiu estis inkluzivita antaŭ ol CSS estis vaste subtenata. Ĝi ebligas al vi ŝanĝi la fonkoloron de la tablo. Vi povas agordi koloron aŭ heksadekan kodon. Ĉi tiu atributo ankoraŭ funkcias en multaj retumiloj, sed por estonta-pruvita HTML, vi ne devus uzi ĝin, kaj uzi CSS anstataŭe.
La pli bona alternativo al ĉi tiu atributo estas la stilo posedaĵo.
Por ŝanĝi la fonan koloron de tablo, skribu:
style = "background-color: #ccc;" >
Ĉi tiu tablo havas grizan fonon
Simila al la atributo bgcolor, la atributo bordercolor permesas ŝanĝi la koloron de la atributo. Ĉi tiu atributo nur estas subtenata de Interreta Esploristo. Anstataŭe, vi devas uzi la limon-kolorajn nemoveblaĵojn.
Por ŝanĝi la koloron de la limo de via tablo, skribu:
style = "border-color: red;" >
Ĉi tiu tablo havas ruĝan limon.
La atribuoj de bordercolor kaj bordercolordark estis inkluditaj en Interreto Explorer por permesi al vi krei 3D limon ĉirkaŭ via tablo. Tamen, kiel de IE8 kaj supre, tio nur estas subtenata en IE7 Standards Mode kaj Quirks Mode . Microsoft deklaras, ke ĉi tiuj propraĵoj jam ne estas subtenataj.
Malmulta tempo, la koloroj atribuas sur la TABLE-elemento estis proponitaj por helpi retumilojn scii kiom da kolumnoj tablo havis. La premiso estis, ke ĉi tio helpos pli rapide la bildon de grandaj tabloj. Tamen ĝi nur estis implementado per Interreto Esploristo, kaj ekde IE8 kaj supre, tio nur estas subtenata en IE7 Standards Mode kaj Quirks Mode.
Ĉar estas larĝa atributo (malaktuala en HTML5) multaj homoj supozis, ke ankaŭ ekzistas alta atributo por tabloj. Sed ĉar tabloj laŭigas la larĝecon de ilia enhavo aŭ la difinitan larĝecon en la CSS aŭ larĝa atributo, la alteco ne povis esti limigita. Do anstataŭe, retumiloj permesis la altan atributon difini la minimuman altecon de la tablo. Se la tablo estis pli alta ol tiu alteco, ĝi aspektus pli alta. Sed vi devas uzi la posedaĵon
Kun la alteco de CSS, vi povas restrikti la altecon se vi uzas la CSS-posedaĵon ankaŭ por difini, kio okazas kun iu troa enhavo.
Por agordi la minimuman altecon sur tablo, skribu:
stilo = "alteco: 30em;" >
Ĉi tiu tablo estas almenaŭ 30 ems alta.
La du atributoj kaj aldonitaj spacoj ĉirkaŭ la maldekstra / dekstra flankoj (hspace) kaj supro / malsupro (vsspaco) de la tablo. Vi devas uzi la stelposedon anstataŭe.
Por agordi la vertikala spaco al 20 rastrumeroj kaj la horizontala spaco al 40 rastrumeroj, skribu:
style = "margin: 20px 40px;"
Ĉi tiu tablo havas vspace de 20 rastrumeroj kaj hspace de 40 pikseloj.
La atributo estas bulea atributo, kiu difinas ĉu la enhavo de la tablo devas envolviĝi ĉe la rando de la gepatra elemento aŭ fenestro aŭ fortigi horizontalan movadon. Anstataŭe, vi devus difini la envolvajn karakterizaĵojn de ĉiu tablo-ĉelo uzante la CSS-posedaĵon.
Por fari kolumnon kun multe da teksto ne envolvita, skribu:
style = "blank-spaco: nowrap;" > Ĉi tio estas kolumno kun tuno da enhavo. Sed eĉ se ĝi estas pli larĝa ol la kontenero, la teksto ne devus envolviĝi al la sekva linio, sed anstataŭe fortigu la retumililon por movi horizontale por vidi la tutan enhavon.
Fine, la atributo difinas kiel la enhavo de ĉiu ĉelo devus aliĝi vertikale ene de la ĉelo. Anstataŭ ĉi tiu nevalida atributo, vi devas uzi la CSS-proprieton en ĉiu ĉelo, kiun vi volas ŝanĝi la alineación. Vi ne rimarkos la efikojn de ĉi tiu stilo krom se la enhavo de la ĉelo estas malpli ol la disponebla spaco kreita de aliaj, pli grandaj ĉeloj.
Forigi ĉelon aliĝi al la fundo (anstataŭ la mezo, kiel la defaŭltan), skribu:
Ĉi tiu ĉelo estas pli longa ol la resto kaj do devigos la altecon esti pli alta. Do vi vidos, ke la vertikala vicigita ĉelo viciĝas al la fundo.
style = "vertical-align: bottom;" > Enhavo en la fundo.
Enhavo en la mezo.