Ergebnis:

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

○ Richten Sie den Inhalt in der HTML-Tabelle aus

Verwenden Sie zum Ausrichten von Inhalten in HTML-Tabellen das Tag Attribut "Ausrichten" und "Valign" :

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

• links - schieben Sie den Inhalt nach links (Default);
• center – in die Mitte gesetzt;
• richtig - schieben Sie den Inhalt auf die rechte Seite

VALIGN - vertikale Ausrichtung des Inhalts in der Tabelle.
Werte:

• oben – drücken Sie den Inhalt nach oben.
• unterseite – schieben Sie den Inhalt nach unten.
• mitte – stellen Sie den Inhalt in die Mitte

Ergebnis:

○ So zentrieren Sie die Align-HTML-Tabelle

Um die Tabelle zentriert auszurichten, müssen Sie die Tabelle mit dem Tag umschließen

Zusätzliche und Haupt-Tags zur Tabelle

Ergebnis:

Also haben wir mit den Tischen fertig. Jetzt können Sie selbst eine Tabelle beliebiger Komplexität erstellen. Verstärken Sie diese Lektion. Versuchen Sie, eine beliebige Tabelle selbst zu erstellen.
Ich freue mich darauf, Sie in der nächsten Lektion zu sehen. Abonniere meine Blog-Updates.

Vorherigen Post
Nächster Beitrag

Dann spielen Tabellen eine sehr wichtige Rolle beim Erstellen eines unsichtbaren Drahtgitters für eine Webseite. Dies hilft dabei, Text, Menüs, Bilder usw. gleichmäßig und schön anzuordnen.
Schauen Sie sich zum besseren Verständnis dessen, was ich Ihnen sagen möchte, ein Beispiel für ein Drahtgitter einer Webseite an:

So, wie man eine einfache Tabelle in HTML erstellt?
Um eine Tabelle zu erstellen, müssen Sie drei Tags verwenden:

TABELLE – dieses Tag wird benötigt, um die Tabelle zu öffnen. Dies ist eine Art Container, der andere Elemente enthält. Hier habe ich es so gebogen, dass man es ohne Donut nicht herausfinden kann. Nichts, Sie werden es herausfinden, wenn Sie ein Beispiel sehen.
Tag beenden erforderlich.

Die Tabelle besteht aus einer Zeile

TR – erstellt eine neue Tabellenzeile. Tag beenden erforderlich.

TD – Erstellt eine neue Zelle in der Zeile. Tag beenden erforderlich.

Schauen wir uns ein Beispiel an, um all das besser zu verstehen:

Hier ist das Ergebnis:

Lass mich alles erklären.
Jedes Mal, wenn eine neue Tabelle erstellt wird, wird ein Tag geöffnet.

Ich denke du hast es herausgefunden? Falls jemand vergessen hat, was ein Attribut ist randwas ich zusammen mit dem Tag benutze

Schauen Sie sich einige Beispiele an erstellte Tabellen und Sie können weiter gehen:

Ergebnis:

Um ein Bild in eine Tabelle einzufügen, müssen Sie über grundlegende Kenntnisse zum Einfügen eines Bildes in eine HTML-Datei verfügen. Ich rede darüber in. Nachdem Sie die grundlegenden Nuancen eines Bildes in HTML kennen, können Sie versuchen, ein Bild in eine Tabelle einzufügen. Dies kann wie folgt erfolgen:

in der Zeile zwischen Tags ein Bild einfügen.

zeile 1 Zelle 1

zeile 1 Zelle 2

Ergebnis:

Wie kombiniere ich Zellen in einer Tabelle?

Um Zellen in einer Tabelle zu kombinieren, müssen Sie folgende Attribute verwenden:
COLSPAN - bestimmt die Anzahl der Spalten.
Der Standardwert ist 1.
ROWSPAN - bestimmt die Anzahl der Zeilen.
Der Standardwert ist 1.

zellen verbinden in der oberen Reihe mit dem Attribut colspan :

Ergebnis:

Wie stelle ich die Größe der Tabelle ein?

Verwenden Sie die folgenden Attribute, um die Höhe und Breite der Tabelle festzulegen:

BREITE - Tischbreite. Die Größe wird in Pixel oder als Prozentsatz festgelegt.
HÖHE - Tischhöhe. Die Größe wird in Pixel oder als Prozentsatz angegeben.

Ergebnis:

Inhalt in einer Tabelle ausrichten

Um Inhalte (Text, Bilder) in der Tabelle auszurichten, können Sie die folgenden Attribute verwenden:

AUSRICHTEN - horizontale Ausrichtung des Inhalts in der Tabelle.
Zuschreiben AUSRICHTEN Werte werden zugewiesen: links (Standard), center, richtig.
links -schieben Sie den Inhalt nach links.
center -in die Mitte gesetzt;
richtig -schieben Sie den Inhalt auf die rechte Seite

VALIGN - vertikale Ausrichtung des Inhalts in der Tabelle.
Zuschreiben VALIGN Werte werden zugewiesen: oben, unten, Mitte.
oben – drücken Sie den Inhalt nach oben.
unterseite – schieben Sie den Inhalt nach unten.
mitte – stellen Sie den Inhalt in die Mitte

Ergebnis:

Wie erstelle ich einen Tabellenhintergrund?

Sie können den Hintergrund der Tabelle auch für alle Zellen zusammen sowie für jede Zelle separat festlegen. Sie können den Hintergrund mit einer Farbe oder mit einem Bild einstellen. Es gibt zwei Attribute für den Hintergrund:

BGCOLOR - Hintergrundfarbe für die gesamte Tabelle oder für jede Zelle einzeln. Die Farbe wird durch Code oder Wort angegeben.
HINTERGRUND - Der Hintergrund in der Tabelle ist mit einem Bild gefüllt.

Beachtung: Wenn Sie den Hintergrund mit einer Farbe oder einem Hintergrundbild für die gesamte Tabelle festlegen möchten, müssen die Attribute im Tag festgelegt werden

... Und wenn nur zu einer bestimmten Zelle, dann das Tag (Tabellenzeile) und endet mit dem Tag... Eine einzelne Zelle in einer Reihe wird von zwei Tags umrahmt (Tabellendaten) oder (Tabellenüberschrift). Etikett ... Endcodes, und kann ausgelassen werden. In diesem Fall ist das Ende einer Zeilen- oder Zellenbeschreibung der Anfang der nächsten Zeile oder Zelle oder das Ende einer Tabelle. Endtabellen-Tag

. Zum besseren Verständnis siehe ein Beispiel: zeile 1 Zelle1 row1 cell2 zeile 2 Zelle 1 zeile 2 Zelle 2 Ergebnis: Beachtung: Wenn das Bild pro Zelle kleiner ist, wird es wiederholt, bis die Zelle bis zum Ende gefüllt ist. Wenn das Bild größer als die Zelle ist, wird der Hintergrund des Bildes auf die Zellengröße zugeschnitten. Und zum Schluss erzähle ich Ihnen mehr darüber zwei nützliche Attribute. Wenn Sie plötzlich den Abstand zwischen allen Zellen vergrößern möchten, helfen die folgenden Attribute: CELLPADDING –Distanz zwischen dem Frame jeder Zelle der HTML-Tabelle und dem Inhalt des darin enthaltenen Materials. zeile 1 Zelle1 row1 cell2 zeile 2 Zelle 1 zeile 2 Zelle 2 Ergebnis: zeile 1 Zelle1 row1 cell2 zeile 2 Zelle 1 zeile 2 Zelle 2 CELLSPACING –Entfernung zwischen den Grenzen benachbarter Zellen. zeile 1 Zelle1 row1 cell2 zeile 2 Zelle 1 zeile 2 Zelle 2 Ergebnis: zeile 1 Zelle1 row1 cell2 zeile 2 Zelle 1 zeile 2 Zelle 2 Fuh, erzählt! Ich hoffe, ich habe die Aufgabe gemeistert und alles erklärt, was ich wusste hTML-Tabellen... Und für Sie empfehle ich, dass Sie das Material gut reparieren. Versuchen Sie, eine eigene Tabelle oder besser ein ganzes Skelett für eine Webseite aus einer HTML-Tabelle zu erstellen. Alles Gute für dich! Vielen Dank für Ihren Besuch auf meinem Blog. Kapitel 4 HTML-Tabellen Eines der leistungsstärksten und am häufigsten verwendeten Tools in HTML sind Tabellen. Der Begriff der tabellarischen Datenpräsentation bedarf keiner zusätzlichen Erläuterung. In HTML werden Tabellen nicht nur traditionell als Methode zur Darstellung von Daten verwendet, sondern auch als Mittel zur Formatierung von Webseiten. Hier finden Sie Beispiele für reale Dokumente, in denen eine tabellarische Ansicht eine bequeme Möglichkeit zum Erstellen eines Dokuments darstellt. In Abb. 4.1 zeigt ein typisches Beispiel für die Verwendung von Tabellen zur Darstellung numerischer Daten, die in Zeilen und Spalten unterteilt sind. In Abb. 4.2 Die Verwendung der Tabelle dient nur zum Formatieren des Dokuments und zum Festlegen der relativen Position von Seitenelementen. Beim Anzeigen eines solchen Dokuments ist nicht sofort klar, dass eine Tabelle zum Erstellen verwendet wird, da die Rahmen um seine Zellen nicht gezeichnet werden. Die erste Version der HTML-Sprache enthielt keine speziellen Tools zum Anzeigen von Tabellen, da sie hauptsächlich zum Schreiben von einfachem Text gedacht war. Mit der Entwicklung der Anwendungsbereiche von HTML-Dokumenten ist die Aufgabe der Darstellung von Daten, für die das Vorhandensein einer Reihe von Zeilen und Spalten typisch ist, dringend geworden. Zunächst wurde die Erstellung von Dokumenten mit spaltenausgerichteten Daten unter Verwendung von vorformatiertem Text durchgeführt, in dem die erforderliche Ausrichtung durch die Einführung der erforderlichen Anzahl von Leerzeichen bereitgestellt wurde. Denken Sie daran, dass sich der Text in einem Paar von Tags befindet UND wird in monospaced Schriftart angezeigt und alle Leerzeichen und Tabulatoren sind von Bedeutung. Die Ausrichtungsarbeiten für diesen Text wurden manuell durchgeführt, was die Erstellung von Dokumenten erheblich verlangsamte. Die Unterstützung von Tabellendaten ist zum De-facto-Standard geworden, da sie ursprünglich in allen gängigen Browsern implementiert wurden und erst nach einer beträchtlichen Zeit in der HTML 3.2-Spezifikation festgelegt wurden. Spezielle Tools zum Erstellen von Tabellen verhindern jedoch nicht die Verwendung von vorformatiertem Text. Die Verwendung von Tabellen ist nicht auf Daten beschränkt, die aus Zeilen und Spalten bestehen. Eine der Verwendungsmöglichkeiten besteht darin, die Anordnung verschiedener Daten auf einer Seite zu organisieren, die aus Klartext, Bildern, anderen Tabellen usw. bestehen können. Dieses Kapitel befasst sich mit den Regeln zum Erstellen von Tabellen und Beispielen für deren Verwendung. Reis . 4.1. Typisches Beispiel für eine HTML-Tabelle Reis . 4.2. Beispiel einer Tabelle ohne Rahmen Erstellen grundlegender HTML-Tabellen Betrachten wir zunächst den Mindestsatz an Tags und deren Parametern, die zum Erstellen einfacher Tabellen erforderlich und ausreichend sind, und fahren Sie dann mit ihrer detaillierten Beschreibung fort. Die Beschreibung der Tabellen sollte sich im Dokumentabschnitt befinden ... Ein Dokument kann eine beliebige Anzahl von Tabellen enthalten, und Tabellen können ineinander verschachtelt sein. Jede Tabelle muss mit dem Tag beginnen und mit dem Tag enden... In diesem Tag-Paar befindet sich eine Beschreibung des Inhalts der Tabelle. Jede Tabelle besteht aus einer oder mehreren Zeilen, von denen jede Daten für einzelne Zellen angibt. Jede Zeile beginnt mit dem Tag
und	und	wird normalerweise für Tabellenkopfzellen verwendet, und	- für Datenzellen. Der Unterschied in der Verwendung liegt nur in der Art der Schriftart, die standardmäßig zum Anzeigen des Inhalts der Zellen verwendet wird, sowie in der Position der Daten in der Zelle. Inhalt von Typzellen	fett und zentriert angezeigt (ALIGN \u003d CENTER, VALIGN \u003d MIDDLE). Durch ein Tag definierte Zellen	Standardmäßig werden die Anzeigedaten links (ALIGN \u003d LINKS) und in der Mitte (VALIGN \u003d MITTEL) in vertikaler Richtung ausgerichtet. Stichworte	und	kann nicht außerhalb der Tabellenzeilenbeschreibung angezeigt werden

