Visu iespējamo HTML tabulu iegūšana, apgūstot tabulas atribūtus
HTML tabulas atribūti ļauj jums daudz vairāk kontrolēt HTML tabulas. Tabulām ir pieejami daudz atribūtu, kas padara tos interesantākus un mainītu lapas izskatu.
HTML TABULA elementu atribūti
HTML5 elementā tiek izmantoti vispārējie atribūti un vēl viens atribūts:. Un tas ir mainījies, lai tikai vērtība ir 1 vai tukša (ti, robeža = ""). Ja vēlaties mainīt robežas platumu, jums jāizmanto robežas platuma CSS īpašums.
Skatiet tālāk, lai uzzinātu par derīgajiem HTML5 tabulas atribūtiem.
Pastāv arī vairāki atribūti, kas ir HTML 4.01 specifikācijas daļa, kas HTML5 formātā ir novecojusi:
- - Izmantojiet CSS polsterējuma īpašību tabulas TD un TH elementos.
- - Izmantojiet tabulas CSS īpašuma atstarpi uz malas.
- -Izmantot CSS stilus margas-krāsa: melna; un robežas stils uz galda.
- -Izmantot CSS stilus margas-krāsa: melna; un robežas stils uz atbilstošajiem tabulas elementiem.
- - Tajā jāapraksta tabulas struktūra CAPTION, vai arī visu tabulu jāuzklāj attēlā un apraksta to FIGCAPTION. Alternatīvi, jūs varētu vienkāršot tabulas struktūru tā, ka nav nepieciešams skaidrojums.
- -izmantojiet CSS platuma īpašumu.
Un viens atribūts, kas tika novecojis HTML 4.01 versijā, un tas ir novecojis arī HTML5.
Uzziniet vairāk par HTML 4.01 TABULA atribūtiem.
- izlīdzināt - vietā izmantot CSS maržas īpašumu.
Ir arī vairāki atribūti, kas nav nevienas HTML specifikācijas sastāvdaļa.
Izmantojiet šos atribūtus, ja zināt, ka atbalstītās pārlūkprogrammas var tām rīkoties, un jums nav nozīmes derīgā HTML.
- -Iespējiet CSS īpašuma fona krāsu.
- bordercolor - izmantojiet CSS īpašuma robežas krāsu.
- bordercolorlight - izmantojiet CSS īpašuma robežas krāsu.
- bordercolordark - izmantojiet CSS īpašuma robežas krāsu.
- cols -Šī atribūta alternatīva nav.
- augstums - izmantojiet CSS īpašuma augstumu.
- -Tā vietā izmantojiet CSS īpašuma rezervi.
- -Tā vietā izmantojiet CSS īpašuma rezervi.
- -Iespējiet CSS īpašuma balto laukumu.
- -Tā vietā izmantojiet CSS īpašumu vertikāli.
Uzziniet vairāk par Browser Specific TABLE atribūtiem.
HTML5 TABULA elementu atribūti
Kā minēts iepriekš, ir tikai viens atribūts, kas pārsniedz globālos atribūtus, kas ir spēkā HTML5 TABLE elementā: robeža.
Pierobežas atribūts tiek izmantots, lai definētu robežu ap visu tabulu un tajā esošās šūnas. Bija zināms jautājums, vai tas būtu iekļauts HTML5 specifikācijā, taču tas palika tāpēc, ka tas sniedza informāciju par tabulas struktūru, kas pārsniedz tikai stila sekas.
Lai pievienotu robežas atribūtu, jūs iestatāt vērtību 1, ja ir robeža un tukša (vai atstājiet atribūtu), ja tāda nav. Lielākā daļa pārlūkprogrammu arī atbalstīs 0 bez robežas un jebkuru citu veselu skaitļu vērtību (2, 3, 30, 500 utt.), Lai deklarētu robežas platumu pikseļos, bet tas HTML5 laikā ir novecojis. Tā vietā, lai noteiktu robežu platumu un citus stilus, jums vajadzētu izmantot CSS rāmja stila rekvizītus.
Lai izveidotu tabulu ar robežu, rakstiet:
border = "1" >
Šī ir tabula ar robežu
HTML5 ir atribūti HTML 4.01, kas ir novecojuši. Ja plānojat rakstīt HTML 4.01 dokumentus, jūs varat tos uzzināt, pretējā gadījumā jūs tos varat ignorēt. Lielākajai daļai šo atribūtu ir alternatīvas, kas aprakstītas iepriekš.
Mēs aprakstam HTML5 (un HTML 4.01) derīgu elementa atribūtus. Tajā aprakstīti TABLE atribūti, kas ir derīgi HTML 4.01 versijā, bet HTML5 formātā tie ir novecojuši. Ja jūs joprojām uzrakstiet HTML 4.01 dokumentus, varat izmantot šos atribūtus, taču lielākajai daļai no tām ir alternatīvas, kas padarīs jūsu lapas daudzveidīgākas nākotnē, kad pārejat uz HTML5.
Derīgs HTML 4.01 atribūti
Atribūts, ko mēs aprakstījām iepriekš.
HTML5 vienīgā atšķirība no HTML5 ir tā, ka jūs varat norādīt visu veselu skaitli (0, 1, 2, 15, 20, 200 utt.), Lai noteiktu robežas platumu pikseļos.
Lai izveidotu tabulu ar 5 pikseļu malu, rakstiet:
border = "5" >
Šī tabula ir 5 pikseļu robeža.
Skatiet divu tabulu ar robežām piemēru.
Atribūts nosaka telpas apjomu starp šūnu malām un šūnas saturu. Noklusējums ir divi pikseļi. Set cellpadding uz 0, ja nevēlaties atstāt vietu starp saturu un malām.
Lai iestatītu šūnu polsterējumu līdz 20, uzrakstiet:
cellpadding = "20" >
Šajā tabulā ir vairāk nekā 20 soli pa solim.
Šūnu robežas tiks atdalītas ar 20 pikseļiem.
Skatiet tabulas piemēru, izmantojot cellpadding
Atribūts nosaka atstarpes apjomu starp tabulas šūnām un šūnu saturu. Tāpat kā cellpadding, noklusējuma iestatījums ir divi pikseļi, tādēļ, ja nevēlaties šūnu atstarpi, tas jāiestata uz 0.
Lai tabulai pievienotu šūnu atstarpi, rakstiet:
cellspacing = "20" >
Šajā tabulā ir cellpacing 20.
Šūnas tiks atdalītas ar 20 pikseļiem.
Skatiet tabulu, kurā ir cilpas
Atribūts nosaka, kuras porcijas no malas, kas atrodas ārpus tabulas, būs redzamas. Jūs varat rāmi savu galdu uz visām četrām pusēm, no vienas puses, no augšas un apakšas, pa kreisi un pa labi vai neviens nav.
Šeit ir HTML tabulai ar tikai kreisās puses malu:
rāmis = "lhs" >
Šī tabula
būs
tikai
kreisā puse ir ierāmēta.
Un vēl viens piemērs ar apakšējo rāmi:
rāmis = "zemāk" >
Šajā tabulā ir rāmis apakšā.
Pārbaudiet dažas tabulas ar rāmjiem
Atribūts ir līdzīgs rāmja atribūts, tikai tas ietekmē robežas ap tabulas šūnām. Jūs varat iestatīt noteikumus par visām šūnām, starp kolonnām, starp grupām, piemēram, TBODY un TFOOT vai neviens nav.
Lai izveidotu tabulu ar rindām tikai starp rindām, rakstiet:
noteikumi = "rindas" >
Šajā 4x4 tabulā ir
rindas, nevis slejas
aprakstīts ar
noteikumi atribūts.
Un otrs ar līnijām starp kolonnām:
noteikumi = "kolonnas" >
Tas ir
tabula
kur
kolonnas
ir
iezīmēts
Šeit ir piemērs tabulā ar noteikumiem
Atribūts sniedz informāciju par tabulu ekrāna lasītājiem un citiem lietotāju aģentiem, kuriem, iespējams, ir grūtības lasīt tabulas. Lai izmantotu kopsavilkuma atribūtu, rakstāt īsu tabulas aprakstu un norādiet to kā atribūta vērtību. Kopsavilkums vairumā standarta tīmekļa pārlūkprogrammu netiks rādīts tīmekļa lapā.
Lūk, kā uzrakstīt vienkāršu tabulu ar kopsavilkumu:
kopsavilkums = "Šī ir izlases tabula, kurā ir informācija par pildvielu. Šīs tabulas mērķis ir parādīt kopsavilkumu." >
1. sleja 1. rinda
2. sleja, 1. rinda
1. sleja 2. rinda
2. sleja 2. rinda
Skatīt tabulu ar kopsavilkumu
Atribūts definē tabulas platumu vai nu pikseļos, vai procentos no konteinera elementa. Ja platums nav iestatīts, tabulā būs tik daudz vietas, cik nepieciešams, lai parādītu saturu, un maksimālais platums ir tāds pats kā vecāka elementa platumam.
Lai izveidotu tabulu ar noteiktu platumu pikseļos, rakstiet:
width = "300" >
Šī tabula ir 80% no konteinera platuma, kurā tā atrodas.
Un, lai izveidotu tabulu ar platumu, kas ir daļa no vecāka elementa, rakstiet:
width = "80%" >
Šī tabula ir 80% no konteinera platuma, kurā tā atrodas.
Skatiet tabulas ar platumu piemēru
Novirzīts HTML 4.01 TABLE atribūts
Pastāv viens TABLE elementa atribūts, kas ir novecojis HTML 4.01 versijā un ir novecojis HTML5: saskaņot . Šis atribūts ļauj iestatīt, kur tabulai jāatrodas lapā, salīdzinot ar tekstu, kas atrodas blakus tam. Šis atribūts ir noturēts HTML 4.01 versijā, un jums jāizvairās no tā izmantošanas. Tā vietā jums vajadzētu izmantot CSS īpašumu vai margin-left: auto; un rezerves labajā pusē: auto; stili. Pludiņa īpašums dod jums rezultātu, kas ir tuvāks tam, ko piešķirtais atribūts izlīdzina, bet tas var ietekmēt veidu, kādā tiek rādīts pārējais lapas saturs. Garantija: auto; un marža kreisajā pusē: auto; ir tas, ko W3C iesaka kā alternatīvu.
Šeit ir novecojis piemērs, izmantojot izlīdzināšanas atribūtu:
align = "right" >
Šī tabula ir izlīdzināta
Teksts ap to plūst pa kreisi
Izmantojot izcelšanas atribūtu, skatiet novecojušo piemēru.
Lai iegūtu tādu pašu efektu kā derīgs (neaizmirstams HTML), rakstiet:
style = "peldēt: labi;" >
Šī tabula ir izlīdzināta
Teksts ap to plūst pa kreisi
Turpmāk izskaidroti TABLE atribūti, kas nav nevienas HTML specifikācijas sastāvdaļa.
Iepriekšējā informācija raksturo HTML elementa atribūtus, kas ir derīgi HTML 4.01 versijā, bet HTML5 formātā tie ir novecojuši.
Turpmāk aprakstīti TABLE atribūti, kas nav derīgi nevienā no pašreizējām specifikācijām. Ja jums nav jāuztraucas, vai jūsu lapas apstiprina un lietotāji izmanto pārlūku, kas nodrošina šos elementus, varat izmantot šos elementus. Bet lielākā daļa no tām tiek neatbalstītas mūsdienu pārlūkprogrammās vai tām ir alternatīvas, kas atbilst vairāk standartiem.
Mēs neiesakām izmantot šos atribūtus jūsu HTML tabulās.
Atribūts ir vecs atribūts, kas tika iekļauts pirms CSS tika plaši atbalstīts. Tas ļauj mainīt tabulas fona krāsu. Varat iestatīt krāsu nosaukumu vai sešpadsmitdaļu kodu. Šis atribūts joprojām darbojas daudzās pārlūkprogrammās, bet HTML aizsardzībai pret nākotni, to nedrīkstat izmantot un tā vietā izmantot CSS.
Labāka alternatīva šim atribūtam ir stila īpašums.
Lai mainītu tabulas fona krāsu, rakstiet:
style = "background-color: #ccc;" >
Šajā tabulā ir pelēks fons
Līdzīgi kā bgcolor atribūts, atribūts bordercolor ļauj mainīt atribūta krāsu. Šo atribūtu atbalsta tikai pārlūkprogramma Internet Explorer. Tā vietā jums vajadzētu izmantot robežas krāsu stila īpašumu.
Lai mainītu tabulas robežas krāsu, rakstiet:
stila = "malas krāsa: sarkana;" >
Šai tabulai ir sarkana robeža.
Interneta pārlūkprogrammā tika iekļauti atribūti "Bordercolorlight" un "Bordercolordark", lai jūs varētu izveidot 3D robežu ap jūsu galdu. Tomēr, sākot no IE8 un jaunināšanas, tas tiek atbalstīts tikai IE7 standartu režīmā un Quirks režīmā . Microsoft paziņo, ka šīs īpašības vairs netiek atbalstītas.
Īsā laikā elements TABLE tika atribūta atribūts, lai palīdzētu pārlūkprogrammām zināt, cik kolonnu ir tabulā. Pieņēmums bija tāds, ka tas varētu paātrināt lielu tabulu izciršanu. Tomēr to ieviesa tikai pārlūkprogramma Internet Explorer, tāpat kā IE8 un augšup, to atbalsta tikai IE7 standartu režīmā un Quirks režīmā.
Tā kā ir platuma atribūts (novecojis HTML5), daudzi cilvēki uzskatīja, ka tabulām ir arī augstuma atribūts. Bet tāpēc, ka tabulas atbilst CSS vai platuma atribūta saturam vai definētajam platumam, augstums nevar būt ierobežots. Tā vietā pārlūkprogrammas atļāva augstumam, lai noteiktu minimālo tabulas augstumu. Ja galds bija garāks par šo augstumu, tas būtu garāks. Bet jums vajadzētu izmantot īpašumu
Izmantojot CSS augstuma īpašumu, jūs varat ierobežot augstumu, ja izmantojat arī CSS īpašumu, lai noteiktu, kas notiek ar satura pārsniegšanu.
Lai minimālo augstumu iestatītu uz tabulas, rakstiet:
style = "height: 30em;" >
Šī tabula ir vismaz 30 ems augstāka.
Divas īpašības un pievienotā telpa ap galda / kreiso pusi (labajā pusē) (hspace) un augšējā / apakšējā (vspace). Jums vajadzētu izmantot stila īpašumu.
Lai vertikālo atstarpi iestatītu līdz 20 pikseļiem un horizontālo atstarpi līdz 40 pikseļiem, rakstiet:
style = "margin: 20px 40px;"
Šai tabulai ir vspace 20 pikseļi un hspace 40 pikseļi.
Atribūts ir loģisks atribūts, kas nosaka, vai galda saturam jābūt ietvertam vecāka elementa vai loga malā vai spiežot horizontālu ritināšanu. Tā vietā jums jānosaka katras tabulas šūnas iesaiņošanas īpašības, izmantojot CSS īpašību.
Lai izveidotu kolonnu ar daudziem tekstiem, kas nav aplīdziniet, rakstiet:
style = "white-space: nowrap;" > Šī ir sleja ar tonnu saturu. Bet pat tad, ja tas ir plašāks par konteineru, teksts nedrīkst ietīties uz nākamo rindiņu, bet tā vietā piespiest pārlūka logu ritināt horizontāli, lai skatītu visu saturu.
Visbeidzot, atribūts nosaka, kā katras šūnas saturs jāizlīdzina šūnā vertikāli. Neatkarīgi no šī nederīgā atribūta, jums vajadzētu izmantot CSS īpašību katrā šūnā, kuru vēlaties mainīt. Jūs nepamanīsit šī stila ietekmi, ja vien šūnas saturs nav mazāks par pieejamo vietu, ko radījušas citas, lielākas šūnas.
Lai piespiestu šūnu pielīdzināt apakšai (nevis kā vidus kā noklusējuma), rakstīt:
Šī šūna ir garāka nekā pārējā, un tādējādi augstums būs augstāks. Tātad jūs redzēsiet, ka vertikāli izlīdzinātā šūna ir izlīdzināta ar apakšdaļu.
style = "vertical-align: bottom;" > Saturs apakšā.
Saturs ir vidū.