Fertige Tabelle in html. Beispiel: Anwenden der Eigenschaft border-collapse

Ergebnis:

Werte werden in Pixel (px) oder Prozent (%) angegeben

○ Inhalt in einer HTML-Tabelle ausrichten

Um Inhalte in einer HTML-Tabelle auszurichten, verwenden Sie das to-Tag Attribut ausrichten und "gültig" :

AUSRICHTEN– horizontale Ausrichtung des Inhalts in der Tabelle.
Werte:

• links - Inhalt nach links schieben (Default);
• Center – in der Mitte gesetzt;
• Rechts - Inhalt auf die rechte Seite schieben

GÜLTIG- vertikale Ausrichtung der Inhalte in der Tabelle.
Werte:

• oben – Drücken Sie den Inhalt nach oben;
• Unterseite – Drücken Sie den Inhalt nach unten;
• Mitte – Inhalt in die Mitte setzen

Ergebnis:

○ So zentrieren Sie eine HTML-Tabelle

Um den Tisch in der Mitte auszurichten, müssen Sie den Tisch mit einem Tag umwickeln

Zusätzliche und Haupt-Tags für die Tabelle

Ergebnis:

Damit sind wir mit den Tabellen fertig. Jetzt können Sie selbst eine Tabelle beliebiger Komplexität erstellen. Sehen Sie sich diese Lektion an. Versuchen Sie, selbst eine Tabelle zu erstellen.
Ich freue mich darauf, Sie in der nächsten Lektion zu sehen. Abonnieren Sie meine Blog-Updates.

Vorherigen Post
Nächster Beitrag

Jede Tabellenzeile wird in einem Element platziert ... .

Tabellenkopfzelle wird in einem Element platziert ...(in diesem Fall wird der Inhalt fett und zentriert dargestellt).

Jede Tabellendatenzelle wird in einem Element platziert ... .

Der Name der Tabelle wird, falls erforderlich, innerhalb des Elements platziert ...(optionales Tabellenelement). Bitte beachten Sie, dass, wenn Sie planen, zu verwenden gegebenes Element in seiner Tabelle, dann muss es dem Element im Dokument folgen

Kommen wir zum praktischen Teil der Tabelle:

Zu dieser Tabelle haben wir der Übersichtlichkeit halber das Attribut border (border) mit dem Wert „1“ hinzugefügt, das festlegt, dass der Rahmen um die Zellen der Tabelle angezeigt werden soll. Das Border-Attribut wird in HTML fast nie verwendet, in diesem Fall wäre die Verwendung von CSS vorzuziehen und würde mehr Flexibilität bieten. Im Rahmen HTML lernen Wir werden lernen, wie man Tabellen richtig bildet, und beim Lernen CSS3 im Artikel "" erfahren Sie, wie Sie sie professionell stylen.

Das Ergebnis unseres Beispiels:

Spalten zusammenführen

Spalten in Elementen kombinieren (Datenzelle) bzw (Kopfzelle) kann mit dem Attribut colspan erfolgen (in diesem Fall wird die Zelle um eine bestimmte Anzahl von Zellen nach rechts gestreckt).

Das Ergebnis unseres Beispiels:

String-Verkettung

Strings in Elementen verketten oder mit dem rowspan-Attribut erlaubt (der Zellenbereich wird von oben nach unten festgelegt und erstreckt sich über mehrere Zeilen - die Zelle wird nach unten gestreckt).

Das Ergebnis unseres Beispiels:

Spalteneigenschaften

Ein Beispiel für die Verwendung des span-Attributs für einzelne Spalten einer Tabelle:

Das Ergebnis unseres Beispiels:

Wenn Sie nur eine Spalte formatieren müssen, reicht es aus, das span-Attribut innerhalb des Elements anzugeben , nicht innerhalb des Elements :

Das Ergebnis unseres Beispiels:

Partitionieren einer Tabelle

Nächste HTML-Tags werden verwendet, um eine Tabelle in Teile aufzuteilen:

• Schild verwendet, um einen Gruppenkopf in einer Tabelle zu enthalten ("Tabellenkopf", nicht zu verwechseln mit Kopfzeilen).
• Schild verwendet, um die "Fußzeile" der Tabelle (Fußzeile) zu enthalten.
• Schild verwendet, um den "Körper" der Tabelle (Körper) zu enthalten.

Element darf nur einmal in einer Tabelle in folgendem Kontext verwendet werden: innerhalb eines Elements

Elemente

Das Ergebnis unseres Beispiels.