kann nicht weggelassen werden.

Die Anzahl der Zeilen in der Tabelle wird durch die Anzahl der öffnenden Tags bestimmt und die Anzahl der Spalten ist die maximale Anzahl oder unter allen Zeilen. Einige der Zellen enthalten möglicherweise keine Daten. Solche Zellen werden durch ein Paar der folgenden Tags in einer Reihe beschrieben: , ... Wenn eine oder mehrere Zellen am Ende einer Zeile keine Daten enthalten, kann deren Beschreibung weggelassen werden, und der Browser fügt automatisch die erforderliche Anzahl leerer Zellen hinzu. Daraus folgt, dass die Erstellung von Tabellen, in denen sich unterschiedliche Anzahlen von Spalten gleicher Größe in unterschiedlichen Zeilen befinden, nicht zulässig ist.

Die Tabelle kann einen Titel haben, der in einigen Tags enthalten ist und... Die Beschreibung des Tabellenkopfs muss sich innerhalb der Tags befinden

und überall, aber außerhalb des Bereichs eines der Tags , oder ... Gemäß der HTML-Sprachspezifikation ist der Speicherort der Titelbeschreibung strenger geregelt: Er muss sich unmittelbar nach dem Tag befinden und vor dem ersten ... Wir empfehlen Ihnen, diese Regel einzuhalten.

Standardmäßig wird der Tabellenkopftext darüber positioniert (ALIGN \u003d TOP) und horizontal zentriert.

Die aufgelisteten Tags können Parameter haben, deren Anzahl und Werte unterschiedlich sind. Im einfachsten Fall werden Tags jedoch ohne Parameter verwendet, die Standardwerte annehmen.

Diese Informationen reichen völlig aus, um Elementartabellen zu erstellen. Lassen Sie uns ein Beispiel für eine einfache Tabelle geben, die aus zwei Zeilen und zwei Spalten besteht, deren Anzeige in Abb. 2 dargestellt ist. 4.3.

Zelle 1 von Zeile 1	Zelle 2 Zeile 1
Zelle 1 von Zeile 2	Zelle 2 Zeile 2

Zahl: 4.Z. Ein Beispiel für die einfachste Tabelle

Tabellen auf einer Seite anzeigen

Betrachten wir den Zweck verschiedener Parameter, die in Tags verwendet werden können, die Tabellen beschreiben.

Tabellenüberschrift

Tabellenkopf-Tag hat den einzigen gültigen Parameter ALIGN, der TOP (Header über der Tabelle) oder BOTTOM (Header unter der Tabelle) sein kann. Der Parameter ALIGN kann weggelassen werden, was dem Wert ALIGN \u003d TOP entspricht. In horizontaler Richtung wird der Tabellentitel immer zentriert. Die Tabelle hat möglicherweise keinen Titel. In den meisten Fällen wird Klartext als Tabellenüberschrift verwendet, die durch die HTML-Spezifikation geregelt wird, in Wirklichkeit jedoch zwischen den Tags und Es ist zulässig, alle im Abschnitt verwendeten HTML-Elemente zu schreiben ... Hier ist ein Beispiel für einen Tabellenkopfeintrag:

Überschrift am unteren Rand der Tabelle

Wenn diese Header-Beschreibung zum obigen Beispiel hinzugefügt wird, wird die Tabelle wie in Abb. 1 dargestellt angezeigt. 4.4.

Zahl: 4.4.Tabelle mit Titel

Microsoft Internet Explorer bietet zusätzliche Optionen zum Auswählen des Speicherorts des Titels. Der Parameter ALIGN akzeptiert die Werte LEFT, CENTER und RIGHT für die horizontale Ausrichtung zusammen mit den oben beschriebenen Werten. Beachten Sie, dass dies einer der seltenen Fälle ist, in denen der häufig verwendete Parameter ALIGN sowohl für die horizontale als auch für die vertikale Ausrichtung verwendet werden kann. Mit ALIGN \u003d RIGHT wird beispielsweise sichergestellt, dass die Überschrift rechts und über der Tabelle positioniert ist. Wenn Sie ALIGN \u003d BOTTOM schreiben, befindet sich der Titel wie im obigen Beispiel unter der Tabelle. Der Parameter ALIGN kann jedoch nicht zweimal im selben Header verwendet werden. Daher wurde zusätzlich ein spezieller Parameter für die vertikale Ausrichtung eingeführt - VALIGN, der die Werte von TOP oder BOTTOM annimmt. Für eine Überschrift am unteren Rand einer Tabelle, die nach links ausgerichtet ist, sieht die Beschreibung beispielsweise folgendermaßen aus:

Linksbündige Überschrift

Die Tabelle mit dieser Beschreibung des Titels in Microsoft Internet Explorer wird wie folgt angezeigt (Abb. 4.5). Wenn dieses Beispiel in Netscape angezeigt wird, wird der Titel standardmäßig über der Tabelle und horizontal in der Mitte platziert.

Zahl: 4.5. Horizontale Ausrichtung des Tabellenkopfs durch Microsoft Internet Explorer

Die Funktionen für die horizontale Ausrichtung des Tabellenkopfs sind eine Erweiterung der HTML-Spezifikation, werden vom Netscape Navigator-Browser nicht unterstützt und sollten nur verwendet werden, wenn dies unbedingt erforderlich ist.

Tag-Parameter

Das Haupt-Tag, das beim Erstellen von Tabellen verwendet wird, ist das Tag

... Es kann mit einer Reihe von Parametern verwendet werden, von denen jeder weggelassen werden kann. Gültige Optionen variieren je nach Browser. Entsprechend der HTML-Spezifikation im Tag Die folgenden Parameter können verwendet werden: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. In den Browsern NetScape und Microsoft Internet Explorer können die Parameter HEIGHT und BGCOLOR zusätzlich zu den fünf aufgeführten Parametern verwendet werden. In bestimmten Browsern können auch andere Parameter eingestellt werden. Schauen wir uns den Zweck häufig verwendeter Tag-Parameter an .

BORDER-Parameter

Der Parameter BORDER steuert die Anzeige eines Rahmens um jede Zelle, der im Wesentlichen die Gitterlinien der Tabelle angibt, und um die gesamte Tabelle. Standardmäßig werden keine Rahmen gezeichnet, und der Benutzer sieht nur den gleichmäßig verteilten Text der Tabellenzellen auf dem Bildschirm. Es gibt viele Situationen, in denen die Verwendung von Tabellen ohne Rahmen durchaus gerechtfertigt ist, z. B. für mehrspaltige Listen, die mithilfe von Tabellen implementiert werden, oder für die Angabe der genauen relativen Position von Abbildungen und Text. In den meisten Fällen ist es für die herkömmliche Verwendung von Tabellen jedoch nützlich, die Zellen durch Gitterlinien voneinander zu trennen, um das Erkennen und Verstehen der in der Tabelle enthaltenen Informationen zu erleichtern.

Um der Tabelle Frames hinzuzufügen, müssen Sie sie in den Code aufnehmen

Ein BORDER-Parameter, der numerisch sein kann.

Beispielsweise,

oder .

Der numerische Wert des Parameters bestimmt die Dicke des Rahmens in Pixel, der um die gesamte Tabelle gezogen wird. Dieser Wert wirkt sich jedoch nicht auf die Dicke der Rahmen um jede Zelle aus. Wenn kein numerischer Wert vorhanden ist, wird normalerweise angenommen, dass er dem Mindestwert (1) entspricht, obwohl die Art der Anzeige von Frames für verschiedene Browser unterschiedlich sein kann. Die Möglichkeit, die Anzeige des Rahmens um die gesamte Tabelle und der Rahmen um Zellen unabhängig zu steuern, ist nicht verfügbar.

Ein Beispiel für eine Tabelle mit einem 10-Pixel-Rand ist in Abb. 1 dargestellt. 4.6.

Zahl: 4.6.Tabelle mit einem 10-Pixel-Rand

Die HTML 3.0-Spezifikation enthielt keinen Wert für den Parameter BORDER. Dies erfolgt nur in HTML 3.2. In früheren Versionen von Microsoft Internet Explorer war es beispielsweise nicht möglich, einen numerischen Wert anzugeben.

Beachten Sie, dass ohne den Parameter BORDER die Frames nicht gezeichnet werden, sondern Platz für sie verbleibt (dies gilt nur für Netscape). Die Gesamtgröße der Tabelle ändert sich bei Fehlen oder Vorhandensein des Parameters BORDER nicht (die Ausnahme ist der Fall, dass BORDER \u003d 0 gesetzt wird). Somit ist der minimale Abstand zwischen zwei benachbarten Zellen in diesen Fällen gleich der doppelten Dicke des Rahmens, dh zwei Pixeln. Es ist möglich, Zellen so nah wie möglich aneinander anzuordnen, indem BORDER \u003d 0 gesetzt wird, was bedeutet, dass keine Grenzen vorhanden sind. Einige Browser unterstützen möglicherweise nicht das Festlegen des numerischen Werts des BORDER-Parameters. Dann wird ein Wert gleich Null ignoriert und die Tabelle wird mit Rahmen gezeichnet.

Hier sind einige Beispiele:

Netscape rendert alle drei Beispiele unterschiedlich. Beachten Sie, dass es hier einen ziemlich einzigartigen Fall gibt, in dem man nicht von einem Standardwert sprechen kann. Das dritte Beispiel, in dem der Parameter BORDER weggelassen wird, unterscheidet sich von jedem Beispiel, in dem dieser Parameter vorhanden ist. Für Microsoft Internet Explorer sind das zweite und dritte Beispiel identisch, sodass der Standardwert für den Parameter BORDER für diesen Browser Null ist.

CELLSPACING-Parameter

Form der Parameternotation: CELLSPACING \u003d num, wobei num der numerische Wert des Parameters in Pixel ist, der nicht weggelassen werden kann. Der num-Wert bestimmt den Abstand zwischen benachbarten Zellen (genauer zwischen Zellenrahmen) sowohl horizontal als auch vertikal. Standardmäßig wird ein Wert von zwei angenommen. Beachten Sie, dass in Veröffentlichungssystemen traditionell benachbarte Tabellenzellen einen gemeinsamen Rand haben. In HTML-Tabellen bleibt standardmäßig Platz zwischen ihnen, wie in der obigen Abbildung deutlich zu sehen ist (Abbildung 4.6). Wenn Sie CELLSPACING \u003d 0 setzen, werden die Ränder benachbarter Zellen zusammengeführt und erzeugen den Eindruck eines einzelnen Rasters der Tabelle (Abb. 4.7).

Zahl: 4.7.Tabelle mit CELLSPACING \u003d 0

CELLPADDING-Parameter

Die Parameternotation ähnelt CELLSPACING. Der num-Wert bestimmt den freien Speicherplatz (Auffüllen) zwischen dem Zellenrand und den Daten in der Zelle. Standardmäßig wird der Wert als eins angenommen. Wenn Sie den Parameter CELLPADDING auf Null setzen, können einige Teile des Zellentextes den Rand berühren, was ästhetisch nicht sehr ansprechend aussieht.

In Abb. 4.8 zeigt ein Beispiel einer Tabelle mit CELLPADDING \u003d 10.

Zahl: 4.8.Tabelle mit CELLPADDING \u003d 10

Die Parameter CELLPADDING und CELLSPACING sind einander sehr ähnlich. Bei einer Tabelle ohne Rahmen führt das Ändern des einen oder anderen Parameters zum gleichen Ergebnis. Beide Parameter wirken sich horizontal und vertikal auf die entsprechende Polsterung aus. Leider werden horizontale und vertikale Ränder getrennt verwaltet, z. B. für Ränder aus Bildern (die HSPACE- und VSPACE-Parameter des Tags) ), nicht vorgesehen.

Alle drei Parameter - BORDER, CELLPADDING und CELLSPACING - wirken unabhängig voneinander. Wenn einer von ihnen weggelassen wird, wird der Standardwert verwendet. Insbesondere wenn alle oben genannten Parameter weggelassen werden, beträgt der Mindestabstand zwischen Daten von benachbarten Zellen 6 Pixel (für Netscape). Dieser Wert besteht aus zwei Pixeln für CELLSPACING, einem Pixel für CELLPADDING und einem Pixel für den Rand jeder Zelle. Die kompakteste Tabelle wird durch Angabe der folgenden Beschreibung erhalten:

Nur in diesem Fall befinden sich die Zellen nahe beieinander. Ein Anwendungsbeispiel ist eine Tabelle, deren Zellen alle Bilder gleicher Größe enthalten, die nebeneinander platziert werden müssen.

Parameter WIDTH und HEIGHT

Wenn Tabellen angezeigt werden, werden ihre Breite und Höhe automatisch vom Browser berechnet und hängen von vielen Faktoren ab: den Werten der in der Beschreibung des gesamten Dokuments angegebenen Parameter, dieser Tabelle, ihren einzelnen Zeilen und Zellen, dem Inhalt der Zellen sowie den Parametern, die beim Anzeigen des Dokuments in einem bestimmten Browser festgelegt werden Beispiel: Schriftart und -größe, Ansichtsfenstergröße usw. Bei der Anzeige werden die Tabellengrößen automatisch unter Berücksichtigung dieser Faktoren berechnet, und es wird versucht, die Tabelle in der bequemsten Form darzustellen - um die Tabelle so anzuordnen, dass sie in das Ansichtsfenster passt. Das allgemeine Schema zum Anzeigen großer Dokumente besteht in der Regel darin, den Inhalt des Dokuments vertikal linear zu scrollen und den Text zu lesen, der mit verschiedenen Tabellen, Bildern usw. durchsetzt ist. Dies gilt sowohl für HTML-Dokumente als auch für normale Dokumente, die in einem beliebigen Texteditor erstellt wurden ... Die meisten Texteditoren (z. B. Microsoft Word) und HTML-Browser formatieren den Text automatisch so (wenn möglich), dass die Linien die Breite des Ansichtsfensters nicht überschreiten. Dadurch wird das horizontale Scrollen des Dokuments vermieden. Ähnliche Aktionen werden von Browsern mit Tabellen ausgeführt. Formatieren Sie sie nach Möglichkeit so, dass die Breite der Tabelle die Breite des Ansichtsfensters nicht überschreitet. Daraus kann geschlossen werden, dass die Breite der Tabellen ein wichtigerer, vorrangiger Parameter ist, dessen Berechnung zunächst im Vergleich zur Höhe durchgeführt wird.

In den meisten Fällen führt die dynamische Größenanpassung der Tabelle zu einem ästhetisch proportionalen Bild mit effizienter Nutzung des tatsächlichen Bereichs des Ansichtsfensters. Es kann jedoch erforderlich sein, die Breite oder Höhe der Tabelle zu erzwingen. Zu diesem Zweck werden die Parameter WIDTH (Tabellenbreite) und HEIGHT (Tabellenhöhe) des Tags verwendet

... Notationsform: WIDTH \u003d num oder WIDTH \u003d num%, wobei num der numerische Wert der Breite der gesamten Tabelle in Pixel oder als Prozentsatz der gesamten Fenstergröße ist. Beachten Sie, dass es zulässig ist, Werte über 100% anzugeben, obwohl es schwierig ist, sich einen Fall vorzustellen, in dem dies erforderlich ist. Beispiel:

.

Ähnliche Parameter können für einzelne Zellen eingestellt werden. Beachten Sie, dass die Angabe eines bestimmten Werts für den Parameter, z. B. WIDTH \u003d 200, nicht bedeutet, dass die Tabelle in jedem Fall die angegebene Breite hat, sondern nur die empfohlene Breite bestimmt, die nach Möglichkeit beibehalten wird. Lassen Sie uns dies anhand von Beispielen erklären. Angenommen, Sie haben eine Tabelle, deren Breite unter diesen Bedingungen standardmäßig geringer als die angegebene ist. In diesem Fall erhöht der Browser die Breite der Tabelle auf die erforderliche Breite, indem alle Spalten der Tabelle proportional erweitert werden. Durch Eingrenzen des Ansichtsfensters wird die Breite der Tabelle nicht geändert, und Sie müssen möglicherweise horizontal scrollen, um sie anzuzeigen. Wenn die Tabelle eine Standardbreite hat, die größer als die angegebene ist, versucht der Browser, ihre Breite zu verringern, indem er zum einen die Breite einzelner Spalten verringert, für die die angegebene Breite größer als die erforderliche ist, und zum anderen den Text in getrennten Zellen in mehrere Zeilen mit aufteilt Erhöhen der Höhe des Tisches. Diese Aktionen bieten möglicherweise nicht die erforderliche Tabellengröße und haben dann die kleinstmögliche Breite. Die gleichen Aktionen werden für Tabellen ausgeführt, für die keine Dimensionen angegeben sind, wenn das Ansichtsfenster eingegrenzt wird.

