Das Erstellen einer Tabelle in HTML ist eine der Hauptaufgaben eines Website-Entwicklers. Mit Tabellen können Sie Informationen in einem Raster mit Zellen und Spalten platzieren, was sie verständlicher und benutzerfreundlicher macht. Eines der wichtigsten Merkmale von Tabellen sind ihre Grenzen, die Struktur und visuelle Trennung von Datenelementen hinzufügen.
Nachdem wir die Tabelle erstellt und die Grenzen hinzugefügt haben, können wir jetzt mit dem Ausfüllen der Daten in den Zellen fortfahren. Um dies zu tun, schreiben Sie einfach Text oder platzieren Sie ein Bild zwischen
Plan für einen informativen Artikel zum Erstellen einer Tabelle in HTML mit Grenzen
In diesem Artikel erfahren Sie, wie Sie eine Tabelle mit Rändern in HTML erstellen. Die Tabelle verwendet Zellen mit Begrenzungen, um die Informationen anschaulich darzustellen.
- Einführung in Tabellen in HTML
- Erstellen einer Tabelle mit Begrenzungen
- Verwenden eines Tags
- Definieren der Anzahl der Spalten mit einem Tag
- Erstellen einer Titelleiste mit einem Tag
- Erstellen von Datenzeilen mithilfe eines Tags
- Definieren des Zelleninhalts mithilfe eines Tags
- Tabellengestaltung mit CSS
- Verwenden von Klassen zum Definieren von Stilen
- Anwenden von CSS-Eigenschaften auf Tabellenzellen
- Anpassen von Rändern und Einrückungen
- Ergebnis: Fertige Tabelle mit Grenzen
Alle erforderlichen Codes und Beispiele werden im Artikel vorgestellt, um den Prozess der Tabellenerstellung in HTML mit Rändern besser zu verstehen. Wenn Sie die Anweisungen befolgen und CSS-Stile verwenden, können Sie eine professionelle Tabellenansicht erzielen.
Schritt 1: Definieren der Tabellenstruktur
Um beispielsweise eine Tabelle mit zwei Zeilen zu erstellen, können Sie den folgenden Code verwenden:
| Ячейка 1, строка 1 | Ячейка 2, строка 1 |
| Ячейка 1, строка 2 | Ячейка 2, строка 2 |
In diesem Beispiel haben wir eine Tabelle mit zwei Zeilen und zwei Zellen in jeder Zeile erstellt.
Beachten Sie, dass die Anzahl der Zellen in jeder Zeile gleich sein muss, andernfalls wird die Tabelle nicht korrekt angezeigt.
Schritt 2: Hinzufügen von Kopfzeilen und Daten zu einer Tabelle
Имя Возраст
Иван 25
Schritt 3: Anwenden von Stilen auf eine Tabelle
Nachdem Sie eine Tabelle in HTML erstellt haben, können wir Stile anwenden, um sie attraktiver und lesbarer zu machen. Dazu können wir CSS (Cascading Style Sheets) verwenden, mit dem wir das Aussehen der Elemente einer Webseite steuern können.
Im folgenden Beispiel wird veranschaulicht, wie Standardstile auf eine Tabelle angewendet werden:
table border-collapse: collapse;
width: 100%;
>
th, td border: 1px solid black;
padding: 8px;
text-align: left;
>
th background-color: #f2f2f2;
>
tr:nth-child(even) background-color: #f9f9f9;
>
In diesem Beispiel haben wir die folgenden CSS-Eigenschaften verwendet:
- border-collapse: gibt den Stil an, in dem Tabellenzellgrenzen zusammengeführt werden;
- width: legt die Breite der Tabelle fest;
- border: legt den Stil und die Breite der Tabellenzellenrahmen fest;
- padding: legt den Einzug innerhalb der Tabellenzellen fest;
- text-align: legt die Ausrichtung des Inhalts der Tabellenzellen fest;
- background-color: legt die Hintergrundfarbe für Tabellenköpfe und -zeilen fest.
Nach dem Hinzufügen dieses CSS-Codes wird unsere Tabelle strukturierter und professioneller aussehen. Natürlich können Sie die Stile nach Ihren Bedürfnissen und Vorlieben anpassen.
In den folgenden Schritten erfahren Sie, wie Sie den Tabellenzellen Inhalte hinzufügen und die Tabelle noch dynamischer und interaktiver gestalten können.
Schritt 4: Tabellenränder hinzufügen
Wir verwenden das Border-Attribut mit dem Wert "1" in unserem Beispiel:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1 | Ячейка 2 |
Nachdem Sie den Wert des Border-Attributs hinzugefügt haben, werden die Ränder um die Tabelle herum angezeigt.
Die Tabelle wird nun so aussehen:
| Überschrift 1 | Überschrift 2 |
|---|---|
| Zelle 1 | Zelle 2 |
Schritt 5: Überprüfung der Tabelle auf Standardkonformität und browserübergreifende Kompatibilität
Nachdem Sie eine Tabelle in HTML mit Rändern erstellt haben, ist es wichtig sicherzustellen, dass sie den Standards entspricht und in verschiedenen Browsern korrekt angezeigt wird.
Sie können den W3C-Validator verwenden, um die Tabelle auf die Einhaltung von Standards zu überprüfen, der das offizielle Tool zur Überprüfung von HTML-Code ist.
- Öffnen Sie einen Webbrowser und gehen Sie zur Website https://validator.w3.org/
- Klicken Sie auf die Schaltfläche "Senden" (Submit).
- Fügen Sie den Code Ihrer Tabelle in das Feld "Adresse einer Webseite oder HTML-Code eingeben" ein (Enter the address of a web page or HTML code).
- Klicken Sie auf die Schaltfläche "Prüfen" (Check).
- Warten Sie, bis die Validierung abgeschlossen ist, und überprüfen Sie die Validierungsergebnisse.
Wenn der Validator Fehler oder Warnungen erkennt, korrigieren Sie diese entsprechend.
Stellen Sie außerdem sicher, dass die Tabelle in verschiedenen Browsern korrekt angezeigt wird. Öffnen Sie Ihre Webseite in mehreren gängigen Browsern wie Google Chrome, Mozilla Firefox, Microsoft Edge und Safari und überprüfen Sie, ob die Tabelle gleich aussieht und Ihren Erwartungen entspricht.
Nachdem Sie sichergestellt haben, dass die Tabelle den Standards entspricht und in verschiedenen Browsern korrekt angezeigt wird, können Sie sicher sein, dass Ihre Tabelle einsatzbereit ist.