Eine Tabelle ist ein Raster aus Zellen, die Zeilen und Spalten bilden. Beispiele für Tabellen sind verschiedene Finanzberichte, Ergebnisse von Sportwettkämpfen, Kalender, Zeitpläne usw. Ein einzelner Rasterblock wird als Tabellenzelle bezeichnet. Tabellenzellen können eine Vielzahl von Informationen enthalten, darunter Zahlen, Text und sogar Video- und Audioobjekte. Mit Hilfe der Sprache HTML-Tabellen werden zeilenweise geschrieben.

Element

Element

Aufgaben

• Doppelte Tischumrandung entfernen

  Standardmäßig wirkt der Tabellenrand wie ein doppelter Rand, ändern Sie den Code so, dass alle Zeilen dieses Randes einfach werden.

Tabellen sind eines der wichtigsten und zugleich komplexesten Elemente, die auf Webseiten vorhanden sein müssen. Mit ihrer Hilfe ist es bequem, wichtige und zu dienen nützliche Informationen in eher komprimierter Form. Natürlich können Sie mit den meisten Editoren in Vorlagen, die auf verschiedenen Engines ausgeführt werden, automatisch eine Tabelle auf einer Seite einer Website oder einer separaten Veröffentlichung einfügen, aber was ist, wenn das Design einer Webressource und ihre Seiten von Grund auf neu erstellt werden? Dann kann der unerfahrene Meister auf ein Problem stoßen: Wie geht das? Lassen Sie uns herausfinden, wie dieses Element richtig und schnell erstellt wird.

Auswahl eines Redakteurs

Wenn Sie mit der Erstellung einer Tabelle beginnen, sollten Sie sich zunächst für den Editor entscheiden, in dem Sie arbeiten werden. Am einfachsten ist es natürlich, das Programm auszuwählen, in dem Sie den Hauptseitencode erstellen. Aber am besten nutzt man für diese Zwecke den guten alten Notizblock.

Sie fragen sich vielleicht, warum Sie sich das Leben verkomplizieren, denn wenn Sie alles auf einmal im Editor erledigen, können Sie das Ergebnis sofort sehen und auch die Hinweise des Programms nutzen.

Ja, das stimmt, aber indem Sie eine Tabelle mit erstellen sauberer Schiefer, können Sie nicht nur das Prinzip seiner Erstellung gründlich studieren, sondern auch lästige Tippfehler und Fehler im Hauptcode vermeiden. Manchmal kommt es vor, dass sich der Cursor versehentlich nach unten bewegt und sich beim Schreiben ein Fehler in den Code einschleicht, der manchmal schwer zu finden ist. Nachdem Sie eine Tabelle im Editor erstellt haben, können Sie ihren Code kopieren und an der gewünschten Stelle einfügen.

Algorithmus zur Tabellenerstellung

Lassen Sie uns zunächst einen kurzen Algorithmus zum Erstellen einer Tabelle in HTML erstellen. Dies ist notwendig, damit Sie die Abfolge der einzelnen Schritte verstehen. Dann werden wir genau analysieren, wie jeder der Punkte auszuführen ist.

Beginnen wir mit den vorbereitenden Schritten.

1. Zeichnen Sie ein schematisches Bild des Tisches auf ein Blatt Papier.

2. Zählen Sie die Anzahl der Zeilen und Zellen. Wenn die Anzahl der letzteren unterschiedlich ist, zählen wir für jede Zeile separat.

3. Bestimmen Sie die Anzahl der Kopfzellen in der Zeile (z. B. Zellen "Nr", "Name" usw.).

4. Wir schreiben die Hauptparameter der Tabelle auf - Farbe, Höhe und Breite, Textausrichtung - im Allgemeinen alles, was Ihnen notwendig erscheint.

1. Tabellen-Tags einfügen.

2. Fügen Sie Linien-Tags basierend auf der benötigten Nummer ein.

3. In die Zeilen fügen wir die Tags der Zellen (normal und groß) ein, ebenfalls basierend auf der Nummer, die auf Ihrem Papier steht.

4. Parametrieren Sie die gesamte Tabelle.

5. Setzen Sie ggf. Kennzeichen für einzelne Zellen.

6. Füllen Sie unsere Zellen mit Text.

Erstellen Sie eine Tabelle