Bestimmte Algorithmen zum Festlegen von Tabellen für verschiedene Browser können geringfügig abweichen.

ALIGN-Parameter

Der angegebene Tag-Parameter

Definiert die horizontale Position der Tabelle im Ansichtsfenster. Gültige Werte sind LINKS (linksbündig) und RECHTS (rechtsbündig). Standardmäßig sind Tabellen linksbündig ausgerichtet. Beachten Sie, dass die gültigen Werte keinen typischen Wert für den Ausrichtungsparameter CENTER enthalten. Einige HTML-Quellen zitieren in diesem Fall CENTER (Mitte) als gültig. Dies folgt der HTML-Spezifikation, aber in der Praxis implementieren sowohl Netscape Navigator als auch Microsoft Internet Explorer nur zwei Werte. Tatsache ist, dass der Parameter ALIGN im Tag vorhanden ist bestimmt nicht nur die Position der Tabelle, sondern lässt auch Text von der gegenüberliegenden Seite um die Tabelle fließen, ähnlich wie der Bildfluss. Text, der von beiden Seiten um die Tabelle gewickelt wird, ist in keinem Fall vorgesehen. Verwenden Sie für eine genauere Flusskontrolle das Tag
mit dem CLEAR-Parameter auf die gleiche Weise wie für ... Wenn der Parameter ALIGN weggelassen wird, ist der Bereich rechts und / oder links von der Tabelle unabhängig von ihrer Breite immer leer. Wenn für die Tabelle kein Text zum Umbrechen erforderlich ist, können Sie die Position in der Mitte des Ansichtsfensters erreichen. Hierzu kann beispielsweise die gesamte Tabellenbeschreibung in ein Paar von Tags eingefügt werden und.

Hier ist ein Beispiel einer Tabelle mit fließendem Text, deren Anzeige in Abb. 1 dargestellt ist. 4.9.

ein Erwachsener

bevölkerung von St. Petersburg

Abram Alexander Alexei Albert Anatoly Andrei Arkady Boris Vadim Valentinstag Valery Vasiliy Sieger Vitaly Vladimir Vladislav Vyacheslav Gennady George Hermann Gregory Dmitry

Evgeny Efim Ivan Igor Ilya Joseph Konstantin ein Löwe Leonid Michael Nikolay Oleg Paul Peter Roman Semyon Sergei Stanislav Edward Yuri Jacob

Die 43 am häufigsten genannten Namen decken 92% der Stichprobe ab.

Zahl: 4.9. Randlose Tabelle mit fließendem Text

Dieses Dokument besteht aus einer randlosen Tabelle mit dem Ausrichtungsparameter ALIGN \u003d LEFT, mit der der Text nach der Tabelle rechts davon positioniert werden kann. Die Tabelle besteht nur aus einer Zeile, die zwei Zellen enthält. Jede Zelle enthält einen Teil einer ungeordneten Liste

... Die Verwendung einer Tabelle zum Anzeigen einer Liste ist eine Möglichkeit, eine Liste in mehrere Spalten zu erzwingen. Dies wird auch in diesem Beispiel veranschaulicht. Der Text rechts neben der Tabelle passt möglicherweise nicht alle dort, während er nach der Tabelle fortgesetzt wird. Verwenden Sie dieses Beispiel, um die Breite des Browser-Ansichtsfensters zu verringern. Irgendwann wird der gesamte Text am Ende der Tabelle angezeigt. Denken Sie daran, dass Sie den Code verwenden sollten, um den Textfluss entlang der Tabelle gewaltsam zu unterbrechen (wenn der nachfolgende Text beispielsweise nicht logisch mit der Tabelle zusammenhängt und sich darunter befinden sollte)
mit dem Parametersatz CLEAR. Für dieses Beispiel müssen Sie schreiben
oder
... Einige Browser erlauben das Schreiben des CLEAR-Parameters ohne Wert, dies wird jedoch nicht empfohlen. Geben Sie mehrere Zeilenvorschübe an, um dieselbe Aufgabe auszuführen
ohne den Parameter CLEAR (wie im Beispiel vor dem Text, um ihn um mehrere Zeilen nach unten zu verschieben) oder mehrere Codes für den Anfang eines neuen Absatzes

Fehlentscheidung.

Geben wir ein etwas anderes Beispiel für die Erstellung einer solchen Seite, deren Anzeige in Abb. 2 dargestellt ist. 4.10.

Die häufigsten männlichen Namen

erwachsene Bevölkerung von St. Petersburg

Abram Alexander Alexei Albert Anatoly Andrei Arkady Boris Vadim Valentinstag Valery Vasiliy Sieger Vitaly Vladimir Vladislav Vyacheslav Gennady George Hermann Gregory Dmitry

Evgeny Efim Ivan Igor Ilya Joseph Konstantin ein Löwe Leonid Michael Nikolay Oleg Paul Peter Roman Semyon Sergei Stanislav Edward Yuri Jacob

Die präsentierten Daten wurden auf der Grundlage einer Analyse einer repräsentativen Stichprobe erhalten, die Informationen über 5000 in St. Petersburg lebende Männer über 18 Jahre enthielt. Die 43 am häufigsten genannten Namen decken 92% der Stichprobe ab. Die Häufigkeit des Auftretens der anderen Namen überschreitet nicht 0,3%



Zahl: 4.10. Eine randlose Tabelle mit drei Spalten

Im Gegensatz zum vorherigen Beispiel fließt kein Text um die Tabelle. Das gesamte Dokument besteht aus einer Tabelle mit einer Überschrift, die drei Zellen in einer Zeile enthält. Die ersten beiden Zellen wiederholen das vorherige Beispiel vollständig. Die dritte Zelle enthält Text, der den Inhalt der ersten beiden Zellen kommentiert. Hier muss keine erzwungene Textunterbrechung eingestellt werden, wie im vorherigen Fall beschrieben. Der gesamte Text, der sich auf die Tabelle bezieht, sollte sich in der dritten Zelle und im nachfolgenden Text befinden - nach dem Ende der Beschreibung der gesamten Tabelle... Beide Beispiele sehen im Vollbildmodus gleich aus, mit Ausnahme des Titels, der sich im ersten Fall in der Mitte der zweispaltigen Liste und im zweiten in der Mitte aller drei Spalten der Tabelle befindet. Wenn das Ansichtsfenster im letzten Beispiel verkleinert wird, kann jedoch kein Teil des Textes unter die Tabelle verschoben werden, wodurch seine Struktur unterbrochen wird.

Daten in einer Tabelle formatieren

Jede einzelne Zelle in einer Tabelle kann als Bereich für die unabhängige Formatierung betrachtet werden. Alle Regeln, die die Anzeige von Text regeln, können verwendet werden, um den Text innerhalb einer Zelle zu formatieren. Fast alle HTML-Elemente, die im Hauptteil des Dokuments angezeigt werden können, sind in der Zelle zulässig. , einschließlich Tags, die das Layout des Textes steuern -

,
,

---

, Header-Codes - von

Vor

, Zeichenformatierungs-Tags -<В>, , , , , , Tags fügen grafische Bilder ein , Hypertext-Links<А> usw. Wir betonen sofort, dass der Umfang der in einer separaten Zelle angegebenen Tags auf die Grenzen dieser Zelle beschränkt ist, unabhängig vom Vorhandensein des End-Tags. Zum Beispiel, wenn eine Textfarbe in einer Zelle definiert ist - , auch wenn es keinen Abschlusscode gibt Wenn Sie es über mehrere Zellen oder Zeilen der Tabelle positionieren, wird der Text der nächsten Zelle in der Standardfarbe wiedergegeben.

Die folgenden Optionen stehen zum Formatieren von Daten in Tabellenzellen zur Verfügung.

Ausrichtungsoptionen für Zellinhalte sind ALIGN und VALIGN. Kann in Codes verwendet werden , und ... Der horizontale Ausrichtungsparameter ALIGN kann LINKS, RECHTS und MITTE sein (Standard ist LINKS für und ZENTRUM für ). Der vertikale Ausrichtungsparameter VALIGN kann TOP (oben), BOTTOM (unten), MIDDLE (Mitte), BASELINE (Grundlinie) sein. Der Standardwert ist MIDDLE. Durch die Ausrichtung der Grundlinie wird sichergestellt, dass der Text einer einzelnen Zeile in allen Zellen in einer einzelnen Zeile verankert wird. Festlegen von Ausrichtungsoptionen auf Codeebene Definiert die Ausrichtung für alle Zellen einer bestimmten Zeile, während in jeder einzelnen Zelle der Zeile eigene Parameter definiert werden können, die den Effekt der in angegebenen Zeilen überschreiben .

Hier ist ein Beispiel für eine Tabelle, in der die Daten in den Zellen der ersten Spalte nach rechts ausgerichtet sind, die zweite Spalte zentriert ist und die dritte nach links ausgerichtet ist (Standardeinstellung):

Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6

Die Anzeige dieses Beispiels durch den Browser ist in Abb. 2 dargestellt. 4.11.




Zahl: 4.11.Daten in Tabellenzellen ausrichten

Der Parameter NOWRAP deaktiviert die Möglichkeit, Zelltext automatisch in Zeilen aufzuteilen. Kann in Codes verwendet werden , und ... Eine ungerechtfertigte Verwendung dieses Parameters sollte vermieden werden, da dies die Fähigkeit zur dynamischen Größenänderung von Tabellen erheblich beeinträchtigen und deren Wahrnehmung beeinträchtigen kann. In den meisten Fällen reicht es aus, NOWRAP auf einzelne Zellen anzuwenden, die wirklich das Verbot des Zeilenumbruchs in eine neue Zeile erfordern. Das Umbrechen von Wörtern erfolgt nur durch Trennzeichen zwischen Wörtern (Leerzeichen). In einigen Fällen wird der Code eines nicht unterbrechenden Leerzeichens (NonBreaking Space) festgelegt, um das Brechen des Texts an bestimmten Stellen anstelle eines Leerzeichens zu verhindern. Beispiele sind Fälle, in denen eine Lücke nicht empfohlen wird - zwischen einem numerischen Wert und der Maßeinheit eines bestimmten Werts; zwischen dem Nachnamen und den Initialen. Also, der Text 650 km oder Jelzin B.N. Es wird empfohlen, in das Formular zu schreiben650 km und Jelzin B.N.

