Tabula ir šūnu režģis, kas veido rindas un kolonnas. Tabulu piemēri ir dažādi finanšu pārskati, sporta rezultāti, kalendāri, grafiki utt. Atsevišķu režģa bloku sauc par tabulas šūnu. Tabulas šūnās var būt visdažādākā informācija, tostarp skaitļi, teksts un pat video un audio objekti. Izmantojot HTML valodu, tabulas tiek rakstītas pa rindām.
Elements
kalpo kā konteiners elementiem, kas nosaka tabulas saturu. Lai izveidotu tabulas rindu, jums jāpievieno elementa iekšpusē
pāra bloka tags
(saīsināts no angļu valodas. "taye row" - tabulas rinda). Cik tagu
jūs pievienojat, tik daudz rindu tabulā, un būs. Atvēršanas birka
apzīmē jaunas rindas sākumu tabulā. Elementi tiek novietoti aiz tā |
(saīsināti no angļu valodas "taye data" - tabulas dati), no kuriem katrs šajā rindā norāda atsevišķu šūnu. Iekšējais elements |
ievietojat šajā šūnā savu saturu (tekstu, ciparus, attēlus utt.). Rindas beigas norāda beigu tags |
.
Elements
(saīsināts no angļu valodas "taYe head" - tabulas virsraksts) - izvēles galda elements, kas tiek izmantots tāpat kā elements |
tomēr tās mērķis ir izveidot galveni rindai vai kolonnai. Parasti elements |
novietots tabulas pirmajā rindā. Pārlūkprogrammas parāda tekstu elementā |
treknrakstā un centrējiet to attiecībā pret šūnu. Elementa izmantošana kodā |
palīdz cilvēkiem, kuri izmanto ekrāna lasītājus, kā arī uzlabo meklētājprogrammu rādītāju tabulu veiktspēju.
Apsveriet vienkāršu tabulu, kurā ir trīs rindas un trīs kolonnas, un pirmās rindas šūnas ir atbilstošo kolonnu virsraksti. Pēc noklusējuma tabulas parasti tiek rādītas bez apmales.
Piemērs: vienkārša HTML tabula
| 1. pozīcija | 2. pozīcija | 3. pozīcija |
|---|
| Šūna 2x1 | Šūna 2x2 | Šūna 2x3 |
| Šūna 3x1 | Šūna 3x2 | Šūna 3x3 |
Galda apmale
Mēs jau zinām, ka pēc noklusējuma tabulas tiek rādītas bez apmales. Lai ap tabulu pievienotu apmali, dokumentā jānorāda daži vienkārši stila lapas noteikumi. Īpašums robeža kontrolē tabulas režģa līniju attēlojumu, kā arī nosaka apmales platumu ap tabulu pikseļos. Ap galdu un starp šūnām parādās apmale. Pievienojot vienu pikseļu platu rāmi jau izveidotajai tabulai, iestatot rekvizītu robeža visiem tabulas elementiem, piemēram, šādi:
Piemērs: īpašuma piemērošana robeža
Rāmis ap galdu
| 1. pozīcija | 2. pozīcija | 3. pozīcija |
|---|
| Šūna 2x1 | Šūna 2x2 | Šūna 2x3 |
| Šūna 3x1 | Šūna 3x2 | Šūna 3x3 |
Viena galda rāmis
Pēc noklusējuma blakus esošajām tabulas šūnām būs sava robeža. Tā rezultātā rodas sava veida "dubultā robeža", kā redzams iepriekš minētajā piemērā. Lai atbrīvotos no dubultās robežas, pievienojiet CSS īpašumu robeža-sabrukums uz savu stilu lapu:
Piemērs: īpašuma piemērošana robeža-sabrukums
Rāmis ap galdu
| 1. pozīcija | 2. pozīcija | 3. pozīcija |
|---|
| Šūna 2x1 | Šūna 2x2 | Šūna 2x3 |
| Šūna 3x1 | Šūna 3x2 | Šūna 3x3 |
Galda lauki un atstarpes
Pēc noklusējuma tabulas šūnas ir izmērītas tā, lai tās atbilstu to saturam, taču dažreiz ir jāpaliek ap tabulas datiem. Tā kā atstarpes un piemales ir saistītas ar datu prezentācijas elementiem, šo vietu var pielāgot, izmantojot CSS stila lapas. Šūnas lauks ( polsterējums) Vai ir attālums starp šūnas saturu un tās robežu. Lai to pievienotu, izmantojiet īpašumu polsterējums līdz elementam |
vai |
... Šūnu atstarpe ( robežu atstarpes) Vai attālums starp tiem ir ( |
vai |
). Vispirms piešķiriet vērtību atdalītīpašums robeža-sabrukums elements
un pēc tam iestatiet atstarpi starp šūnām, mainot parametra vērtību robežu atstarpes... Iepriekš atribūti bija atbildīgi par laukiem un šūnu atstarpi. šūnu polsterējums un šūnu atstarpe elements
bet tie bija novecojuši HTML5 specifikācijā.
Lietošanas piemērs polsterējums un robežu atstarpes:
Piemērs: Rekvizītu lietošana polsterējums un robežu atstarpes
polsterējums un attālums starp malām
| Šūna 1 | Šūna 2 |
| Šūna 3 | Šūna 4 |
Tabulas platums
Platumu, ko aizņem tabula pārlūkprogrammas logā, var norādīt, izmantojot īpašumu platums CSS pikseļos vai procentos. Tabulas platuma norādīšana pikseļos ļauj noteikt precīzu tās platumu. Procenti ļauj tabulu padarīt elastīgu, t.i. tas "izstiepsies" vai "saruks" atkarībā no tā, kādi citi elementi atrodas lapā un cik liels ir pārlūkprogrammas logs.
Šeit ir piemērs, izmantojot īpašumu platums: Tabula (platums: 100%;) Piemērs: īpašuma piemērošana platums
| Šūna 1 | Šūna 2 |
| Šūna 3 | Šūna 4 |
platums: 100%
| Šūna 1 | Šūna 2 |
| Šūna 3 | Šūna 4 |
Apvienojošās šūnas (kolpons un rindas platums)
Viena no galvenajām tabulas struktūras iezīmēm ir šūnu savienošana, kas ietver šūnas izstiepšanu, lai aptvertu vairākas rindas vai kolonnas. Tas ļauj izveidot sarežģītas tabulas struktūras: galvenes
vai šūnas |
tiek apvienoti, pievienojot atribūtus colspan vai rindas platums... Atribūts colspan nosaka šūnu skaitu, ko konkrētā šūna sniedz horizontāli, un rindas platums- vertikāli.
Salieciet kolonnas
Kolonnu savienošana tiek panākta, izmantojot atribūtu colspan elementos |
vai |
- šūna ir izstiepta pa labi, lai segtu nākamās kolonnas. Nākamajā piemērā atribūta vērtība colspan ir vienāds ar 2, kas nozīmē, ka šūnai ir jāaptver divas kolonnas.
Piemērs: atribūta lietošana colspan
Colspan atribūts
| colspan= "2"> Šūna ar divām kolonnām |
|---|
| Šūna 1 | Šūna 2 |
| Šūna 3 | Šūna 4 |
Saliekamās stīgas
Virknes ir savienotas, izmantojot atribūtu rindas platums, uzvedas tieši tāpat kā sapludinātās kolonnas ar vienīgo atšķirību, ka šūnu diapazons ir no augšas uz leju un aptver vairākas rindas.
Šis piemērs izstiepj tabulas pirmo šūnu divas rindas uz leju:
Piemērs: atribūta lietošana rindas platums
| Šūna uz divām līnijām |
Šūna 1 | Šūna 2 |
|---|
| Šūna 3 | Šūna 4 |
Rowspan atribūts
| rindas platums= "2"> Šūna divās rindās |
Šūna 1 | Šūna 2 |
|---|
| Šūna 3 | Šūna 4 |
Tabulas galvene
Pāra tagu izmanto, lai izveidotu tabulas virsrakstu vai parakstu
(no angļu paraksta - paraksts). Elements
ir paredzēts tabulas galvenes organizēšanai. Atrodas tūlīt pēc birkas
bet ārpus rindas vai šūnas apraksta.
Piemērs: Taga izmantošana
Paraksta elements
Šī ir tabulas galvene
| Šūna uz divām līnijām |
Šūna 1 | Šūna 2 |
|---|
| Šūna 3 | Šūna 4 |
Tabulas vienumu tagu grupēšana
Lai grupētu tabulas elementus, izmantojiet tagus
,
un
... Tāpat kā tīmekļa lapā var būt galvene, pamatteksts un kājene, tabulā var būt galva, pamatteksts un kājene. Lai loģiski grupētu rindas tabulas augšdaļā (tas ir, lai izveidotu tabulas augšējo galvu), izmantojiet tagu
... Galda galvenes jāievieto elementā
, piemēram:
| 1. pozīcija | 2. pozīcija< /th> |
|---|
Tabulas galvenajam saturam (pamattekstam) jābūt elementa iekšpusē
(tabulā var būt vairāki šādi bloki). Lai loģiski sagrupētu rindas tabulas apakšā (tas ir, lai izveidotu tabulas kājeni), izmantojiet tagu
(vienā tabulā ir atļauts ne vairāk kā viens tags
). Avota kodā - tags
novietots pirms birkas
... Papildus loģiskai grupēšanai viens no elementu izmantošanas iemesliem
un
ja jūsu tabula ir pārāk gara, lai to uzreiz parādītu ekrānā (vai drukātu), pārlūkprogramma parādīs virsrakstu (
) un pēdējā rinda (
), kad lietotājs ritina jūsu tabulu.
Piemērs: atzīmes
,
un
Thead, tbody un tfoot tags
| Šī ir tabulas galvene |
|---|
| Šī ir tabulas kājene |
| Šūna 1 | Šūna 2 | Šūna 3 | Šūna 4 |
Neskatoties uz to, ka esam priekšā
piebilda
tomēr tas parādās tabulas beigās. Tas izriet no tā, ka
var saturēt daudzas rindas. Bet pārlūkprogrammai ir jāatspoguļo tabulas apakšdaļa, pirms tiek iegūtas visas (potenciāli daudzas) datu rindas. Tāpēc
kodā ir rakstīts pirms elementa
.
Uzdevumi
Tabulas ir viens no vissvarīgākajiem, taču sarežģītākajiem elementiem, kuriem jābūt tīmekļa lapās. Ar viņu palīdzību ir ērti pasniegt svarīgu un noderīgu informāciju diezgan kodolīgā formā. Protams, lielākā daļa redaktoru veidnēs, kas strādā pie dažādiem dzinējiem, ļauj automātiski ievietot tabulu vietnes vai atsevišķas publikācijas lapā, bet ko darīt, ja tīmekļa resursa dizains un tā lapas tiek veidotas no nulles? Tad iesācējs vednis var saskarties ar problēmu: kā to izdarīt.Izdomāsim, kā pareizi un ātri izveidot šo elementu. Redaktora izvēlePirmkārt, sākot veidot tabulu, jums jāizlemj par redaktoru, kurā strādāsit. Protams, vienkāršākais veids ir izvēlēties programmu, kurā veidojat galveno vietnes kodu. Bet vislabāk šiem nolūkiem izmantot veco labo piezīmju grāmatiņu. Jūs varat jautāt, kāpēc sarežģīt savu dzīvi, jo, ja redaktorā darāt visu uzreiz, tad arī rezultātu var redzēt uzreiz, turklāt varat izmantot arī programmas ieteikumus. Jā, tā ir taisnība, taču, izveidojot tabulu no nulles, jūs varēsiet ne tikai rūpīgi izpētīt pašu tā izveides principu, bet arī novērst kaitinošas drukas kļūdas un kļūdas galvenajā kodā. Dažreiz gadās, ka kursors nejauši pārvietojas uz leju, un rakstīšanas procesā kodā ielīst kļūda, ko dažreiz ir grūti atrast. Kad esat izveidojis tabulu piezīmju grāmatiņā, varat nokopēt tā šifru un ielīmēt to, kur vēlaties. Tabulas izveides algoritmsVispirms apkoposim īsu algoritmu, kā izveidot tabulu HTML formātā. Tas nepieciešams, lai jūs saprastu katra soļa secību. Tad mēs precīzi analizēsim, kā izpildīt katru no punktiem. 
Sāksim ar sagatavošanās darbībām. 1. Uz papīra uzzīmējiet shematisku tabulas attēlu. 2. Mēs saskaitām līniju un šūnu skaitu. Ja pēdējo skaits ir atšķirīgs, mēs skaitām katru rindu atsevišķi. 3. Nosakiet galvenes šūnu skaitu rindā (piemēram, šūnas "Nr.", "Nosaukums" utt.). 4. Pierakstiet tabulas galvenos parametrus - krāsu, augstumu un platumu, teksta izlīdzināšanu - kopumā visu, kas, jūsuprāt, ir nepieciešams. 1. Ievietojiet tabulas tagus. 2. Ievietojiet rindas atzīmes, pamatojoties uz vajadzīgo numuru. 3. Līnijās ievietojiet šūnu birkas (parastās un lielās), arī pamatojoties uz skaitli, ko esat uzrakstījis uz papīra. 4. Iestatiet tabulas parametrus kopumā. 5. Ja nepieciešams, iestatiet indikatorus atsevišķām šūnām. 6. Mēs aizpildām savas šūnas ar tekstu. 
Izveidojiet tabuluTātad jūs esat izvēlējies redaktoru, tagad izdomāsim, kā izveidot tabulu HTML formātā. Tags, ar kuru tabula ir ievietota lapas kodā ( ), ir savienots pārī, tas ir, mūsu konstrukcija sākas ar šo tagu un beidzas ar .Pēc tabulas tagu ievietošanas mēs turpinām veidot rindas un šūnas. Tūlīt mēs atzīmējam, ka arī šie elementi ir savienoti pārī. Tag norāda virknes un | - šūnas. Galvenes šūnām izmantojiet pārī savienoto elementu | . Kā jau minēts, pirmais solis ir līniju sastādīšana, pēc tam tajās ierakstiet šūnas. Lai nemulsinātu, mēs iesakām vai nu atkāpties starp katru bloku vienā vai divās rindās, vai arī uzrakstīt jaunu elementu bloku, izmantojot taustiņu "Tab". Kā tas varētu izskatīties? Šādi: ;;| P / p Nr. | ;| Uzvārds | ; ;;| 1 | ;| Ivanovs | ; | ; .
Kā redzat, tajā nav nekā sarežģīta. Galvenais ir neapjukt līniju un šūnu skaitā. Pretējā gadījumā galds var sašķiebties. Mēs esam apsprieduši tabulas izveidi HTML formātā, tagad mēs varam turpināt gan pašas matricas, gan tās rindu un šūnu parametrus. 
Tabulas parametriKad kods ir rakstīts, jums jāpievērš uzmanība šādiem punktiem: izlīdzināšana malās, fons, teksts utt. Tabulas parametri ir iestatīti tagā ... Tie ietver:1. Robeža - robežu platums. Iestatīt kā veselu skaitli. Pēc noklusējuma jebkuras tabulas robežas ir nulles. 2. Bordercolor - apmales krāsa. To var iestatīt kā heksadecimālu krāsu kodu (# 00008B) un tā nosaukumu angļu valodā (DarkBlue). Pēc noklusējuma tas vienmēr ir pelēks. 3. Bgcolor - arī iestatīts pēc koda vai nosaukuma. 4. Līdzināt - teksta līdzināšana aiz galda. Noklusējums ir līdzināts pa kreisi. Šim parametram ir šādas iespējas: - pa kreisi - aptiniet pa labi;
- pa labi -ietīšana pa kreisi;
- centrs - parāda tabulu centrā bez ietīšanas.
5. Platums un augstums - galda platums un augstums. To var iestatīt gan pikseļos, gan procentos (attiecībā pret pārlūkprogrammas loga lielumu). Izrakstot šo vai citu indikatoru, jums jāpievērš īpaša uzmanība dizainam. Parametram jāseko zīmei "vienāds", pēc tam - pēdiņās norādītajai vērtībai. Kas attiecas uz teksta krāsu, tas ir veidots tāpat kā parasts teksts HTML formātā. Galda dizaina piemērs: ;;| P / p Nr. | ;| Uzvārds | ; ;;| 1 | ;| Ivanovs | ; | ; .
Stīgu parametriTātad, mēs jau esam sapratuši, kā izveidot tabulu HTML formātā un reģistrēt tās galvenos parametrus. Bet ko darīt, ja mums jāizceļ rinda? Vai tas būtu jāveido atšķirīgi no tabulas galvenā teksta? Virknes parametri ir ierakstīti tagā tieši tāds pats kā tabulas dati. Virknei var iestatīt šādus mainīgos:1. Jums jau zināmā robeža, bordercolor un bgcolor. 2. Līdzināt - teksta izlīdzināšana rindā. Tas var paņemt vērtības pa kreisi, centrā un pa labi. 3. Valign - šis tags izlīdzina tekstu vertikāli. Tam nepieciešamas šādas vērtības: - augšā - teksts ir izlīdzināts augšējā malā;
- vidū - centrā;
- apakšā - gar apakšējo robežu.
Līnijas formatēšanas piemērs: Šūnas parametriUn pēdējā lieta, kam vērts pievērst uzmanību tiem, kuri vēlas zināt, kā izveidot tabulu HTML formātā, ir atsevišķu šūnu parametri, gan regulāri, gan ar lielo burtu. Patiesībā viss tiek darīts tāpat kā galdam vai rindai. Vienīgais ir tas, ka tiek pievienoti vēl divi svarīgi elementi: 1. Colspan - šis parametrs nosaka kolonnu skaitu, ko šūna var aptvert. 2. Rowspan - jau norāda rindu skaitu, ko šī šūna aizņem. Tā kā dizains neatšķiras no rindas rakstīšanas, mēs nesniegsim koda piemēru. 
secinājumusGalda izgatavošana nav tik grūta, kā varētu šķist no pirmā acu uzmetiena. Galvenais, rakstot viņas kodu, ir neatlaidība un uzmanība. Kas attiecas uz tabulas ievietošanu HTML, jums vienkārši jāpārkopē un jāielīmē tā šifrs tieši jūsu lapas vietā, kur, jūsuprāt, tai jāatrodas. Jūtieties brīvi eksperimentēt, un jūs drīz apgūsit tabulu izveides tehniku līdz pilnībai. Veiksmi!
HTML tabulas ir tik funkcionālas, ka varat tās izmantot visu vietņu salikšanai (lasīt). Tagad mēs runāsim par vienkāršu HTML tabulu ievietošanu tīmekļa lapā, parsējot tikai marķējumu, bet nepieskaroties dizainam, jo labāk ir dekorēt tabulas ar CSS stiliem.
Tabulas tagi un atribūti
Šeit ir galvenie elementi, kas nepieciešami tabulu izveidei:
- konteiners, kurā atrodas galds (tāds pats kā par marķētu vai
numurētiem sarakstiem).
- robeža- atribūts, kas nosaka rāmju biezumu. Tā vietā labāk ir izmantot CSS robežas īpašumu.
-
norāda tabulas parakstu. Jums nav jāizmanto konteiners, bet, ja tomēr nolemjat tabulai piešķirt nosaukumu, tad ievietojiet to uzreiz aiz birkas
, ārpus šūnām un līnijām.
- pāra tags, kurā ir tabulas rinda (šūnas atrodas vienā līmenī horizontāli).
|
- tags, kas izveido tabulas galvenes šūnu. Ārēji tā saturs atšķiras no satura citās šūnās - parasti teksts iekšpusē |
pārlūkprogramma ir treknrakstā un centrēta.
- konteiners, ar kuru tiek izveidota vienkārša šūna. Cik šādu tagu būs virknē (tags
, tajā būs tik daudz šūnu: viens tags - viena šūna.
-
ļauj grupēt kolonnas ātri un bez pārblīvēšanas kodā, lai definētu to kopīgās īpašības. Izmantojot konteineru, jūs varat atdalīt loģiskās tabulas daļas viena no otras. Atrodas aiz birkas
, ja nē, tad pēc tam
.
-
izmanto tam pašam mērķim kā
.
var saturēt
bet ne otrādi.
- laidums- atribūts, kas norāda kolonnu skaitu, kurām tiek lietoti konteinera rekvizīti
.
-
,
un
- konteineri, kas ļauj sadalīt galdu attiecīgi augšējā (galvenes), galvenā (ķermeņa) un apakšējā (pēdējā) daļā. HTML tabulā šo tagu secība ir tāda pati kā konteineru secība
,
un HTML dokumentā.
- colspan nepieciešams, lai šūnas apvienotu pēc kārtas. Atribūta vērtībā ir skaitlis, kas norāda apvienojamo šūnu skaitu.
- rindas platums apvieno šūnas kolonnās.
Tabulas izveides piemērs
Izveidojiet HTML dokumentu un nokopējiet tajā šādu kodu:
Tabulas piemērs
Vietņu veidošanas rīki
| Pieraksts | Rīks |
| Atzīmes | Html | XHTML |
| Reģistrācija | CSS |
| Attīstība | PHP | Python |
Pārlūkprogrammā dokuments izskatīsies šādi: Analizēsim, kuras koda rindas ir atbildīgas par ko.
- atvēra galdu, nosakot rāmju biezumu.
-
Vietņu veidošanas rīki
- nosauca to.
- atvēra rindu.
|
Pieraksts |
- izveidoja šūnu ar virsraksta dizainu.|
Rīks |
- rindā izveidoja otro galvenes šūnu. Parametrs colspan norādīja, ka šai šūnai vajadzētu aizņemt divus horizontāli.
- slēdza rindu. Pārējās līnijas tika izveidotas tādā pašā veidā. |
Atzīmes |
Html |
XHTML |
- pievienoja tabulas otro rindu ar parastajām, nevis galvenes šūnām. Turpmākās rindas un šūnas tika ievietotas līdzīgi.
- aizvēra galdu.
ir galda pamatteksts. Pamatteksts sastāv no rindām un kolonnām. Tabula ir aizpildīta pa rindām.
Katra atzīme izveido jaunu līniju. Tālāk ligzdots tiek izveidotas kolonnas. Var izveidot vairākas kolonnas. Šajā gadījumā jums ir jāseko kolonnu skaitam katrā rindā. Piemēram, ja pirmajā rindā bija 5 kolonnas, tad nākamajās rindās vajadzētu būt arī 5 kolonnām. Pretējā gadījumā galds peldēs. Ir iespējams apvienot šūnas.
Kā izveidot tabulu html
Sniegsim piemēru, html kodu:
| Tabulas piemērs |
| 1. sleja |
2. sleja |
Pievērsiet uzmanību šūnai | ... Mēs izmantojam īpašo kolpan atribūtu, lai šūnas apvienotu horizontāli. Tās skaitliskā vērtība norāda kolonnu skaitu, kas jāapvieno. Ir arī šī atribūta analogs: tags | (tabulas galvene), kur arī jāraksta colspan. Rezultāts būs tāds pats. Bet bieži izmanto parasto td.
Tagad sīkāk apskatīsim visus taga atribūtus.
.
Tagu atribūti un rekvizīti
Uz sākuma tagu jūs varat rakstīt dažādus atribūtus.
1. Property align = "parameter" - iestata tabulas izlīdzināšanu. Tam var būt šādas vērtības:
Iepriekš minētajā piemērā mēs izlīdzinājām tabulu centrā align = "center".
Šo atribūtu var attiecināt ne tikai uz tabulu, bet arī uz atsevišķām tabulas šūnām. vai stīgas | ... Tādējādi izlīdzināšana dažādās šūnās būs atšķirīga.
Piemēram
| ... |
| ... |
...
2. Īpašuma fons = "URL" - iestata fona attēlu. URL vietā ir jāraksta fona attēla adrese.
Piemērs
| Tabulas piemērs |
| 1. sleja |
2. sleja |
Lapā pārveidots par šādu:
Iepriekš minētajā piemērā mūsu fona attēls atrodas mapē img (kas atrodas tajā pašā direktorijā kā html lapa), un attēlu sauc par fon.gif. Ņemiet vērā, ka tagā esam pievienojuši style = "color: white;" ... Tā kā fons ir gandrīz melns, lai teksts nesaplūst ar fonu, mēs padarījām tekstu baltu.
3. Rekvizīts bgcolor = "krāsa" - nosaka tabulas fona krāsu. Kā krāsu jūs varat izvēlēties jebkuru no visas paletes (skatiet html krāsu kodus un nosaukumus)
4. Īpašuma robeža = "numurs" - nosaka tabulas apmales biezumu. Iepriekšējos piemēros mēs norādījām robežu = "1", kas nozīmē, ka apmales platums ir 1 pikselis.
5. Property bordercolor = "krāsa" - iestata apmales krāsu. Ja robeža = "0", tad nebūs robežu un apmales krāsai nebūs jēgas.
6. Rekvizīts cellpadding = "number" - ievilkums no rāmja uz šūnas saturu pikseļos.
7. Property cellpacing = "number" - attālums starp šūnām pikseļos.
8. Īpašuma kolonnas = "numurs" - kolonnu skaits. Ja to nenorādīsit, pārlūks pats noteiks kolonnu skaitu. Vienīgā atšķirība ir tāda, ka šī parametra norādīšana, visticamāk, paātrinās tabulas ielādi.
9. Īpašuma rāmis = "parametrs" - kā attēlot apmales ap tabulu. Tam var būt šādas vērtības:
- tukšums - nevelciet robežas
- robeža - robeža ap galdu
- virs - robeža tabulas augšdaļā
- zemāk - apmale tabulas apakšā
- malas - pievienojiet tikai horizontālas apmales (tabulas augšdaļa un apakšdaļa)
- pretēji - zīmējiet tikai vertikālas robežas (pa kreisi un pa labi no tabulas)
- rhs - robeža tikai galda labajā pusē
- lhs - robeža tikai galda kreisajā pusē
10. Īpašuma augstums = "numurs" - nosaka tabulas augstumu: pikseļos vai procentos.
11. Īpašuma noteikumi = "parametrs" - kur parādīt robežas starp šūnām. Tam var būt šādas vērtības:
- viss - ap katru tabulas šūnu tiek novilkta līnija
- grupas - līnija tiek parādīta starp grupām, kuras veido tagi , , ,
vai
- cols - līnija tiek parādīta starp kolonnām
- nav - visas robežas ir paslēptas
- rindas - robeža tiek novilkta starp tabulas rindām, kas izveidotas, izmantojot tagu
12. Īpašuma platums = "numurs" - nosaka tabulas platumu: pikseļos vai procentos.
13. Īpašuma klase = "klases_nosaukums" - varat norādīt tās klases nosaukumu, kurai pieder tabula.
14. Īpašuma stils = "stili" - stilus var iestatīt atsevišķi katrai tabulai.
Tagad ir pienācis laiks ienirt tabulā un aplūkot tabulas šūnu atribūtus. Šie atribūti ir jāieraksta sākuma tagā.
.
Atribūti un īpašības un |
1. Property align = "parameter" - iestata atsevišķas tabulas šūnas līdzinājumu. Tam var būt šādas vērtības:
- izlīdzināšana pa kreisi
- centrs - centra izlīdzināšana
- pa labi - izlīdzināšana
2. Īpašuma fons = "URL" - iestata šūnas fona attēlu. URL vietā ir jāraksta fona attēla adrese.
3. Īpašums bgcolor = "krāsa" - iestata šūnas fona krāsu.
4. Īpašums bordercolor = "krāsa" - nosaka šūnas apmales krāsu.
5. Property char = "burts" - iestata burtu, no kura jāveic līdzināšana. Izlīdzināšanas atribūta vērtībai jābūt iestatītai uz char.
6. Īpašums colspan = "skaits" - iestata apvienojamo horizontālo šūnu skaitu.
7. Īpašuma augstums = "numurs" - nosaka tabulas augstumu: pikseļos vai procentos.
8. Īpašuma platums = "numurs" - nosaka tabulas platumu: pikseļos vai procentos.
9. Property rowspan = "number" - iestata sapludināto vertikālo šūnu skaitu.
10. Rekvizīts valign = "parametrs" - šūnu satura vertikālā izlīdzināšana.
- augšā - izlīdzina šūnas saturu ar rindas augšdaļu
- vidējā - vidējā izlīdzināšana
- apakšā - izlīdziniet līdz apakšai
- bāzes līnija - bāzes līnijas izlīdzināšana
1. piezīme Par tagu | ir pieejamas tādas pašas iespējas kā | ... Parametri vienai atzīmei | tiks hierarhiski piemērots visiem tā iekšpusē
Kā novērst galda šūnu salipšanu
Gadījumā, ja tiek izmantota apmale (šūnu robeža) un nulles polsterējums starp šūnām, tās joprojām ir salīmētas kopā, un jūs iegūstat dubultu apmali. Lai no tā izvairītos, stilu lapā jāreģistrē border-collapse: collapse tabula:
...
Dārgais lasītāj, tagad jūs esat uzzinājis daudz vairāk par html tabulas tagu. Tagad es iesaku jums pāriet uz nākamo nodarbību.
Vienkāršas HTML tabulas avota kods
Šūna 1 |
Šūna 2 |
Šūna 3 |
Šūna 4 |
5. šūna |
6. šūna |
7. šūna |
8. šūna |
Šūna 9 |
HTML tabulu galvenes
HTML tabulās ir divu veidu šūnas. Atzīme nosaka parastā tipa šūnu. Ja šūna darbojas kā virsraksts, tā tiek identificēta ar atzīmi.
HTML tabulas piemērs ar nosaukumu
| Volkswagen AG |
Daimler AG |
BMW grupa |
|---|
| Audi |
Mercedes-Benz |
BMW |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Gudrs |
Rolls-Royce |
HTML tabulas avota kods ar virsrakstiem
Volkswagen AG |
Daimler AG |
BMW grupa |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Gudrs |
Rolls-Royce |
Apvienojiet šūnas HTML tabulā
HTML tabulām ir iespēja apvienot šūnas horizontāli un vertikāli.
Uz apvienot šūnas horizontāli izmantojiet atribūtu colspan = " NS", kamerā vai kur x
Uz sapludināt šūnas vertikāli izmantojiet atribūtu rowspan = " NS", kamerā vai kur x- apvienojamo šūnu skaits.
Šūnas var apvienot horizontāli un vertikāli vienlaicīgi. Lai to izdarītu, izmantojiet gan kolonnas, gan rindas platuma atribūtus vēlamajai šūnai:
Šūnas teksts |
Ņemiet vērā, ka, apvienojot šūnas, rindu vienumu skaits mainās. Piemēram, ja tabulai ir 3 kolonnas ar šūnām un mēs apvienojam pirmo un otro šūnu, tad tagā, kas definē šo rindu, būs 2 elementi, pirmajā no tiem būs atribūts colspan = "2".
HTML tabulas piemērs ar šūnu savienošanu
HTML tabulas avots ar sapludinātām šūnām
Nissan |
|---|
Modelis |
Aprīkojums |
Pieejamība |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Galvenes un kājenes un paraksts HTML tabulās
HTML tabulas var iedalīt 3 apgabalos: galvene, pamatteksts, kājene.
Tas tiek darīts, iesaiņojot atlasītās tabulas daļas rindas ar tagiem. definē galvenes apgabalu, - kājenes apgabalu, - tabulas pamattekstu.
Pēc noklusējuma galvenes un kājenes nav veidotas (ja nepieciešams, to var izdarīt, izmantojot CSS), bet tās var izmantot pārlūkprogrammas. Piemēram, drukājot vairāku lappušu tabulu, galvenes un kājenes var tikt dublētas uz katras izdrukātās lapas.
Pareizā apgabala tagu izvietošanas secība tabulas HTML kodā ir šāda: vispirms galvene, tad kājene, pēc tam pamatteksts. Šādā gadījumā lapas galvenā daļa tiks parādīta starp galvenēm un kājenēm.
Pēc vajadzības tabulai varat pievienot parakstu. Lai to izdarītu, izmantojiet tagu.
HTML tabulas piemērs ar galvenēm un kājenēm un parakstu
Tabulas avota kods ar galvenēm un kājenēm un parakstu
Pilns Renault Sandero Stepway komplekts
Raksturīgi |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Pieejamība |
+ |
+ |
+ |
|---|
Motora jauda |
0,9 (90 ZS) |
0,9 (90 ZS) |
1.5 (90 ZS) |
|---|
Degviela |
benzīns |
benzīns |
dīzeļdegviela |
|---|
Toksicitātes līmenis |
Eiro 6 |
Eiro 6 |
Eiro 5 |
|---|
Kolonnas un kolonnu grupas
HTML tabulu var iedalīt kolonnās un kolonnu grupās, izmantojot tagus un.
Šī atdalīšana ļauj iestatīt tabulas stilus, izmantojot minimālo CSS rekvizītu skaitu, tādējādi samazinot tabulas koda daudzumu (tā vietā, lai definētu stilus katrai kolonnas šūnai, vienlaikus varat iestatīt stilus vienai vai vairākām kolonnām).
Tagi un ievietoti tagā pirms tagiem, AKP6 (EDC) Pārnešana |
HTML tabulas c avots un
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Raksturīgi |
|---|
1.5 (90 ZS) |
1.2 (115 ZS) |
1.5 (90 ZS) |
Motora jauda |
|---|
dīzeļdegviela |
benzīns |
dīzeļdegviela |
Degviela |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Pārnešana |
|---|
Tabulas vietnes lapas izkārtojumā
Mūsdienu vietnēs ir svarīgi pareizi parādīt lapas gan datoros, gan mobilajās ierīcēs. Nav ieteicams izmantot tabulas, lai izveidotu HTML lapas skeletu, jo tiek zaudēta iespēja pielāgot saturu dažāda lieluma ekrāniem (datoriem, viedtālruņiem, planšetdatoriem).
Tabulas grupas tagus vislabāk izmantot lapā, lai parādītu tabulas formāta saturu.
| |
|
| | |
| | |
