Sådan laver du et bord i HTML: Detaljeret beskrivelse

Tabeller er en af de vigtigste, men ogsåtidskomplekse elementer, der skal være til stede på websider. Med deres hjælp er det praktisk at indsende vigtig og nyttig information i en ret kortfattet form. Selvfølgelig, de fleste redaktører i skabeloner, der arbejder på forskellige motorer, automatisk at indsætte en tabel på din hjemmeside eller særskilt publikation, men hvad hvis det webdesign ressource, er dens sider lavet fra bunden? Så den uerfarne mester kan få et problem: hvordan man laver en tabel i HTML. Lad os finde ud af, hvordan du opretter dette element korrekt og hurtigt.

Vælg en editor

Først og fremmest, når du begynder at oprette et bord,Du bør bestemme redaktøren, hvor du vil arbejde. Selvfølgelig er den nemmeste måde at vælge det program, hvor du opretter webstedets hovedkode. Men det er bedst at bruge en gammel god notesbog til disse formål.

Du kan spørge hvorfor du skal komplicere dit liv, fordi hvis du gør alt på én gang i redaktøren, så kan du også se resultatet på én gang og også bruge programmets anvisninger.

Ja, det er sandt, men ved at lave et bord meddu vil ikke kun være i stand til grundigt at studere selve princippet om dets oprettelse, men også at tillade irriterende skrivefelter og fejl i hovedkoden. Nogle gange sker det, at markøren ved et uheld flytter ned, og i færd med at skrive koden kryber i fejlen, hvilket nogle gange er svært at finde. Oprettelse af et bord i en notesbog, du kan kopiere sin kode og indsætte det på det ønskede sted.

Algoritme til oprettelse af et bord

Først sammensætter vi en kort algoritme for, hvordan man laver et bord i HTML. Dette er nødvendigt, så du forstår sekvensen af hvert trin. Så vil vi analysere, hvordan man udfører hver enkelt af emnerne.

Lad os starte med de forberedende handlinger.

1. Tegn et diagram over bordet på et ark papir.

2. Tæl antallet af rækker og celler. Hvis nummeret på sidstnævnte er anderledes - betragtes vi for hver række separat.

3. Bestem antallet af celler i rækkerne (for eksempel celler "Nej", "Navn" osv.).

4. Indtast de vigtigste parametre i tabellen - farve, højde og bredde, justering af teksten - generelt, alt hvad du behøver.

Dernæst, gå direkte til at oprette et bord:

1. Indsæt etiketterne i tabellen.

2. Indsæt etiketterne i rækkerne ud fra det beløb, du har brug for.

3. Rækkerne indsætte tags af celler (normale og store), også på grundlag af det beløb, som er optaget på papir.

4. Indstil parametrene for tabellen som helhed.

5. Om nødvendigt indstiller vi indikatorerne for de enkelte celler.

6. Fyld vores celler med tekst.

Lav en tabel

Så, du valgte redaktøren, nu lad osVi finder ud af, hvordan man opretter et bord i HTML. Etiketten, som tabellen indsættes i sidekoden (<tabel>) er et par, det vil sige, vores design begynder med dette tag og slutter med </ table>.

Ved at indsætte tags i tabellen fortsætter vi med at oprette rækker og celler.

Vi bemærker straks, at disse elementer også er parret. <Tr> -koden angiver rækker og <td> cellerne.

For headerceller, brug det <th> parrede element.

Som allerede nævnt er det første skridt at formaliserelinjer, så i dem at registrere allerede celler. For ikke at blive forvirret anbefaler vi, at du laver indtryk mellem hver blok i en eller to linjer eller foreskriver en ny blok af elementer ved hjælp af tabulatoren.

Hvordan kan det se ud? Ca. så:

<Table>;
<Tr>;
<th> nr. п / п </ th>;
<th> Efternavn </ th>;
</ tr>;
<Tr>;
<td> 1 <td>;
<td> Ivanov </ td>;
</ tr>;
</ table>.