Die Parameter WIDTH und HEIGHT können in Codes verwendet werden und ... Ihre Syntax ähnelt der Syntax dieser Parameter für das Tag

... Ihr Wert bestimmt die Breite oder Höhe der Zelle, für die diese Parameter geschrieben werden. Die Werte können in Pixel oder als Prozentsatz der Größe der gesamten Tabelle angegeben werden. In Microsoft Internet Explorer kann der WIDTH-Wert nur in Pixel festgelegt werden. Da eine Tabelle eine kohärente Struktur ist, die aus Zeilen und Spalten besteht, wirkt sich das Festlegen der Breite für eine Zelle auf die Breite der gesamten Spalte aus, in der sich die Zelle befindet, und das Festlegen der Höhe auf die gesamte Zeile. Wenn der Breitenwert in einer Spalte nur in einer Zelle angegeben wird, wird dieser Wert zur Breite der gesamten Spalte. Wenn es mehrere solcher Anzeigen gibt, wird der Maximalwert ausgewählt. Die gleichen Eigenschaften gelten für Zeichenfolgen.

Komplexe Tabellen zeichnen sich durch die Notwendigkeit aus, mehrere benachbarte Zellen horizontal oder vertikal zu einer zu kombinieren. Diese Funktion wird mithilfe der in Codes festgelegten Parameter COLSPAN (COLiimn SPANning) und ROWSPAN (ROW SPANning) implementiert

Einstellungen für einzelne Spalten dieser Gruppe werden festgelegt. Darüber hinaus im Tag Bei Bedarf können Ausrichtungsparameter angegeben werden, deren Werte für alle Spalten der angegebenen Gruppe gelten. Im Tag angegebene Parameterwerte , überschreiben Sie Werte aus dem Tag ... Beachten Sie das im Tag In diesem Beispiel fehlt im Gegensatz zum vorherigen der SPAN-Parameter. Hier ist seine Verwendung bedeutungslos, da die Anzahl der Elemente in der Gruppe von denjenigen bestimmt wird, die dem Tag folgen Stichworte ... Daher ein beliebiger Wert des SPAN-Tag-Parameters wird überschrieben.

In Abb. 4.17 zeigt das Ergebnis der Implementierung des obigen Codes sowie eine Variante der Anzeige einer solchen Tabelle mit dem Eintrag RULES \u003d GROUPS im Tag

oder

... Notationsform: COLSPAN \u003d num, wobei num ein numerischer Wert ist, der bestimmt, wie viele Spalten die aktuelle Zelle horizontal erweitern sollen. Die Verwendung des ROWSPAN-Parameters ist ähnlich. Nur hier geben Sie die Anzahl der Zeilen an, die die aktuelle Zelle vertikal erfassen soll. Standardmäßig sind diese Parameter auf eins eingestellt. Die gleichzeitige Einstellung der Werte beider Parameter für eine Zelle ist zulässig. Das korrekte Einstellen der Werte dieser Parameter ist möglicherweise keine sehr einfache Aufgabe, zumal die meisten HTML-Editoren es Ihnen ermöglichen, mit der nachfolgenden Generierung von HTML-Codes nur die einfachsten Tabellen visuell zu erstellen. In Abb. 4.12 zeigt ein Beispiel für die Anzeige einer Tabelle, die mit dem folgenden HTML-Code erhalten wurde: Zelle über zwei Zeilen Zelle über zwei Spalten Zelle 3 Zelle 4 Zelle 5 Zelle 6 Zelle 7 Zahl: 4.12. Tabelle mit Zellen, die mehrere Zeilen oder Spalten umfassen Eine unaufmerksame Einstellung der Werte der Parameter für das Gleiten von Zellen kann zu gegenseitigen Überlappungen und Konflikten führen, bei denen das Ergebnis nicht vorhersehbar ist. Eine typische Verwendung für erweiterte Zellen ist eine gemeinsame Überschrift für mehrere benachbarte Spalten oder Zeilen. Hier ist ein Beispiel für HTML-Code (dessen Anzeige in Abb. 4.13 dargestellt ist), in dem erweiterte Zellen falsch gebildet werden. Zelle 1 Zelle 2 Zelle 3 (verbreitet Ha drei linien) Zelle 4 Zelle 5 Zelle 6 Zelle 7 (verteilt auf zwei Spalten) Zahl: 4.13.Ergebnis falscher Definition erweiterter Zellen (Textüberlagerung) Der Parameter BGCOLOR legt die Hintergrundfarbe für die gesamte Tabelle, einzelne Zeilen oder Zellen fest. Kann in Tags auftreten , , enthält keine Informationen oder ein oder mehrere Leerzeichen, die nicht als Daten behandelt werden. Zellen, die unsichtbare Daten enthalten, können beispielsweise Code oder Zeilenvorschubcode enthalten oder ein beliebiger Text, der der Hintergrundfarbe der Zelle entspricht. Wenn Zellen, die Daten enthalten (auch wenn sie unsichtbar sind), von allen Browsern gleich angezeigt werden, werden leere Zellen unterschiedlich angezeigt. Der Netscape-Browser zeigt keine leere Zelle an, dh der Ort, an dem sich diese Zelle befindet, wird im Gegensatz zu Zellen, die Daten enthalten, mit der Hintergrundfarbe der Seite und nicht mit der Hintergrundfarbe der Zelle gezeichnet. Leere Zellen werden nicht umrandet. Ein Beispiel für eine Tabelle mit einer leeren Zelle ist in Abb. 1 dargestellt. 4.15. Zahl: 4.15. Leere Tabellenzellen werden von verschiedenen Browsern unterschiedlich gerendert Microsoft Internet Explorer zeigt beide Zellen mit der Hintergrundfarbe der Zellen an. Ein Browser wie NSCA Mosaic bietet dem Benutzer die Möglichkeit, die Art der Ausgabe leerer Tabellenzellen durch Auswahl der entsprechenden Optionen zu bestimmen. Wenn Sie diese Funktionen kennen, können Sie Tabellen entwerfen, die unabhängig vom vom Benutzer ausgewählten Browser auf geeignete Weise angezeigt werden. In einigen Fällen reicht es aus, Zellen zu erstellen, die einen einzelnen Code anstelle einiger leerer Zellen enthalten. Daten in Tabellenspalten ausrichten Ein häufiges Problem beim Erstellen von Tabellen ist das Festlegen von Ausrichtungsoptionen für einzelne Zeilen oder Spalten. Um den Inhalt aller Zellen der aktuellen Zeile auszurichten, stellen Sie einfach die erforderlichen Parameter im Code ein ... In den meisten Fällen muss jedoch für alle Elemente in derselben Spalte die gleiche Ausrichtung sichergestellt werden, da die Spalte in den meisten Fällen einheitliche Daten enthält. In früheren HTML-Versionen wurde vorgeschlagen, hierfür den im Tag angegebenen COLSPEC-Parameter (COLumn SPECification) zu verwenden und ... Diese Funktion ist nicht in der HTML-Spezifikation enthalten, wird jedoch sowohl von Netscape als auch von Microsoft Internet Explorer unterstützt. Das Datensatzformular ist das gleiche wie für das Tag , nämlich: BGCOLOR \u003d Wert, wobei der Farbinhalt im RGB-Format oder sein Name als Wert angegeben wird. Beispiel: oder . Verschachtelte Tabellen Einzelne Tabellenzellen können fast alle im Abschnitt zulässigen Sprach-Tags und Daten enthalten Dokument. Insbesondere kann eine andere Tabelle in einer Zelle einer Tabelle platziert werden. Solche Tabellen werden als verschachtelte Tabellen bezeichnet. Die Regeln für ihre Konstruktion unterscheiden sich nicht von der Konstruktion von Tabellen und benötigen keine separate Beschreibung. Beachten Sie nur, dass nicht alle Browser, die Tabellen unterstützen, komplexe Tabellen mit mehreren Verschachtelungsebenen korrekt wiedergeben. Verwenden Sie sie daher mit Vorsicht. Hier ist ein Beispiel für eine Tabelle mit einer Verschachtelungsebene. Städte der Region Leningrad H - Stadtbevölkerung (tausend Einwohner, 1992) P - Entfernung von St. Petersburg (km) Unter St. Petersburg untergeordnete Städte Die Stadt H. P. Zelenegopsk 13.6 50 Kolpino 144.6 26 Kronstadt 45.2 48 Lomonosov 42.0 40 Pawlowsk 25.4 30 Petrodvorets 83.8 29 Puschkin 95.1 24 Sestroretsk 34.9 35 Alle Städte untergeordnet verwaltung Petersburg, haben direkte Stadt telefonnummern. Regionale Städte Die Stadt H. P. Boksitogorsk 21.6 ALIGN \u003d RECHTS\u003e 245 Balkhov 50.3 ALIGN \u003d RECHTS\u003e 122 Bcevolozhsk 32.9 24 Wyborg 80.9 130 Vysotsk 1.0 ALIGN \u003d RECHTS\u003e 159 Gatchina 80.9 46 Iwangorod 11.9 ALIGN \u003d RECHTS\u003e 147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN \u003d RECHTS\u003e 138 Kirishi 53.8 ALIGN \u003d RECHTS\u003e 115 Kirovsk 23.8 55 Lodeinoe Pole 27.3 ALIGN \u003d RECHTS\u003e 244 Lyga 41.8 139 (Tabellenfortsetzung) Die Stadt H. P. Lyuban 4.7 85 New Ladoga 11.2 ALIGN \u003d RECHTS\u003e 141 Erfreulich 22. 9 ALIGN \u003d RECHTS\u003e 40 Pikalevo 25.1 ALIGN \u003d RECHTS\u003e 246 Unterstützung 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN \u003d RECHTS\u003e 145 Svetogorsk 15.8 ALIGN \u003d RECHTS\u003e 201 Schiefer 42.6 ALIGN \u003d RECHTS\u003e 192 Pinery 57.6 81 Tikhvin 72.0 ALIGN \u003d RECHTS\u003e 200 Tosno 33.8 53 W liscelburgh 12.5 64 Zahl: 4.14.Beispiel für verschachtelte Tabellen Das Ergebnis der Anzeige dieses Beispiels ist in Abb. 2 dargestellt. 4.14. Auf den ersten Blick scheint es im Beispiel keine Verschachtelung von Tabellen zu geben. Tatsächlich ist das gesamte Dokument eine randlose Tabelle, die aus einer Überschrift und nur einer Zeile mit fünf Zellen besteht. Die Organisation einer solchen Tabelle dient ausschließlich dem Zweck, Daten auf einer Seite anzuordnen. In der ersten Zelle befindet sich eine weitere Tabelle mit einem eigenen Titel und drei Spalten, gefolgt von Text in der Mitte. Die dritte und fünfte Zelle enthalten auch separate Tabellen. Die zweite und vierte Zelle sind leer, sie enthalten keine Daten und haben einen einzelnen WIDTH-Parameter, der ihre Breite bestimmt. Ihr Zweck ist es, die Einrückung zwischen der ersten und dritten sowie der dritten und fünften Zelle, in der sich die Tabellen befinden, festzulegen. Dies ist eine der möglichen Optionen zum Festlegen einer solchen Einrückung. Eine andere Option ist die Verwendung des Parameters CELLSPACING, der den Abstand zwischen Zellen bestimmt. Dieser Parameter legt jedoch sowohl horizontale als auch vertikale Einrückungen fest, die derzeit nicht erforderlich sind. Außerdem wird eine leere Zelle mit der angegebenen Breite verkleinert, wenn das Ansichtsfenster eingegrenzt wird, im Gegensatz zu dem durch den Parameter CELLSPACING (sowie CELLPADDING) angegebenen Speicherplatz. Verwenden Sie dieses Beispiel, um die Breite des Ansichtsfensters im Browser zu verringern oder, um die gleichen Ergebnisse zu erzielen, die Schriftgröße zu erhöhen, mit der der Text angezeigt wird. Der Abstand zwischen den Tabellen wird auf Null reduziert, sodass alle Informationen so lange wie möglich gleichzeitig angezeigt werden können. Weitere Änderungen beschädigen die Tabelle jedoch nicht, bieten jedoch die Möglichkeit, horizontal zu scrollen. Mit einem ähnlichen Schema können Sie die Platzierung von Informationen organisieren, die nicht nur aus Tabellen, sondern auch aus Bildern, Textfragmenten usw. bestehen. Merkmale von Bautischen In diesem Abschnitt werden einige spezifische Funktionen einzelner Browser sowie einige Feinheiten beim Erstellen und Anzeigen von Tabellen erläutert. Leere Zellen in Tabellen anzeigen Eines der Merkmale der Darstellung von Tabellen durch verschiedene Browser ist die Anzeige leerer Zellen. Gemäß der Sprachbeschreibung sollten alle Browser Zeilen mit leeren Zellen auffüllen, wenn ihre Anzahl in einer Zeile weniger als in anderen Zeilen festgelegt ist. Außerdem können Zellen, die keine Daten enthalten, an einer beliebigen Stelle in der Tabelle gefunden werden. Es wird zwischen leeren Zellen und Zellen unterschieden, die unsichtbare Daten enthalten. In leeren Zellen innerhalb eines Tagspaares und und bestimmte die Ausrichtung und Breite jeder Tabellenspalte. Wenn Sie beispielsweise colspec \u003d "L40 R50 C80" festlegen, wird die Ausrichtung der Daten in Zellen für drei Spalten der Tabelle bestimmt: für die erste Spalte - LINKS, für die zweite - RECHTS und für die dritte - MITTE sowie die Breite jeder Spalte. Da sich HTML weiterentwickelt hat, wurde diese Option eingestellt und ist derzeit nicht Teil der Sprachspezifikation und wird von den meisten Browsern nicht unterstützt. Daher verfügt Netscape Navigator über keine speziellen Tools zur Lösung dieses Problems. Die einzige Möglichkeit besteht darin, entweder die Standardausrichtung zu verwenden oder bei Bedarf die entsprechenden Werte in jeder Zelle festzulegen. Microsoft Internet Explorer verfügt über spezielle Tags - und ... Diese Tags sollten unmittelbar nach der Beschreibung erscheinen vor dem ersten Auftreten des Tags . Tag-Parameter und Es kann SPAN geben, das die Anzahl zusammenhängender Spalten bestimmt, die von den Parameterwerten betroffen sind, und ALIGN, das die horizontale Ausrichtung von Daten in allen Zellen der entsprechenden Spalte (oder Spalten) bestimmt. Gültige Werte für den Parameter ALIGN sind LEFT, RIGHT und CENTER. Der Standardwert für SPAN ist eins. Etikett Außerdem können Sie den Parameter VALIGN einstellen, der die vertikale Ausrichtung von Daten in Zellen bestimmt. Gültige Werte für den Parameter VALIGN sind MIDDLE, TOP und BOTTOM. Unterschied zwischen Tags und liegt in der Tatsache, dass der erste von ihnen neben dem Festlegen der Datenausrichtungsparameter für die Spalten auch mehrere Spalten bedingt zu einer Gruppe zusammenführt. Der Effekt dieser Kombination wird angezeigt, wenn der unten beschriebene Parameter RULES verwendet wird. Standardmäßig werden alle Spalten in einer Tabelle als eine Gruppe betrachtet. Etikett sollte nur verwendet werden, um die Ausrichtung von Daten in einzelnen Spalten einer Gruppe zu definieren. Geben wir ein Beispiel. Angenommen, Sie möchten eine Tabelle mit 6 Spalten erstellen, wobei die Daten in den ersten drei nach rechts und die nächsten drei in der Mitte ausgerichtet sind. Um dieses Problem zu lösen, sollten Sie den folgenden HTML-Code schreiben: (Daten für die Tabelle) Das Ergebnis der Anzeige dieses Codes ist in Abb. 2 dargestellt. 4.16. Zahl: 4.16. Tabelle mit verschiedenen Datenausrichtungsoptionen in Zellgruppen Ein anderes Beispiel. Angenommen, in der vorherigen Tabelle sollten die ersten beiden Spalten rechts und die dritte - in der Mitte - ausgerichtet sein und alle drei Spalten sollten gruppiert sein. Die nächsten drei Spalten müssen ebenfalls gruppiert sein und dieselbe Ausrichtung wie die erste Gruppe haben. Um dieses Problem zu lösen, sollten Sie den folgenden HTML-Code schreiben: (Daten für die Tabelle) In diesem Beispiel nach dem Tag

