Oprettelse af en side med tabellayout af information. Anvendelse af tomme celler

I den sidste lektion oprettede vi en fil til hovedsiden på webstedet index.html, åbnede den med Notesblok og tilføjede HTML-kode til den, der indeholdt de nødvendige HTML-tags.

Derudover lærte vi, hvordan man ændrer baggrundsfarven på siden ved at ændre værdien af ​​parameteren bgcolor i BODY-tagget.

Lad os nu huske, hvilket layout eller hvilken ramme vi valgte til webstedet, vi vil tale om dette på vores kursus.

Bemærk venligst, at webstedets layout faktisk er bord.

Det skal her bemærkes, at en af ​​de mest almindelige måder at layoute HTML-sider på er at bruge tabeller.

Faktisk er der to hovedtyper af sidelayout til html-websteder - ved hjælp af tabeller og brug af CSS-stile.

I øjeblikket er layout ved hjælp af CSS-stile mere at foretrække, men når du opretter et websted i en notesblok, er det lettere at bruge et tabellayout, så vi vil fokusere på tabellen.

I den indledende periode med internetudvikling blev den tabelformede metode til sidelayout hovedsageligt brugt. Udstrakt brug af tabeller i layout html sider skyldtes, at en tabel kan oprettes med et vilkårligt antal kolonner og rækker. Bordstørrelsen kan meget nemt ændres ved hjælp af parametre.

Når layoutet er i tabelform, er HTML-siden opdelt i det nødvendige antal celler, som hver optager en meget specifik plads på siden. Som et resultat kan du tilføje blokke med indhold til de ønskede tabelceller og derved placere indholdet det rigtige sted.

Nå, lad os fortsætte vores arbejde. Lad os åbne html-mappen og finde en beskrivelse af TABLE-tagget der. I begyndelsen af ​​tagbeskrivelsen skal du være opmærksom på bemærkningen om, at en tabel med en usynlig kant er meget brugt til layout af websider, som vi diskuterede ovenfor.

Så tabellen i websidekoden er specificeret af tagget

, ved vi, at en tabel består af lodrette kolonner og vandrette rækker, der danner tabelcellerne. Rækker i en HTML-tabel er specificeret af tagget , og cellen er tag påkrævet.

T.D. – opretter en ny celle i træk. Afsluttende tag påkrævet.

Lad os se på et eksempel for bedre at forstå alt ovenstående:

