HTML tabulas atribūti ļauj daudz vairāk kontrolēt HTML tabulas. Tabulām ir pieejams daudz atribūtu, lai padarītu tās interesantākas un mainītu jūsu lapas izskatu.
HTML TABULAS elementa atribūti
In HTML5 elements izmanto globālos atribūtus un vēl vienu atribūtu, un tas ir mainījies, un tā vērtība ir tikai 1 vai tukša (t.i., border = ""). Ja vēlaties mainīt apmales platumu, jums jāizmanto apmales platums CSS īpašums.
Skatiet tālāk, lai uzzinātu par derīgiem HTML5 tabulas atribūtiem.
Ir arī vairāki atribūti, kas ir daļa no HTML 4.01 specifikācijas, kas HTML5 ir novecojusi.
- —Lietojiet tabulas TD un TH elementos CSS polsterējuma rekvizītu.
- - tabulā izmantojiet CSS rekvizītu robežas atstarpi.
- —Izmantojiet CSS stilus apmales krāsa: melna; un galdiņa stilā.
- —Izmantojiet CSS stilus apmales krāsa: melna; un apmales stils uz atbilstošajiem tabulas elementiem.
- —Tā vietā jums vajadzētu aprakstīt tabulas struktūru CAPTION vai visu tabulu ievietot FIGŪRĀ un aprakstīt FIGCAPTION. Alternatīvi, jūs varētu vienkāršot tabulas struktūru, lai skaidrojums nebūtu vajadzīgs.
- —Izmantojiet rekvizītu CSS width.
Un viens atribūts, kas HTML 4.01 bija novecojis un HTML5 arī novecojis.
- izlīdzināt - tā vietā izmantojiet rekvizītu CSS margin.
Ir arī vairāki atribūti, kas nav daļa no HTML specifikācijas. Izmantojiet šos atribūtus, ja zināt, ka jūsu atbalstītās pārlūkprogrammas tos var apstrādāt un jums nav nozīmes derīgam HTML.
- - Tā vietā izmantojiet CSS rekvizīta fona krāsu.
- bordercolor - tā vietā izmantojiet CSS rekvizīta apmales krāsu.
- bordercolorlight - izmantojiet CSS rekvizīta robežas krāsu.
- bordercolordark - izmantojiet CSS rekvizīta robežas krāsu.
- cols - šim atribūtam nav alternatīvas.
- augstums - tā vietā izmantojiet CSS rekvizīta augstumu.
- - Tā vietā izmantojiet CSS rekvizītu rezervi.
- - Tā vietā izmantojiet CSS rekvizīta atstarpi.
- - Tā vietā izmantojiet CSS rekvizītu vertikāli-izlīdzināt.
HTML5 TABULAS elementa atribūti
Kā mēs minējām iepriekš, HTML5 TABLE elementā ir derīgs tikai viens atribūts, kas pārsniedz globālos atribūtus: border.
Robeža atribūtu izmanto, lai noteiktu robežu ap visu tabulu un visām šūnām tajā. Bija zināms jautājums, vai tas tiks iekļauts HTML5 specifikācijā, taču tas palika, jo sniedza informāciju par tabulas struktūru, ne tikai ar stila norādēm.
Lai pievienotu robežas atribūtu, iestatiet vērtību 1, ja ir apmale, un tukšu (vai atstājiet atribūtu), ja tādas nav. Lielākā daļa pārlūkprogrammu arī atbalstīs 0 bez apmales un jebkuru citu veselu skaitli (2, 3, 30, 500 utt.), Lai robežas platumu deklarētu pikseļos, taču HTML5 tas ir novecojis. Tā vietā jums vajadzētu izmantot CSS apmales stila rekvizītus, lai definētu apmales platumu un citus stilus.
Lai izveidotu tabulu ar apmali, rakstiet:
apmale = "1">
Šī ir tabula ar apmali
Tas apraksta TABLE atribūtus, kas ir derīgi HTML 4.01, bet ir novecojuši HTML5. Ja jūs joprojām rakstāt HTML 4.01 dokumentus, varat izmantot šos atribūtus, taču lielākajai daļai no tiem ir alternatīvas, kas padarīs jūsu lapas drošākas nākotnē, pārejot uz HTML5.
Derīgi HTML 4.01 atribūti
Atribūts, kuru mēs aprakstījām iepriekš. Vienīgā HTML 4.01 atšķirība no HTML5 ir tā, ka varat norādīt jebkuru veselu skaitli (0, 1, 2, 15, 20, 200 utt.), Lai definētu apmales platumu pikseļos.
Lai izveidotu tabulu ar 5 pikseļu apmali, rakstiet:
apmale = "5">
Šai tabulai ir 5 pikseļu apmale.
Atribūts nosaka vietas daudzumu starp šūnas robežām un šūnas saturu. Noklusējums ir divi pikseļi. Ja vēlaties, lai starp saturu un apmalēm nebūtu atstarpes, iestatiet šūnapvalku uz 0.
Lai iestatītu šūnu pildījumu uz 20, rakstiet:
cellpadding = "20">
Šajā tabulā ir 20 šūnu bloki.
Šūnu robežas tiks atdalītas ar 20 pikseļiem.
Apskatiet tabulas ar mobilo paliktni piemēru.
Atribūts nosaka vietas daudzumu starp tabulas šūnām un šūnu saturu. Tāpat kā cellpadding, noklusējums ir iestatīts uz diviem pikseļiem, tādēļ, ja nevēlaties atstarpes šūnās, jums tas jāiestata uz 0.
Lai tabulai pievienotu šūnu atstarpi, rakstiet:
cellspacing = "20">
Šīs tabulas šūnu atstarpe ir 20.
Šūnas tiks atdalītas ar 20 pikseļiem.
Atribūts norāda, kuras apmales daļas, kas ieskauj tabulas ārpusi, būs redzamas. Jūs varat rāmēt savu galdu no visām četrām pusēm, jebkurā pusē, augšā un apakšā, pa kreisi un pa labi, vai nevienā.
Šeit ir HTML tabulai ar tikai kreisās malas robežu:
frame = "lhs">
Šī tabula
būs
tikai
kreisā puse ierāmēta.
Un vēl viens piemērs ar apakšējo rāmi:
frame = "zemāk">
Šīs tabulas apakšdaļā ir rāmis.
Pārbaudiet dažas tabulas ar rāmjiem.
Atribūts ir līdzīgs rāmja atribūtam, tikai tas ietekmē robežas ap tabulas šūnām. Jūs varat iestatīt kārtulas visām šūnām, starp kolonnām, starp grupām, piemēram, TBODY un TFOOT vai nevienai.
Lai izveidotu tabulu ar rindām tikai starp rindām, rakstiet:
noteikumi = "rindas">
Šim 4x4 galdam ir
rindas, nevis kolonnas
izklāstīts kopā ar
noteikumi atribūts.
Un vēl viens ar līnijām starp kolonnām:
noteikumi = "kolas">
Tas ir
galds
kur
kolonnas
ir
izcelts
The atribūts sniedz informāciju par tabulu ekrāna lasītājiem un citiem lietotāju aģentiem, kuriem varētu būt grūtības tabulu lasīšanā. Lai izmantotu atribūtu Summary, jūs uzrakstāt īsu tabulas aprakstu un ievietojat to kā atribūta vērtību. Kopsavilkums netiks rādīts tīmekļa lapā lielākajā daļā standarta tīmekļa pārlūkprogrammu.
Lūk, kā uzrakstīt vienkāršu tabulu ar kopsavilkumu:
summary = "Šī ir tabulas paraugs, kurā ir informācija par aizpildītāju. Šīs tabulas mērķis ir parādīt kopsavilkumu.
1. kolonnas 1. rinda.
2. slejas 1. rinda.
1. kolonnas 2. rinda.
2. slejas 2. rinda.
Atribūts nosaka tabulas platumu pikseļos vai kā konteinera elementa procentuālo daļu. Ja platums nav iestatīts, tabula aizņems tikai tik daudz vietas, cik nepieciešams, lai parādītu saturu, un maksimālais platums ir tāds pats kā vecāka elementa platums.
Lai izveidotu tabulu ar noteiktu platumu pikseļos, rakstiet:
width = "300">
Šī tabula ir 80% no konteinera platuma, kurā tas atrodas.
Lai izveidotu tabulu, kuras platums ir vecāka elementa procentuālais daudzums, rakstiet:
width = "80%">
Šī tabula ir 80% no konteinera platuma, kurā tas atrodas.
Novecojis HTML 4.01 TABULAS atribūts
Elementam TABLE ir viens atribūts, kas HTML 4.01 ir novecojis un HTML5 novecojis: align. Šis atribūts ļauj iestatīt tabulas izvietojumu lapā attiecībā pret tekstu, kas atrodas blakus tai. Šis atribūts HTML 4.01 ir novecojis, un jums vajadzētu izvairīties no tā izmantošanas. Tā vietā jums vajadzētu izmantot CSS rekvizītu vai atstarpi pa kreisi: auto; un margin-right: auto; stili. Peldošā rekvizīts dod jums rezultātu, kas ir tuvāk tam, kāds bija atribūta līdzinājums, taču tas var ietekmēt pārējā lapas satura parādīšanas veidu. Labā mala: automātiska; un kreisajā malā: auto; ir tas, ko W3C iesaka kā alternatīvu.
Šeit ir novecojis piemērs, izmantojot atribūtu align:
align = "right">
Šī tabula ir izlīdzināta pa labi.
Ap to pa kreisi tek teksts.
Lai iegūtu tādu pašu efektu ar derīgu (neatstātu) HTML, rakstiet:
style = "float: right;">
Šī tabula ir izlīdzināta pa labi.
Ap to pa kreisi tek teksts.
Novecojuši TABLE atribūti
Iepriekšējā informācija apraksta HTML elementa atribūtus, kas ir derīgi HTML 4.01, bet HTML5 ir novecojuši.
Tālāk aprakstīti TABLE atribūti, kas nav derīgi nevienā pašreizējā specifikācijā. Ja jums nav svarīgi, vai jūsu lapas tiek validētas un vai lietotāji izmanto pārlūkprogrammu, kas atbalsta šos elementus, varat izmantot šos elementus. Bet lielākā daļa no tiem vai nu netiek atbalstīti mūsdienu pārlūkprogrammās, vai arī tiem ir alternatīvas, kas vairāk atbilst standartiem.
Mēs neiesakām izmantot šos atribūtus HTML tabulās.
Šis atribūts ir vecs atribūts, kas tika iekļauts pirms CSS plaša atbalsta. Tas ļauj mainīt tabulas fona krāsu. Varat iestatīt krāsas nosaukumu vai heksadecimālo kodu. Šis atribūts joprojām darbojas daudzās pārlūkprogrammās, taču HTML nākotnes drošībai to nevajadzētu 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;">
Šai tabulai ir pelēks fons.
Līdzīgi kā atribūts bgcolor, arī bordercolor atribūts ļauj mainīt atribūta krāsu. Šo atribūtu atbalsta tikai programma Internet Explorer. Tā vietā jums jāizmanto robežas krāsas stila īpašums.
Lai mainītu tabulas apmales krāsu, rakstiet:
style = "border-color: red;">
Šai tabulai ir sarkana apmale.
Atribūti bordercolorlight un bordercolordark tika iekļauti programmā Internet Explorer, lai ļautu jums izveidot 3D apmali ap savu galdu. Tomēr, sākot no IE8 un jaunākām versijām, tas tiek atbalstīts tikai IE7 Standarta režīmā un Quirks režīms. Microsoft norāda, ka šie īpašumi vairs netiek atbalstīti.
Īsu laiku tika piedāvāts atribūts cols elementam TABLE, lai pārlūkprogrammas palīdzētu uzzināt, cik kolonnu ir tabulā. Pieņēmums bija tāds, ka tas palīdzēs paātrināt lielu galdu renderēšanu. Tomēr to ieviesa tikai Internet Explorer, un sākot no IE8 un jaunākām versijām, tas tiek atbalstīts tikai IE7 standartu režīmā un Quirks režīmā.
Tā kā pastāv platuma atribūts (HTML5 novecojis), daudzi cilvēki pieņēma, ka arī tabulām ir augstuma atribūts. Tā kā tabulas atbilst to satura platumam vai CSS vai width atribūtā noteiktajam platumam, augstumu nevarēja ierobežot. Tā vietā pārlūkprogrammas atļāva augstuma atribūtam noteikt minimālo tabulas augstumu. Ja galds būtu augstāks par šo augstumu, tas parādītos garāks. Bet jums vajadzētu izmantot īpašumu.
Izmantojot CSS augstuma rekvizītu, jūs varat ierobežot augstumu, ja izmantojat arī CSS rekvizītu, lai noteiktu, kas notiek ar jebkādu lieko saturu.
Lai iestatītu minimālo augstumu uz galda, rakstiet:
style = "height: 30em;">
Šī tabula ir vismaz 30 ems augsta.
Abi atribūti un pievienotā vieta ap tabulas kreiso / labo pusi (hspace) un augšējo / apakšējo (vspace). Tā vietā jums vajadzētu izmantot stila rekvizītu.
Lai vertikālo atstarpi iestatītu uz 20 pikseļiem un horizontālo atstarpi - uz 40 pikseļiem, rakstiet:
style = "margin: 20px 40px;"
Šajā tabulā ir 20 pikseļu un 40 pikseļu laukums.
Šis atribūts ir būla atribūts, kas nosaka, vai tabulas saturam jāapietas vecāka elementa vai loga malā, vai jāpiespiež horizontāli ritināt. Tā vietā jums vajadzētu definēt katras tabulas šūnas ietīšanas īpašības, izmantojot CSS rekvizītu.
Lai kolonna ar daudz teksta netiktu iesaiņota, rakstiet:
style = "white-space: nowrap;"> Šī ir kolonna ar daudz satura. Bet pat tad, ja tas ir platāks par konteineru, tekstam nevajadzētu ietīties uz nākamo rindu, bet tā vietā piespiest pārlūka logu ritināt horizontāli, lai redzētu visu saturu.
Visbeidzot, atribūts nosaka, kā katras šūnas saturam vajadzētu vertikāli izlīdzināties šūnā. Šī nederīgā atribūta vietā jums jāizmanto CSS rekvizīts katrā šūnā, kurai vēlaties mainīt izlīdzināšanu. Jūs nepamanīsit šī stila ietekmi, ja vien šūnas saturs nav mazāks par pieejamo vietu, ko izveidojušas citas, lielākas šūnas.
Lai piespiestu šūnu pielāgoties apakšai (nevis kā vidējo, kā noklusējumu), rakstiet:
Šī šūna ir garāka par pārējo, tāpēc augstumam būs jābūt garākam. Tātad jūs redzēsiet, ka vertikāli izlīdzinātā šūna ir izlīdzināta līdz apakšai.
style = "vertical-align: bottom;"> Saturs apakšā.
Saturs pa vidu.