, woraus Sie die Bedeutung der Gruppierung erkennen können.

Rat

Da der Umfang der Tags

und ist auf den einzigen Browser Microsoft Internet Explorer beschränkt, sollten Sie diese mit Vorsicht verwenden. Die Bequemlichkeit der Verwendung dieser Tags liegt auf der Hand. In der Praxis werden die meisten Tabellen jedoch bei Bedarf mit dem entsprechenden ALIGN-Ausrichtungsparameter für jede Tabellenzelle erstellt. Dies erhöht die Größe des Tabellenquellcodes erheblich, ermöglicht jedoch die Anzeige in jedem Browser.




Zahl: 4.17. Gruppierte Spaltentabelle

Festlegen der Farbe von Tabellenrändern

Mit einigen weiteren Optionen, die nur für Microsoft Internet Explorer spezifisch sind, können Sie die Farbe der Tabellenränder auswählen - BORDERCOLOR, BORDERCOLORLIGHT und BORDERCOLORDARK. Diese Parameter können in Tags festgelegt werden

, ... Der Farbname oder sein Hexadezimalwert kann als Wert für diese Parameter verwendet werden. Der Parameter BORDERCOLOR bestimmt die Farbe aller Tabellenrandelemente, und die beiden anderen Parameter geben die Farbe der einzelnen Rahmenrahmen an, wobei der BORDERCOLOR-Wert überschrieben wird. Mit dem Parameter BORDERCOLORLIGHT werden die linken und oberen Ränder der gesamten Tabelle und dementsprechend die rechten und unteren Ränder jeder Zelle in der angegebenen Farbe gezeichnet. Der zweite Parameter BORDERCOLORDARK legt die Farben der gegenüberliegenden Kanten fest. Aufgrund der Kombination der Wirkung dieser Parameter wirkt die Tabelle etwas höher über der Oberfläche der Seite oder vertieft. Es hängt alles von der gewählten Farbkombination ab.

Hinweis

Der Netscape 4.x-Browser unterstützt auch den Parameter BORDERCOLOR.

Festlegen des Hintergrundbilds für eine Tabelle

Mit Microsoft Internet Explorer (sowie Netscape 4.x) kann der Parameter BACKGROUND das Hintergrundbild für eine Tabelle auf dieselbe Weise wie ein gesamtes HTML-Dokument definieren. Dieser Parameter kann in Tags festgelegt werden

,	und

, , w

Mit Microsoft Internet Explorer können Sie eine Reihe neuer Tags verwenden, um Tabellen zu strukturieren und das Rendern von Frames und Rasterlinien flexibel zu steuern.

Stichworte

, und Legen Sie die Struktur der Tabellenbeschreibung genauer fest und markieren Sie die Tabellenkopfzellen, den Hauptinhalt der Tabelle und die letzte Zeile. Diese Tags können nur in der Beschreibung von Tabellen innerhalb eines Tagspaars angezeigt werden

und	. Tabellenstrukturierungs-Tags

und.