. Lad os åbne vores websidefil index.html til redigering ved hjælp af Notepad++. Og åbn den ved hjælp af en browser for at se ændringerne på siden. Allerede i begyndelsen af ​​denne artikel talte vi om, at det webstedslayout, vi har planlagt, er et bord. Desuden vil vores sidelayouttabel bestå af tre rækker (Heder, Content og Footer) og to kolonner (Menu og Content). For at tilføje en tabel med tre rækker og to kolonner, lad os ændre vores kode for at tilføje følgende: 1 række 1 kolonne 1 række 2 kolonne 2 række 1 kolonne 2 række 2 kolonne 3 række 1 kolonne 3 række 2 kolonne For at indstille en kant i tabellen skal du bruge kantparameteren. Tykkelsen af ​​tabelrammen er angivet i pixels (px). Lad os tilføje en grænseparameter til vores html-kode, med en argumentværdi lig med 1px. Det vil sige, at tykkelsen af ​​bordrammen vil være lig med en pixel: 1 række 1 kolonne 1 række 2 kolonne 2 række 1 kolonne 2 række 2 kolonne 3 række 1 kolonne 3 række 2 kolonne For at justere tabellen i midten af ​​browservinduet bruger vi align parameteren, som kan have tre værdier: venstre, centreret, højre. Det er klart, at for at justere tabellen i midten af ​​browservinduet, skal værdien af alignment parameter argument skal være lig med: center. Og lad os sætte bordets bredde her. Tabellens bredde er angivet af breddeparameteren. Værdierne, som denne parameter kan tage, kan udtrykkes som et heltal i pixels eller som en procentdel af det aktuelle browservindues bredde. Lad os tilføje justering og tabelbredde til vores kode, og som et resultat får vi følgende kode: 1 række 1 kolonne 1 række 2 kolonne 2 række 1 kolonne 2 række 2 kolonne 3 række 1 kolonne 3 række 2 kolonne Vi opdaterer browservinduet på vores hjemmeside for at se ændringerne, vi ser, at tabellen er justeret til midten af ​​vinduet og har ændret dens bredde. Lad os nu gå tilbage til tabelrammen, i html-koden sætter vi den til 1 pixel ved hjælp af værdien af ​​grænseparameterargumentet: border=”1”. Se parametrene for TABLE-tagget i html-opslagsbogen; der er to parametre her, der påvirker rammens udseende. Den første parameter: celleafstand – indstiller afstanden mellem tabelceller. Anden parameter: cellpadding – afstanden fra rammen til indholdet af cellen afhænger af værdien af ​​argumentet for denne parameter. For at gøre alle afstande og indrykninger minimale, sætter vi værdierne af argumenterne over ovenstående parametre til nul. Som et resultat vil html-koden for tabellen antage følgende form: 1 række 1 kolonne 1 række 2 kolonne 2 række 1 kolonne 2 række 2 kolonne 3 række 1 kolonne 3 række 2 kolonne Som du husker, skal vores tabel have tre rækker, og den første række skal have en celle, den anden række skal have to celler, og den tredje række skal også have en celle. Hvis vi ser på tabellens udseende, vil vi se, at for at bringe tabellen til den ønskede form, skal vi bare kombinere de vandrette celler i den første og tredje række. For at gøre dette vil vi bruge parameteren colspan. Denne parameter bruges i TD-tagget. Værdien af ​​colspan-parameterargumentet angiver antallet af vandrette celler, der skal flettes; i vores tilfælde er denne værdi 2. Udover at tilføje parameteren colspan, lad os ændre etiketterne i tabelcellerne, så de matcher vores layout. Efter alle ændringerne vil den fulde html-kode på vores side være som følger: Header webstedets menu Indhold Sidefod Lad os gemme vores kode i Notesblok og opdatere filen index.html i browseren for at se ændringerne. Så denne lektion viste sig at være ret stor, så lad os fortsætte med at arbejde på html-tabellen på vores side i næste lektion. En tabel er en samling af data fordelt på tværs af rækker og celler. De fleste celler indeholder tabeldata; andre indeholder række- og kolonneoverskrifter, der beskriver indholdet. Brug tagget for at oprette en tabel i et HTML-dokument , repræsenterer den en beholder, der indeholder alt indholdet i tabellen. Oprettelse af tabel starter altid med rækker, som defineres ved hjælp af tagget , hver række består igen af ​​celler. Tag kan kun indeholde tags til oprettelse af celler. I HTML er der to forskellige tags til at skabe celler, den første er , opretter det almindelige dataceller. Tag indhold som standard justeret til venstre. Det andet tag til at oprette celler er tagget , det giver dig mulighed for at definere celler, der indeholder overskrifter til kolonner eller rækker, indholdet af sådanne celler vises med fed tekst og midtstillet. Tags Og kan indeholde alle HTML-elementer, der er tilgængelige til brug i dokumentets brødtekst. Første titel Anden titel række 1, celle 1 række 1, celle 2 række 2, celle 1 række 2, celle 2 Prøve " Tabel i en tabel HTML har evnen til at oprette indlejrede tabeller, det vil sige tabeller, der er placeret inde i andre tabeller. For at lave en indlejret tabel, skal du placere koden for den tabel, som du vil gøre indlejret i ethvert tag . Lad os for eksempel tage den tabel, vi oprettede tidligere, og placere denne kode i den anden celle i den anden række: Første titel Anden titel række 1, celle 1 række 1, celle 2 række 2, celle 1 række 2, celle 2 Første titel Anden titel række 1, celle 1 række 1, celle 2 række 2, celle 1 række 2, celle 2 Tabeller spiller en meget vigtig rolle i at skabe en usynlig ramme for en webside. Og dette vil hjælpe med at arrangere tekst, menuer, billeder osv. jævnt og smukt. For bedre at forstå, hvad jeg forsøger at fortælle dig, skal du tage et kig på dette eksempel på en webside wireframe: Så, hvordan man laver en simpel tabel i HTML? For at bygge en tabel skal du bruge tre tags: BORD – dette tag er nødvendigt for at åbne bordet. Det er en slags beholder, der indeholder andre elementer. Det er bøjet på en sådan måde, at du ikke kan finde ud af det uden en doughnut. Det er okay, du finder ud af det, når du ser et eksempel. Afsluttende tag påkrævet. Bordet består af en række række 1 række 1 række 2 række 2 række 3 række 3 celle 1 celle 2 celle 1 celle 2 celle 1 celle 2 TR – opretter en ny tabelrække. Afsluttende tag

række 1 celle 1	række1 celle2
række 2 celle 1	række 2 celle 2
række 3 celle 1	række 3 celle 2

Her er resultatet:

række 1 celle 1	række1 celle2
række 2 celle 1	række 2 celle 2
række 3 celle 1	række 3 celle 2