Som du kan se er intet kompliceret i dette. Det vigtigste er ikke at blive forvirret af antallet af rækker og celler. Ellers kan bordet ske.

Vi har diskuteret oprettelsen af et bord i HTML, nu kan vi gå over til parametrene for både matrixen selv og dens rækker og celler.

Tabelindstillinger

Når koden er skrevet, skal du være opmærksom på følgende punkter: justering i HTML-tabellen, grænsefarve, baggrund, tekst og så videre.

Bordparametrene er angivet i tabellen <table>. Disse omfatter:

1. Border - bredden af grænserne. Den er givet som et helt tal. Som standard er grænserne for enhver tabel nul.

2. Bordercolor - grænsen farve. Kan angives som en hexadecimal farvekode (# 00008B), og navnet er på engelsk (DarkBlue). Som standard er den altid grå.

3. Bgcolor - baggrundsfarven. Indstilles også efter kode eller navn.

4. Juster - juster teksten bag bordet. Standarden er tilbage. Der er følgende muligheder for denne parameter:

venstre er strømmen til højre;
højre flow til venstre;
center - Udlæs bordet i midten uden flow.

5. Bredde og højde - bredde og højde på bordet. Kan angives både i pixel og i procent (i forhold til browservinduets størrelse).

Foreskrive denne eller den indikator, bør du være særlig opmærksom på designet. Efter angivelse af parameteren skal ligestillingsbetegnelsen følges efterfulgt af den angivne værdi i anførselstegn.

Hvad angår farven på teksten, er den designet på samme måde som almindelig tekst i HTML-format.

Et eksempel på et bord:

<table border = "2" bordercolor = "# 00008B" bgcolor = "#FFFFFF" align = "center" width = "800" height = "800">;
<Tr>;
<th> nr. п / п </ th>;
<th> Efternavn </ th>;
</ tr>;
<Tr>;
<td> 1 <td>;
<td> Ivanov </ td>;
</ tr>;
</ table>.

Linjeparametre

Så vi har allerede fundet ud af, hvordan man laver et bord i HTML og foreskriver sine grundlæggende parametre. Men hvad nu hvis vi skal vælge en linje? At designe det ikke som den vigtigste tekst af bordet?

Strengparametrene er skrevet i <tr> -taggen på samme måde som tabeldata. Følgende variabler kan angives for en streng:

1. Allerede kendt for dig grænsen, bordercolor og bgcolor.

2. Juster - juster teksten i linjen. Det kan tage værdier venstre, midten og højre.

3. Valign - dette mærke justerer teksten lodret. Det tager følgende værdier:

øverst - teksten er justeret på den øvre grænse;
midtcentreret;
bunden - på den nederste grænse.

Eksempel på en linje:

<tr border = "3", bordercolor = "# 00007F" bgcolor = "# FFFFE0" align = "center" valign = "middle">;
<th> nr. п / п </ th>;
<th> Efternavn </ th>;
</ tr>.

Celleindstillinger

Og det sidste, der bør være opmærksom på,hvem vil vide, hvordan man laver et bord i HTML - parametrene for individuelle celler, både konventionelle og kapital. Faktisk gøres alt præcis på samme måde som for et bord eller en række. Det eneste, to vigtige elementer tilføjes:

1. Colspan - denne parameter angiver antallet af kolonner, som en celle kan spænde over.

2. Rowspan - angiver antallet af rækker, som denne celle indtager.

Da designet ikke adskiller sig fra linjens skrift, vil vi ikke give dig et eksempel på koden.

fund

At lave et bord er ikke så vanskeligt som det kan synes ved første øjekast. Det vigtigste ved at skrive sin kode er assiduity og opmærksomhed.

Hvad angår, hvordan du indsætter et bord i HTML, kopieres dets kryptering og indsættes nøjagtigt til stedet på din side, hvor det efter din mening burde være placeret.

Vær ikke bange for at eksperimentere, og snart vil du mestre teknikken til at skabe tabeller. Held og lykke!