Stichworte und werden verwendet, um die Kopf- und Fußzeile einer Tabelle zu beschreiben. Diese Tags dürfen höchstens einmal in der Tabelle erscheinen. Das Ending-Tag für diese kann weggelassen werden. Die Verwendung dieser Tags ist nützlich, wenn Sie große Tabellen erstellen, die über eine Seite hinausgehen.

Etikett kann in der Beschreibung der Tabelle mehrfach vorkommen, während die Verwendung des Ending-Tags erforderlich ist... Dieses Tag führt die logische Gruppierung von Daten auf dieselbe Weise wie das Tag durch Gruppieren zusammenhängender Spalten.

Wenn Sie neue Tags verwenden, können Sie die Ränder und Gitterlinien der Tabelle flexibler steuern.

Die Steuerung des Zeichnens von Rahmen um die Tabelle erfolgt über den Parameter FRAME des Tags

und Tabellengitterlinien mit dem Parameter RULES. Beispielsweise wird es möglich, nur vertikale Linien zwischen Spalten zu zeichnen und anstelle eines Rahmens um die gesamte Tabelle horizontale Linien am oberen und unteren Rand der Tabelle anzugeben.

Der Parameter FRAME kann folgende Werte annehmen:

• KASTEN oder GRENZE - Der Rahmen wird von allen vier Seiten gezeichnet
• ÜBER - nur von oben
• UNTEN - nur auf der Unterseite
• HSIDES - Die Unter- und Oberseite sind gezeichnet
• VSIDES - Die linke und rechte Seite sind gezeichnet
• LHS - Nur auf der linken Seite
• RHS - Nur auf der rechten Seite
• LEERE - Tisch ohne Außenrahmen

Der Parameter RULES steuert das Zeichnen der internen Gitterlinien der Tabelle und kann die folgenden Werte annehmen:

• ALLES - Alle internen Linien werden gezeichnet
• GRUPPEN - Es werden nur Linien zwischen Gruppen gezeichnet
• REIHEN - Linien sind Trennlinien
• COLS - Zwischen den Spalten werden Linien gezogen
• KEINER - Interne Linien werden nicht gezeichnet

Beispiel:

.

Hinweis

Das Zeichnen von Gitterlinien der Tabelle und der Frames wird nur ausgeführt, wenn der Parameter BORDER tag vorhanden ist

... Wenn dieser Parameter oder sein Nullwert nicht vorhanden ist, fehlen die Gitterlinien und Rahmen für alle Werte der Parameter FRAME und RULES.

Hier ist ein Beispiel für einen vollständigen HTML-Code, der mit den beschriebenen Funktionen eine Tabelle erstellt:

Ein Beispiel für eine flexible Leitungssteuerung
rastertabelle

Spaltenüberschrift 1	Spaltenüberschrift 2	Spaltenüberschrift 3
Daten	Daten	Daten
Daten	Daten	Daten
Daten	Daten	Daten
Daten	Daten	Daten
Daten	Daten	Daten
Daten	Daten	Daten
Ergebnis	Ergebnis	Ergebnis




Zahl: 4.18.Flexibles Zeichnen von Gitterlinien der Tabelle mit dem Microsoft Internet Explorer-Browser

In diesem Beispiel, das vom Browser in Abb. In 4.18 wird eine der möglichen Optionen zum Steuern der Gitterlinien und Ränder um die Tabelle gezeigt. Ein 5-Pixel-Rand wird nur oben und unten um den Tisch gezogen (BORDER \u003d S) (FRAME \u003d HSIDES). Gitterlinien werden innerhalb der Tabelle gezeichnet, um Datengruppen zu trennen (REGELN \u003d GRUPPEN). Datengruppen werden zum einen durch das Vorhandensein von drei Tags definiert , von denen jedes deklariert eine separate Tabellenspalte Gruppe. Zweitens die Tags , und<тгоот> Teilen Sie die Tabellendaten auch in Gruppen ein, wodurch das Zeichnen interner horizontaler Linien bestimmt wird.

Festlegen der Anzahl der Spalten in einer Tabelle

Mit Microsoft Internet Explorer (sowie dem Netscape 4.x-Browser) können Sie das Tag festlegen

Der Parameter COLS, dessen Wert die Anzahl der Spalten in der Tabelle bestimmt. Durch Schreiben dieses Parameters können Sie das Layout der Tabelle beschleunigen, wenn es in einem Browser angezeigt wird, da die Anzahl der Spalten vor dem Laden des Tabellenbeschreibungscodes bestimmt werden kann. Derzeit hat das Aktivieren dieses Parameters keinen Einfluss auf den Fortschritt des Dokumentladens.

Vertikale Ausrichtung von Tabellen

Letzter Tag-Parameter

Nur für Microsoft Internet Explorer spezifisch, ist es VALIGN, das die vertikale Ausrichtung der Tabelle relativ zum Text bestimmt. Die Aktion ähnelt der für Bilder.

Hinweis

Beachten Sie, dass sich die Verwendung desselben Parameters sowohl hinsichtlich des Zwecks als auch hinsichtlich möglicher Werte für verschiedene Tags erheblich unterscheiden kann, selbst für denselben Browser und innerhalb der Sprachspezifikation. Daher ist es unmöglich, eine Übersichtstabelle über die Verwendung verschiedener Parameter außerhalb des Kontextes ihrer Anwendung zu erstellen. Beispielsweise wird der Parameter ALIGN in Tabellen nur auf drei verschiedene Arten verwendet:

• für Tag

Der Parameter ALIGN kann die Werte LINKS oder RECHTS annehmen und bedeutet die Position der Tabelle, die am linken bzw. rechten Rand ausgerichtet ist.

für Tag

,

Der Parameter ALIGN nimmt die Werte TOP oder BOTTOM an und bedeutet die Position des Tabellenkopfs über oder unter der Tabelle.

für Tags

und