Lad mig forklare alt.
Før hver oprettelse af en ny tabel, åbnes et tag

.
Dernæst placeres det i midten af ​​beholderen tag , som angiver begyndelsen af ​​en ny serie.
I denne række indsætter vi to celler med indhold ved hjælp af tagget

Afslutning af rækken med et mærke .
Åbn en anden række med et mærke
Afslutning af rækken med et mærke .
Åbn den tredje række med mærket og indsæt to celler i det igen.
Afslutning af rækken med et mærke .
Lukning af bordet med et mærke

række 1 celle 1	række1 celle2

.

Jeg tror du fandt ud af det? Hvis nogen har glemt, hvad en egenskab er grænse som jeg bruger sammen med mærket

, jeg minder dig om, at dette er tykkelsen af ​​rammen. Hvis i grænse vil blive sat til "0", så vil bordkanterne være usynlige.

Se på et par eksempler oprettede tabeller og du kan gå videre:

række 1 celle 1

række 2 celle 1

Resultat:

For at indsætte et billede i en tabel, skal du have grundlæggende viden om, hvordan du indsætter et billede i en HTML-fil. Jeg taler om dette i. Nu hvor du kender det grundlæggende om billeder i HTML, kan du prøve at indsætte et billede i en tabel. Dette kan gøres på følgende måde:

på linje mellem tags indsæt billede.

række 1 celle 1

række 1 celle 2

Resultat:

række 1 celle 1

række 1 celle 2

Hvordan flettes celler i en tabel?

For at flette celler i en tabel skal du bruge følgende attributter:
COLSPAN– definerer antallet af kolonner.
Standardværdien er 1.
ROWSPAN– bestemmer antallet af rækker.
Standardværdien er 1.

flette celler i den øverste række ved hjælp af attributten colspan :

række 1 celle 1+2
række 2 celle 1	række 2 celle 2

Resultat:

Hvordan indstiller man bordstørrelsen?

For at indstille højden og bredden af ​​bordet skal du bruge følgende attributter:

BREDDE– bordbredde. Størrelsen er angivet i pixels eller procenter.
HØJDE– bordhøjde. Størrelsen er angivet i pixels eller procenter.

række 1 celle 1	række1 celle2
række 2 celle 1	række 2 celle 2

Resultat:

Justering af indhold i en tabel

For at justere indhold (tekst, billeder) inde i en tabel kan du bruge følgende attributter:

ALIGN– vandret justering af indholdet i tabellen.
At tilskrive ALIGN tildelte værdier: venstre (standard), centrum,højre.
venstre - tryk indholdet til venstre side;
center – installere i midten;
højre - skub indholdet til højre

VALIGN– lodret justering af indhold i tabellen.
At tilskrive VALIGN tildelte værdier: top, bund, midt.
top – tryk indholdet til toppen;
bund – tryk indholdet til bunden;
midten – sæt indholdet i midten

række 1 celle 1	række1 celle2
række 2 celle 1	række 2 celle 2

Resultat:

Hvordan laver man en bordbaggrund?

Du kan også indstille tabelbaggrunden for alle dens celler sammen, såvel som for hver celle individuelt. Du kan indstille baggrunden med en farve eller med et billede. Der er to attributter til baggrunden:

BGCOLOR– baggrundsfarve for hele bordet eller for hver celle individuelt. Farven er angivet med kode eller ord.
BAGGRUND– baggrunden i tabellen er fyldt med et billede.

Opmærksomhed: hvis du vil indstille en baggrundsfarve eller et baggrundsbillede for hele tabellen, skal attributterne indstilles i tagget

. Og hvis kun til en bestemt celle, så til tagget

Bemærk, at når du flette celler, ændres antallet af elementer i rækken. For eksempel, hvis en tabel har 3 kolonner med celler, og vi kombinerer den første og anden celle, så vil der være 2 elementer inde i tagget, der definerer denne række, den første af dem vil indeholde attributten colspan="2".

Eksempel HTML-tabel med fletteceller

HTML-tabel kildekode med flettede celler