Sie haben sich also für einen Editor entschieden. Lassen Sie uns nun herausfinden, wie eine Tabelle in HTML erstellt wird. Das Tag, mit dem eine Tabelle in den Seitencode eingefügt wird (

Nachdem wir die Tabellen-Tags eingefügt haben, fahren wir mit der Erstellung von Zeilen und Zellen fort.

Wir stellen sofort fest, dass diese Elemente auch gepaart sind. Schild gibt Zeichenfolgen an, und - Zellen.

Verwenden Sie für Kopfzellen ein gepaartes Element .

Wie bereits erwähnt, besteht der erste Schritt darin, die Linien anzuordnen und dann die Zellen darin zu schreiben. Um nicht durcheinander zu kommen, raten wir dazu, entweder zwischen den einzelnen Blöcken ein- oder zweizeilig einzurücken oder mit der „Tab“-Taste einen neuen Block von Elementen vorzugeben.

Wie könnte es aussehen? Ungefähr so:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  Nr. p / p	Familien-oder Nachname
  1	;	Iwanow

  .

Wie Sie sehen können, ist daran nichts kompliziert. Die Hauptsache ist, sich nicht in der Anzahl der Zeilen und Zellen zu verwirren. Andernfalls kann die Tabelle verzerrt werden.

Wir haben die Erstellung einer Tabelle in HTML untersucht, jetzt können wir zu den Parametern sowohl der Matrix selbst als auch ihrer Zeilen und Zellen übergehen.

Tabellenoptionen

Beim Schreiben des Codes sollten Sie auf folgende Punkte achten: Ausrichtung an Rahmen, Hintergrund, Text usw.

Tabellenparameter werden im Tag gesetzt

1. Rand - Randbreite. Als Ganzzahl angegeben. Standardmäßig sind die Rahmen jeder Tabelle null.

2. Rahmenfarbe - Rahmenfarbe. Kann eingestellt werden als Hex-Code Farbe (#00008B) und seinen englischen Namen (DarkBlue). Standardmäßig ist es immer grau.

3. Bgcolor - Wird auch nach Code oder Name festgelegt.

4. Ausrichten - Textausrichtung hinter der Tabelle. Die Voreinstellung ist linksbündig. Für diesen Parameter gibt es folgende Optionen:

• links - nach rechts wickeln;
• rechts - links wickeln;
• center - Zeigt die Tabelle ohne Umbruch in der Mitte an.

5. Breite und Höhe - Breite und Höhe des Tisches. Kann sowohl in Pixel als auch in Prozent (bezogen auf die Größe des Browserfensters) angegeben werden.

Wenn Sie diesen oder jenen Indikator vorschreiben, sollten Sie besonders auf das Design achten. Dem Parameter muss ein Gleichheitszeichen folgen, gefolgt von dem angegebenen Wert in Anführungszeichen.

Was die Farbe des Textes anbelangt, so ist er genauso formatiert wie normaler Text im HTML-Format.

Beispiel für Tabellenlayout:

Zeilenoptionen

Wir haben also bereits herausgefunden, wie man eine Tabelle in HTML erstellt und ihre Hauptparameter vorschreibt. Aber was ist, wenn wir eine Zeile hervorheben müssen? Soll ich es anders formatieren als den Haupttext der Tabelle?

String-Parameter werden in das Tag geschrieben genau wie die Tabellendaten. Die folgenden Variablen können für einen String gesetzt werden:

1. Border, bordercolor und bgcolor sind Ihnen bereits bekannt.

2. Ausrichten - Textausrichtung in einer Zeile. Kann die Werte links, Mitte und rechts annehmen.

3. Valign – Dieses Tag richtet den Text vertikal aus. Nimmt folgende Werte an:

• top - der Text wird am oberen Rand ausgerichtet;
• Mitte - in der Mitte;
• unten - entlang der unteren Grenze.

Beispiel für Zeilenformatierung:

• ;
• Nr. p / p;
• Familien-oder Nachname;
• .

Zelloptionen

Und das Letzte, worauf Sie achten sollten, wenn Sie wissen möchten, wie man eine Tabelle in HTML erstellt, sind die Parameter der einzelnen Zellen, sowohl der regulären als auch der Großbuchstaben. Tatsächlich wird alles genau so gemacht wie für eine Tabelle oder Zeile. Das Einzige ist, dass zwei weitere wichtige Elemente hinzugefügt werden:

1.Colspan- angegebenen Parameter gibt die Anzahl der Spalten an, die die Zelle umfassen kann.

2. Rowspan – gibt bereits die Anzahl der Zeilen an, die diese Zelle belegt.

Da sich das Design nicht vom Schreiben einer Zeile unterscheidet, geben wir keinen Beispielcode.

Schlussfolgerungen

Einen Tisch zu machen ist nicht so schwierig, wie es auf den ersten Blick erscheinen mag. Die Hauptsache beim Schreiben seines Codes ist Ausdauer und Aufmerksamkeit.

Um eine Tabelle in HTML einzufügen, reicht es aus, ihre Chiffre zu kopieren und genau an der Stelle Ihrer Seite einzufügen, an der sie sich Ihrer Meinung nach befinden sollte.

Scheuen Sie sich nicht zu experimentieren, und bald werden Sie die Technik der Erstellung von Tischen perfekt beherrschen. Viel Glück!

Eine Aufgabe

Erstellen Sie eine Tabelle und geben Sie ihre Parameter (Ränder und Abstände zwischen Zellen) über Stile an.

Lösung

Eine Tabelle besteht aus Zeilen und Spalten von Zellen, die Text und Grafiken enthalten können. Das Tag wird verwendet, um einer Webseite eine Tabelle hinzuzufügen.

. Die Tabelle muss mindestens eine Zelle enthalten (Beispiel 1). Statt Tag erlaubt	Etikett verwenden	. Text in einer mit einem Tag formatierten Zelle	, wird vom Browser fett dargestellt und in der Zelle zentriert. Andernfalls werden die Unterschiede zwischen Zellen über Tags erstellt	und	Nein. Beispiel 1: Erstellen Sie eine Tabelle HTML5 IE Cr Op Sa Fx Zelle 1 Zelle 2 Zelle 3 Zelle 4 Die Anordnung der Zellen und ihr Aussehen ist in Abb. 1 dargestellt. eines. Reis. 1. Das Ergebnis der Erstellung einer Tabelle mit vier Zellen Das Rahmenattribut des Tags es ist zulässig, nur mit einem leeren Wert hinzuzufügen ( ) oder gleich 1. Alle anderen Werte schlagen bei der Validierung fehl. Um die Ränder innerhalb von Zellen zu steuern, wird die Stileigenschaft padding verwendet, die dem td-Selektor hinzugefügt wird. Der Abstand zwischen den Zellen wird durch die dem Tabellenselektor hinzugefügte Eigenschaft border-spacing (Beispiel 2) geändert, IE versteht sie erst ab Version 8.0. Beispiel 2: Ränder innerhalb von Zellen HTML5 CSS 2.1 IE Cr Op Sa Fx Überschrift 1 Überschrift 2 Zelle 3 Zelle 4 Die Tabelle mit Feldern und Abständen zwischen den Zellen ist in Abb. 2 dargestellt. 2. Ein ähnliches Ergebnis kann mit einem weißen Rahmen um die Zellen erzielt werden. Reis. 2. Felder in Tabellenzellen Android - Allgemein Sicherheit Sonstiges Spiele Internet Tastaturen Multimedia Navigation Büro Programme Sonstig Systemisch Die letzten Noten Vorteile und Perspektiven Gehen Sie zu den Mitschülern auf Ihrer Seite: Detaillierte Informationen Beruf Webdesigner: Wie viel verdienen sie und wo kann man diese Spezialität studieren? Stromschlag: Folgen, notwendige Maßnahmen und richtige Maßnahmen So elektrisieren Sie die Hände bis zum Stromschlag Stromschlag: Folgen, notwendige Maßnahmen und richtige Maßnahmen Wie man einen Stromschlag von einem Finger bekommt Beliebt Arten von Ionenkanälen. Ionenkanäle. Potentiell unabhängige Natriumkanäle So passen Sie Miniaturansichten von Seiten an Miniaturansichten werden in Windows 7 nicht angezeigt Laden Sie den Aktivierungscode für iobit Malware Fighter 3 herunter Nachrichten 2021-11-05 13:41:32 Laden Sie den praktischen Schlüssel für das Wiederherstellungsprogramm herunter 2021-11-05 13:41:32 Hitman pro 3.7 14.265 Aktivierungscode. HitmanPro mit einer Reihe von Lizenzschlüsseln. Die Hauptmerkmale des Hitman-Programms 2021-11-05 13:41:32 Aktivierungscode für das Iobit-Deinstallationsprogramm 2021-11-05 13:41:32 Hetman Partition Recovery mit Aktivierung 2021-11-05 13:41:32 Treiber-Updater-Aktivierungsschlüssel ow5.ru ow5.ru - Bildung. Sicherheit. Navigation. Internet. Spiele. Office-Programme 2022 - Alle Rechte vorbehalten Kontakte Über die Website Werbung auf der Website Android - Allgemein Sicherheit Sonstiges Spiele Android - Allgemein Sicherheit Sonstiges Spiele