Der Parameter ALIGN nimmt die Werte LEFT, RIGHT oder CENTER an und bedeutet, dass der Inhalt der entsprechenden Zelle (n) in der Tabelle horizontal ausgerichtet wird. Alternative zur Tabellenansicht Die Unterstützung von Tabellen ist eine häufige Funktion von Webbrowsern geworden, daher gibt es kaum oder keinen Grund, ihre Verwendung zu vermeiden. Wir werden jedoch mögliche Optionen für alternative Datendarstellungen prüfen, die anstelle von Tabellen oder zusätzlich zu diesen verwendet werden können. Einige andere Methoden, die das Konzept von Tabellen nicht verwenden: Vorformatierten Text verwenden. Diese Technik wurde traditionell in frühen HTML-Versionen verwendet, als es noch keine Tabellenunterstützung gab. Seine Verwendung hat bis heute nicht an Relevanz verloren, da solche Texte von jedem Browser korrekt angezeigt werden, auch von reinen Texten. Verwenden eines Bildes mit einer Tabelle. Die Tabelle kann mit einem beliebigen Texteditor erstellt oder sogar von einem Webbrowser angezeigt und dann als Bild in einem der Grafikformate gespeichert werden. Dies ist nicht die beste Option, da sie die Flexibilität verliert, die Anzeige von Tabellen dynamisch anzupassen. Außerdem muss eine zusätzliche Datei mit einem Bild gespeichert werden, dessen Größe in der Regel auch viel größer ist als der Text, der die HTML-Tabelle beschreibt. Ein möglicher Anwendungsbereich sind Tabellen mit genau definierten Größen, für die die Abhängigkeit der Anzeige von externen Faktoren (Schriftarten, Browser-Betriebsarten usw.) nicht akzeptabel ist. Verwenden von Listen anstelle von Tabellen. In den einfachsten Fällen ist es durchaus möglich, anstelle von Tabellen mit einem der in HTML verfügbaren Listentypen auszukommen. Tabellen vorbereiten Mit jedem Editor können HTML-Tabellen erstellt werden, von denen die meisten über Tools zum visuellen Erstellen von Tabellen verfügen. Lassen Sie uns ein Beispiel für die Vorbereitung einer Tabelle im HotDog Professional-Editor geben. Um eine Tabelle zu erstellen, wählen Sie einfach das Element Tabellen aus dem Menü Einfügen aus. Anschließend wird das in Abb. 1 gezeigte Dialogfeld angezeigt. 4.19. Das Erstellen einer Tabelle besteht darin, die entsprechenden Felder im Fenster auszufüllen. Nachdem Sie die Anzahl der Zeilen und Spalten in der Tabelle festgelegt haben, können Sie die einzelnen Zellen der Tabelle direkt ausfüllen, die im selben Dialogfeld angezeigt werden. Das Dialogfeld verfügt über eine Schaltfläche Vorschau, mit der Sie die resultierende Tabelle mit dem integrierten Browser anzeigen können (Abb. 4.20). Zahl: 4.19. Dialogfeld zum Erstellen von Tabellen Zahl: 4.20. Tabelle mit dem eingebauten Browser angezeigt Klicken Sie nach Abschluss der Datenvorbereitung für die Tabelle auf die Schaltfläche OK. Anschließend wird der generierte Tabellenbeschreibungscode in das bearbeitete HTML-Dokument eingefügt. Für das in Abb. 4.19 wird folgender Code generiert: (Teil des Codes weggelassen) Kopf des Tisches Spalte 1 Spalte 2 Spalte 3 Spalte 4 1 2 3 4 In ähnlicher Weise wird diese Aufgabe mithilfe der Netscape Composer-Komponente des Netscape Communicator-Programms gelöst. In Abb. 4.21 zeigt ein Dialogfeld, in dem Sie die erforderlichen Felder ausfüllen müssen. Zusätzliche Tag-Parameter eingeben Zusätzliche HTML-Schaltfläche wird bereitgestellt. Nachdem Sie die Felder des Dialogfelds ausgefüllt haben, sollten Sie auf die Schaltfläche Übernehmen klicken. Anschließend haben Sie die Möglichkeit, die Tabellenzellen auszufüllen (Abb. 4.22). Zahl: 4.21. Dialogfeld "Netscape Composer-Tabellenparameter" Zahl: 4.22. Anfangsposition des Eingabecursors in einer leeren Tabelle Eine Aufgabe Erstellen Sie eine Tabelle und geben Sie ihre Parameter (Ränder und Abstand zwischen Zellen) durch Stile an. Entscheidung Eine Tabelle besteht aus Zeilen und Spalten von Zellen, die Text und Bilder enthalten können. Verwenden Sie das Tag, um einer Webseite eine Tabelle hinzuzufügen ... Dieses Element dient als Container für Elemente, die den Inhalt der Tabelle definieren. Jede Tabelle besteht aus Zeilen und Zellen, die mit Tags entsprechend festgelegt werden und ... Die Tabelle muss mindestens eine Zelle enthalten (Beispiel 1). Erlaubt anstelle von Tag Tag verwenden ... Text in einer Zelle, die mit einem Tag verziert ist , vom Browser fett und zentriert in der Zelle angezeigt. Ansonsten werden die Unterschiede zwischen Zellen über Tags erstellt und Nein. Beispiel 1. Erstellen einer Tabelle HTML5 IE Cr Op Sa Fx Zelle 1 Zelle 2 Zelle 3 Zelle 4 Die Reihenfolge der Zellen und ihr Aussehen ist in Fig. 4 gezeigt. 1. Zahl: 1. Ergebnis der Erstellung einer Tabelle mit vier Zellen Das Rahmenattribut des Tags es darf nur mit einem leeren Wert hinzugefügt werden ( ) oder gleich 1. Alle anderen Werte werden nicht validiert. Die Eigenschaft padding style wird verwendet, um die Ränder innerhalb der Zellen zu steuern, die dem td-Selektor hinzugefügt werden. Der Abstand zwischen Zellen wird durch die Randabstandseigenschaft (Beispiel 2) geändert, die der Tabellenauswahl hinzugefügt wurde. Der IE-Browser versteht ihn erst seit Version 8.0. Beispiel 2. Felder in Zellen HTML5 CSS 2.1 IE Cr Op Sa Fx Überschrift 1 Überschrift 2 Zelle 3 Zelle 4 Eine Tabelle mit Feldern und Abständen zwischen Zellen ist in Abb. 1 dargestellt. 2. Ein ähnliches Ergebnis kann mit einem weißen Rand um die Zellen erzielt werden. Zahl: 2. Felder in Tabellenzellen Webdesigner wurden populär und verwendeten hauptsächlich die Tabellenlayoutmethode und erzielten sehr gute Ergebnisse. Tags zum Erstellen einer Tabelle in HTML tabelle - Erforderliches Tag zum Öffnen und Schließen der Tabelle bildbeschriftung - Ein optionales Tag, das den Titel der Tabelle angibt th - ein optionales Tag, in dessen öffnenden und schließenden Tags der Spaltenname geschrieben ist. In der Regel fett hervorgehoben tr - ein erforderliches Tag, von dem aus die Zeile geöffnet und geschlossen wird td - ein erforderliches Tag, das das Öffnen und Schließen einer Zelle in einer Reihe angibt Beispielcode für eine einfache Tabelle Tabellenname Spalte 1 Spalte 2 Text in der ersten Zelle Text in der zweiten Zelle Der Browser wird angezeigt Zweck von Tabellen in HTML Die Tabellenkalkulationsstunde ist sehr wichtig! Dank Tabellen können Sie nicht nur Text, sondern auch Bilder, Links und vieles mehr anordnen. In der Tabelle können Sie einstellen hintergrund (oder seine Farbe), einzug, breite, rand und andere Parameterdas wird ihm ein schönes Aussehen geben. Tabelle - Ihr erster Schritt zum Verständnis web-Design! Zuvor waren viele Websites vollständig als Tabellen angelegt, dh alles, was der Benutzer sah (Seitenmenü, oberes Menü, Inhalt), war der Inhalt der Zellen einer großen Tabelle. In diesem Sinne gehen wir direkt zu den Attributen, die die Tabelle schön machen ... Eigenschaften und Parameter von HTML-Tabellen: Einzug, Breite, Hintergrundfarbe, Rahmen (Rahmen) Haben tabellen-Tag Es gibt die folgenden Attribute: breite - Tischbreite. kann in Pixel oder% der Bildschirmbreite angegeben werden. bgcolor - Hintergrundfarbe der Tabellenzellen hintergrund - füllt den Hintergrund der Tabelle mit einem Bild rand - Rahmen und Ränder in der Tabelle. Die Dicke wird in Pixel angegeben cellpadding - Auffüllen in Pixel zwischen dem Zelleninhalt und seinem inneren Rand Schreiben Sie den Wert des Attributs nach wie vor in Anführungszeichen. Betrachten wir die Anwendung dieser Attribute anhand eines Beispiels. Erstellen Sie dazu eine Tabelle (aber bereits ohne die extrem selten verwendeten Untertitel und th Tags) und setzen Sie den Parameter auf das Attribut grenze (Grenze), width (Breite der Tabelle, Zeile oder Zelle) und bgcolor (Zellfarbe) Infolgedessen zeigt der Browser eine Tabelle der folgenden Form an rahmen - Ein Attribut, das einen Rand um die Tabelle kennzeichnet. Es gibt folgende Werte: Nichtig - kein Rahmen, oben - nur der obere Rahmen, unten - nur der untere Rahmen, hsides - nur obere und untere Rahmen, vsides - nur linker und rechter Rahmen, lhs - nur linker Rand, rhs - nur rechter Rand, Box - alle vier Teile der Box. regeln - Ein Attribut, das die Grenzen innerhalb einer Tabelle zwischen Zellen kennzeichnet. Es gibt folgende Werte: Keine - es gibt keine Grenzen zwischen Zellen, Gruppen - Grenzen nur zwischen Zeilengruppen und Spaltengruppen (wird etwas später besprochen), Zeilen - Grenzen nur zwischen Zeilen, cols - Grenzen nur zwischen Spalten, all - Alle Ränder anzeigen. Betrachten Sie den Beispielcode Spalte 1 Spalte 2 Ergebnis Versuchen wir nun, eine schöne Tabelle zu erstellen. Beginnen wir damit ausrichtung in der Tabelle... Hierzu gibt es folgende bekannte Parameter: ausrichten - Tabellenausrichtung. Es kann links (links), rechts (rechts), Mitte (Mitte) positioniert werden. zellabstand - Abstand zwischen Tabellenzellen. Angegeben in Pixel (Standard 0 Pixel) cellpadding - Auffüllen von Pixeln zwischen dem Zelleninhalt und seinem inneren Rand (standardmäßig 0 Pixel) Betrachten Sie ein Beispiel Spalte 1 Spalte 2 Der Text in der ersten Zelle der ersten Spalte Text in der zweiten Zelle der zweiten Spalte Der Browser zeigt eine zentrierte Tabelle an, die so aussieht Tr-Strings und td-Zellen in HTML-Tabellen Ich möchte Sie noch einmal daran erinnern, dass Tabellen Zeile für Zeile (tr) gebildet werden. Zeilen (tr) enthalten bereits Zellen (td). Wenn Sie einen Parameter für eine Zeichenfolge (tr) festlegen, gilt dieser für alle Zellen (td) in dieser Zeile, wenn für eine bestimmte Zelle, dann nur für sie. In den obigen Beispielen habe ich die Farbe für die Linie angegeben, dieser Parameter wurde für alle Zellen entsprechend verteilt. Für tr- und td-Tags gibt es Folgendes ausrichten - Textausrichtung innerhalb der Zelle. Links ausrichten (links), rechts ausrichten (rechts), zentriert (Mitte) valign - vertikale Ausrichtung des Textes innerhalb der Zelle. Oben (oben), unten (unten), Mitte (Mitte) bgcolor - Legt die Linienfarbe fest breite - Die Spaltenbreite (alle Zellen unten akzeptieren diesen Parameter) wird in Pixel oder in Prozent angegeben, wobei 100% die Breite der gesamten Tabelle ist höhe - Zellenhöhe (alle Zellen in der Zeile akzeptieren diesen Parameter) Stellen Sie sich einen Code vor, bei dem der Inhalt der Zellen (td) an verschiedenen Kanten ausgerichtet ist: in der ersten links, in der zweiten rechts: Spalte 1 Spalte 2 Der Text in der ersten Zelle der ersten Spalte Text in der zweiten Zelle der zweiten Spalte Spalte 1 Spalte 2 Ergebnis Mit Hilfe von Tabellen können Sie eine sehr gute Seite erstellen. Vergessen Sie nicht, dass Sie nicht nur Text in Zellen einfügen können, sondern auch Bilder, Links usw.!) Vielen Dank für Ihre Aufmerksamkeit! Ich hoffe das Material war hilfreich! Kategorien Windows 10 Browser Smartphones Antivirus Auf der Straße Bedingungen Apfel Android Programme Ios Beliebt So verdienen Sie Geld auf einem YouTube-Kanal: Geheimnisse von YouTube-Stars Geld verdienen bei der Verarbeitung So verdienen Sie Geld am Computer Richtige Verbindung und Einrichtung der DVB-T2-Set-Top-Boxen Richtiger Anschluss und Aufbau der DVB-T2-Set-Top-Boxen Abschließend Richtige Verbindung und Einrichtung der DVB-T2-Set-Top-Boxen Drahtlose Lautsprecher JBL GO Black (JBLGOBLK) - Testberichte Hochspannungsdurchführungen vt, vsta, vtb Hochfrequenz-Kommunikationssysteme in der modernen Elektroindustrie Hochfrequenz-Verarbeitungsgeräte Hochfrequenz-Kommunikationssysteme in der modernen Elektroindustrie Hochfrequenz-Kommunikationsgeräte Wir rüsten das Schulradio aus © 2020 Mobil- und Computer-Gadgets Spalte 1 Spalte 2 Der Text in der ersten Zelle der ersten Spalte Text in der zweiten Zelle der zweiten Spalte