. For bedre forståelse, se eksemplet: række 1 celle 1 række1 celle2 række 2 celle 1 række 2 celle 2 Resultat: Opmærksomhed: hvis billedet er mindre i størrelse pr. celle, så vil det blive gentaget, indtil det fylder cellen til enden. Hvis billedet er større end cellen, vil baggrunden af ​​billedet blive beskåret, så det passer til cellen. Og til sidst vil jeg fortælle dig om to nyttige egenskaber. I tilfælde af at du pludselig ønsker at øge afstanden mellem alle celler, vil følgende attributter hjælpe: CELLPADDING– afstanden mellem rammen af ​​hver celle i html-tabellen og det materiale, den indeholder. række 1 celle 1 række1 celle2 række 2 celle 1 række 2 celle 2 Resultat: række 1 celle 1 række1 celle2 række 2 celle 1 række 2 celle 2 CELLEPACERING– afstanden mellem grænserne for naboceller. række 1 celle 1 række1 celle2 række 2 celle 1 række 2 celle 2 Resultat: række 1 celle 1 række1 celle2 række 2 celle 1 række 2 celle 2 Pyha, jeg fortalte dig det! Jeg håber, jeg klarede opgaven og forklarede klart alt, hvad jeg vidste om html tabeller. Jeg anbefaler, at du sikrer materialet godt. Prøv at oprette din egen tabel, eller endnu bedre, en hel ramme for en webside fra en html-tabel. Alt det bedste til dig! Tak fordi du besøgte min blog Simpel HTML-tabel kildekode Celle 1 Celle 2 Celle 3 Celle 4 Celle 5 Celle 6 Celle 7 Celle 8 Celle 9 HTML-tabeloverskrifter Der er 2 typer celler i HTML-tabeller. Tagget definerer en celle af normal type. Hvis en celle fungerer som en overskrift, defineres den ved hjælp af . Eksempel HTML-tabel med overskrift th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls Royce HTML-tabel kildekode med overskrifter Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls Royce Fletning af celler i en HTML-tabel HTML-tabeller har mulighed for at flette celler vandret og lodret. Til flette celler vandret brug attributten colspan=" x" , ved cellen eller , hvor x Til flette celler lodret brug attributten rowspan=" x" , ved cellen eller , hvor x- antal celler, der skal flettes. Celler kan flettes vandret og lodret på samme tid. For at gøre dette skal du bruge både colspan- og rowspan-attributterne for den ønskede celle:

Celletekst

Nissan
Model	Udstyr	Tilgængelighed
Nissan Qashqai	VISIA	+
	TEKNA	+
Nissan X-Trail	ACENTA	+
	CONNECTA	-

Sidehoveder og sidefødder i HTML-tabeller

HTML-tabeller kan opdeles i 3 områder: sidehoved, brødtekst, sidefod.

Dette gøres ved at pakke rækkerne i den valgte del af tabellen med tags. definerer sidehovedområdet, - sidefodsområdet, - hoveddelen af ​​tabellen.

Som standard er sidehoveder og sidefødder ikke stylet anderledes (dette kan gøres via CSS hvis nødvendigt), men kan bruges af browsere. For eksempel, når du udskriver en flersidet tabel, kan sidehoveder og sidefødder duplikeres på hver udskrevne side.

Den korrekte rækkefølge for placering af områdemærker i en tabels HTML-kode er som følger: sidehoved først, efterfulgt af sidefod, derefter brødtekst. I dette tilfælde vil hoveddelen af ​​siden blive vist mellem sidehoveder og sidefødder.

Hvis det er nødvendigt, kan du tilføje en signatur til tabellen. For at gøre dette skal du bruge tagget.

Eksempel på HTML-tabel med sidehoveder og sidefødder

Kildekode til tabel med sidehoveder og sidefødder

Renault Sandero Stepway-konfigurationer

Egenskab	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Tilgængelighed	+	+	+
Motorkraft	0,9 (90 hk)	0,9 (90 hk)	1,5 (90 hk)
Brændstof	benzin	benzin	diesel
Toksicitetsstandard	Euro 6	Euro 6	Euro 5

Kolonner og kolonnegrupper

En HTML-tabel kan opdeles i kolonner og grupper af kolonner ved hjælp af og tags.

Denne opdeling giver dig mulighed for at indstille typografier for en tabel ved hjælp af et minimum antal CSS-egenskaber, og derved reducere mængden af ​​tabelkode (i stedet for at definere typografier for hver celle i en kolonne, kan du indstille typografier for en eller flere kolonner på én gang).

Tags og er placeret inde i tagget før tags, AKP6 (EDC)

Smitte

HTML-tabel kildekode Og

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Egenskab
1,5 (90 hk)	1.2 (115 hk)	1,5 (90 hk)	Motorkraft
diesel	benzin	diesel	Brændstof
Automatgear6 (EDC)	Automatgear6 (EDC)	Automatgear6 (EDC)	Smitte

Tabeller i sidelayout på webstedet

På moderne hjemmesider er det vigtigt, at siderne vises korrekt på både computere og mobile enheder. Det er ikke tilrådeligt at bruge tabeller til at skabe skelettet af en HTML-side, da evnen til at tilpasse indholdet til skærme i forskellige størrelser (computere, smartphones, tablets) går tabt.

Tabelgruppetags bruges bedst på en side til at vise indhold i et tabelformat.

En tabel er et af de vigtigste værktøjer til at oprette websider.

Uden at bruge CSS, kun ved hjælp af tabeller kan du oprette sider med komplekse designs. Hvis du har gennemført rækken af ​​lektioner Lave en hjemmeside - de første trin, så forstår du, hvad vi taler om.

Enhver tabel er et sæt rækker og kolonner, hvor der er celler i skæringspunktet. For eksempel:

Lad os se på vores tabel fra et HTML-perspektiv:

• selve tabellen er specificeret ved hjælp af tags ,
• bordet har et navn - tags ,
• tabellen består af rækker - tags ,
• hver række består af kolonner - tags ,
• kolonner har navne placeret i den første række - tags .

Lad os oprette en tabel, hvor vi angiver skæringspunktet mellem række- og kolonnenumre som indhold:

Resultat:

Som du kan se, blev det ikke særlig pænt, vi vil pynte det.

HTML-tabelparametre: indrykning, bredde, baggrundsfarve, ramme

Til dette formål tagget

Der er en række parametre:

• bredde- indstiller bredden af ​​tabellen (i pixels eller % af skærmens bredde),
• bgcolor- indstiller baggrundsfarven for tabelceller,
• baggrund- fylder bordbaggrunden med et mønster,
• grænse- indstiller en kant af den angivne bredde (i pixels) rundt om hele tabellen,
• cellepolstring- indstiller udfyldningen i pixels mellem cellekanten og dens indhold.

Lad os anvende disse parametre:

Resultat:

Dette er bedre, men vores bord er trykket til venstre kant af vinduet, ligesom teksten i det. Lad os rette op på dette ved at tilføje yderligere tre parametre:

• justere- indstiller bordjusteringen: venstre (højre), højre (venstre), center (midter),
• celleafstand- indstiller afstanden mellem tabelceller (i pixels),
• cellepolstring- indstiller afstanden mellem teksten og den indre kant af tabelcellen (i pixels).

Lad os anvende disse parametre:

Resultat:

Bemærk venligst, at bordet har dobbelte kanter. Hvis du angiver cellspaceing="0", så vil grænserne have den sædvanlige form:

Resultat:

Generelt er to parametre ansvarlige for grænser:

• ramme- indstiller typen af ​​ramme rundt om bordet og kan tage følgende værdier:
  • ugyldig- ingen ramme,
  • over- kun den øverste ramme,
  • under- kun bundramme,
  • hsider- kun de øverste og nederste rammer,
  • vsider- kun venstre og højre rammer,
  • lhs- kun venstre ramme,
  • rhs- kun højre ramme,
  • boks- alle fire dele af rammen.
• regler- angiver typen af ​​interne tabelgrænser og kan tage følgende værdier:
  • ingen- der er ingen grænser mellem celler,
  • grupper- kun grænser mellem grupper af rækker og grupper af kolonner (vil blive diskuteret lidt senere),
  • rækker- grænser kun mellem linjer,
  • cols- grænser er kun mellem kolonner,
  • alle- Vis alle kanter.

Ved hjælp af disse parametre kan du indstille grænserne, som du ønsker. Her vil vi kun give ét eksempel, eksperimentere med dem alle selv.

Resultat:

Det skal bemærkes, at grænser vises lidt forskelligt i forskellige browsere.

HTML-tags tr og td

Tabeller dannes række for række. Derfor udvider parametrene specificeret i linjen (tr) deres effekt til alle celler (td) i linjen. Strenge kan have tre parametre:

• justere- justerer tekst i celler vandret, kan tage værdier: venstre (højre), højre (venstre), center (center),
• valign- justerer tekst i celler lodret, kan tage værdier: op (øverst), ned (nederst), centreret (midt),
• bgcolor- indstiller farven på linjen.

Lad os se på et eksempel:

• bredde- indstiller kolonnebredden (i pixels eller som en procentdel, hvor 100% er tabelbredden),
• højde- indstiller cellens højde, og alle celler i samme række bliver i denne højde.

Lad os f.eks. tilføje til vores kode i tags

Resultat:

Det skal bemærkes, at hvis du ikke indstiller bredden og højden, vil bordet blive dannet i henhold til indholdet (dette var tilfældet i de foregående eksempler).

Denne lektion er slut, øv dig i at skabe og designe tabeller, du skal bruge disse færdigheder i næste lektion, hvor vi vil lave tabeller med komplekse strukturer.

disse parametre
1	2	3