Erste Schritte mit HTML: Tabellen

HTML, kurz für HyperText Markup Language. Es ist ein Standard, der als Referenz für die Entwicklung von Webseiten in seinen verschiedenen Versionen dient, eine Grundstruktur und einen Code (genannt Code HTML) zum Definieren des Inhalts einer Webseite, wie unter anderem Text, Bilder, Videos. Um zu verstehen, wie die Struktur dieser Sprache definiert ist, beginnen wir in diesem Tutorial damit, die Labels zu kennen, mit denen die Tabellen behandelt werden, die vor allem beim Aufbau der Strukturen von Newslettern und Mailings sehr nützlich sind.
Das Ziel dieses Tutorials ist es, eine Erklärung zu geben, die Grafikdesignern hilft, die Struktur und Logik von Dokumenten auf einfachste Weise zu verstehen HTML um die Grundkenntnisse zu erwerben, die es ihnen ermöglichen, Dateien in dieser Sprache zu generieren.

Anforderungen

- Besitze einen Code-Editor wie Dreamweaver CS6, Notepad ++, Erhabener Text unter anderem im Internet verfügbar.
- Installieren Sie einen Webbrowser wie Chrome, Firefox, Opera, Safari, Edge oder Internet Explorer.
Schritt 1: Kennen Sie die Labels zum Erstellen von Tabellen
mit diesem Label definieren wir den Anfang der Tabelle in der Struktur HTML-Code.
ermöglicht das Anlegen einer Zeile für die Tabelle
die Kopfzeile der Spalten darstellen, bestehen diese Spalten aus Zellen.
<>> ist die Darstellung der Zellen, die sich in den Zeilen der Tabelle befinden.
Dies sind alle Labels, die wir zum Erstellen der Tabellen benötigen. Im nächsten Schritt lernen wir, wie sie im Code deklariert werden und in welcher Reihenfolge sie sind.
Schritt 2: Logische Deklaration von Labels.
Es ist wichtig zu wissen, dass in HTML die allermeisten Tags geöffnet werden müssen, und zwar gerade dann, wenn wir sie deklarieren und auch geschlossen werden müssen. Das folgende Beispiel veranschaulicht dieses Konzept:

Wie Sie sehen, muss jedes Etikett sein Öffnen und Schließen haben. Sie unterscheiden sich hauptsächlich durch den Schrägstrich "/", mit dem das Label schließt. Jedes Mal, wenn ein Tag erstellt wird, muss seine Schließung auf die gleiche Weise deklariert werden.
Schritt 3: Hierarchische Deklaration von Labels.
Das Etikett Es ist das erste, das deklariert wird, um die Erstellung einer Tabelle anzuzeigen und folglich mit der Erstellung der Zellen zu beginnen, die die anzuzeigenden Informationen enthalten.
Tabellen bestehen aus Spalten und Zeilen.

Unter Beachtung der hierarchischen Reihenfolge, die jedes Label haben muss, erstellen wir die Tabelle und führen die Zeilen ein, die wir für die Tabelle in der unten gezeigten Abbildung benötigen:

Der Code in der Tabelle sollte so aussehen:

Obwohl die Zeilen der Tabelle bereits definiert sind, müssen die Zellen erstellt werden, aus denen die Spalten der Tabelle bestehen. Das folgende Bild veranschaulicht dieses Konzept:

Der Code in der Tabelle sollte so aussehen:

Schritt 4: Inhalte zu Zellen hinzufügen
Jedes Tag [Farbe = # 7030a0] [/color] entspricht einer Zelle in unserer Tabelle, daher können die Informationen hier hinzugefügt werden. Wir werden das erste Label ändern [color = # 44546a] [/color] deklarierte Zeile alle [color = # 7030a0] [/color] durch Header-Tags [color = # 002060][/Farbe]. In der [Farbe = # 7030a0][/color] der restlichen Zeilen fügen wir Beispielinhalte hinzu. Der Code HTML Es sollte so aussehen:

 
 
 
Artikel
 
Name
 
Familienname, Nachname
 

 
 
1
 
Pedro
 
Rosen
 

 
 
2
 
John
 
Quellen
 

Schritt 5: Speichern Sie das Dokument in HTML und sehen Sie sich die Datei an
Im Codebearbeitungsprogramm gehen wir zum Menü Datei / Speichern, während wir das Dokument im Format speichern .html

Später öffnen wir das Dokument im Browser unserer Wahl:

Die von uns erstellte Tabelle sollte wie in der Abbildung unten aussehen.

Bisher haben wir den Namen und die Funktion der Etiketten erfahren HTML Tabellen, ihre hierarchische Ordnung, ihre logische Anordnung zu erstellen und ihnen Inhalte hinzuzufügen. Wir sind nun bereit, Tabellen grafische Attribute hinzuzufügen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben