Aan de slag met HTML: Tabellen

HTML, een afkorting voor HyperText Markup Language. Het is een standaard die dient als referentie voor de ontwikkeling van webpagina's in zijn verschillende versies, definieert een basisstructuur en een code (de zogenaamde code HTML) voor het definiëren van de inhoud van een webpagina, zoals tekst, afbeeldingen, video's, enz. Om te begrijpen hoe de structuur van deze taal is gedefinieerd, zullen we in deze tutorial beginnen met het kennen van de labels waarmee de tabellen worden behandeld, die erg handig zijn bij het bouwen van de structuren van voornamelijk nieuwsbrieven en mailings.
Het doel van deze tutorial is om een ​​uitleg te geven die grafische ontwerpers helpt om op de eenvoudigste manier de structuur en logica van documenten te begrijpen HTML om de basiskennis te krijgen waarmee ze bestanden in deze taal kunnen genereren.

Vereisten

- Bezit een code-editor zoals Dreamweaver CS6, Kladblok ++, Sublieme tekst onder andere beschikbaar op internet.
- Zorg voor een webbrowser zoals Chrome, Firefox, Opera, Safari, Edge of Internet Explorer.
Stap 1: Ken de labels voor het maken van tabellen
met dit label definiëren we het begin van de tabel in de structuur HTML-code.
maakt het maken van een rij voor de tabel mogelijk
vertegenwoordigen de kop van de kolommen, deze kolommen zijn opgebouwd uit cellen.
<>> is de weergave van de cellen die zich in de rijen van de tabel zullen bevinden.
Dit zijn alle labels die we nodig hebben om de tabellen te maken, in de volgende stap zullen we leren hoe ze in de code en hun volgorde worden aangegeven.
Stap 2: Logische declaratie van labels.
Het is belangrijk om te weten dat in HTML de overgrote meerderheid van tags moet worden geopend, en dat is precies wanneer we ze declareren en ze moeten ook worden gesloten, het volgende voorbeeld illustreert dit concept:

Zoals u kunt zien, moet elk label zijn opening en sluiting hebben. Ze verschillen vooral door de schuine streep "/" waarmee het label sluit. Elke keer dat een tag wordt gemaakt, is het verplicht om de sluiting op dezelfde manier aan te geven.
Stap 3: Hiërarchische declaratie van labels.
Het etiket Het is de eerste die wordt gedeclareerd om de creatie van een tabel aan te geven, en dus om te beginnen met het maken van de cellen die de informatie bevatten die moet worden weergegeven.
Tabellen zijn opgebouwd uit kolommen en rijen.

We zorgen voor de hiërarchische volgorde die elk label moet hebben, we zullen de tabel maken en de rijen introduceren die we nodig hebben voor de tabel in de onderstaande afbeelding:

De code in de tabel zou er als volgt uit moeten zien:

Hoewel de rijen van de tabel al zijn gedefinieerd, is het noodzakelijk om de cellen te maken die de kolommen van de tabel vormen. Onderstaande afbeelding illustreert dit concept:

De code in de tabel zou er als volgt uit moeten zien:

Stap 4: Inhoud aan cellen toevoegen
Elke tag [kleur = # 7030a0] [/ color] is gelijk aan een cel in onze tabel, dus hier kan de informatie worden toegevoegd. We zullen veranderen in het eerste label [kleur = # 44546a] [/ color] gedeclareerde rij all [color = # 7030a0] [/ kleur] door header-tags [kleur = # 002060][/Kleur]. In de [kleur = # 7030a0][/ color] van de rest van de rijen voegen we voorbeeldinhoud toe. De code HTML Het zou er zo uit moeten zien:

 
 
 
Item
 
Naam
 
Achternaam
 

 
 
1
 
Pedro
 
rozen
 

 
 
2
 
John
 
bronnen
 

Stap 5: Sla het document op in HTML en bekijk het bestand
In het codebewerkingsprogramma gaan we naar het menu Bestand / Opslaan terwijl we het document in formaat opslaan .html

Later openen we het document in de browser van onze voorkeur:

De tabel die we hebben gemaakt, zou eruit moeten zien als de onderstaande afbeelding.

Tot nu toe hebben we de naam en functie van de labels geleerd HTML om tabellen, hun hiërarchische volgorde, hun logische rangschikking te bouwen en er inhoud aan toe te voegen. We zijn nu klaar om grafische attributen aan tabellen toe te voegen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven