This page has been robot translated, sorry for typos if any. Original content here.

Erstellen Sie Tabellen

Erstellen Sie Tabellen

Tabellen im "ursprünglichen" Verständnis des Wortes bei der Erstellung von Web-Seiten natürlich für ihren beabsichtigten Zweck verwendet, aber nicht so allgegenwärtig wie sie für das Seitenlayout verwendet werden. Mit ihnen ist die Seite der Website in mehrere Teile unterteilt, wobei die Anzahl der Teile nicht begrenzt ist. Zusammen mit ihren großen Positionierungsmöglichkeiten für Freunde und einer großen Auswahl an Strukturierungen ist die Art, Seiten mit Tabellen zu markieren, das beste Werkzeug für den Webdesigner heute. Es gibt zwei weitere Möglichkeiten, die Seiten zu füllen - mit Konstruktoren und mit Frames . Die ersten, die Vorteile in der Benutzerfreundlichkeit haben (Objekte werden vom Benutzer visuell ohne Kenntnis der HTML-Sprache positioniert), haben einen wesentlichen Nachteil - sie erzeugen Seiten nur für eine spezifische Bildschirmerweiterung. Bei anderen Erweiterungen wird die Seite falsch angezeigt. Bei Frames ist es noch schlimmer - Suchmaschinen "sehen" sie nicht. Verwenden Sie daher fast immer die tabellarische Methode und schlagen Sie vor, dass Sie diesem Thema mit besonderer Aufmerksamkeit begegnen.

Tabellen-Tags

Es gibt vier Tags zum Erstellen von Tabellen. Sie müssen es auswendig wissen:

  1. <TABLE> - gibt an, dass auf der Seite eine Tabelle erstellt wird.
  2. <TR> - bildet eine Zeile in der Tabelle.
  3. <TD> - bildet eine Zelle in der Tabelle.
  4. <TH> - gibt an, wo in der Tabelle der Titel steht.

Das öffnende und schließende Tag wird Container genannt . Container <TD> content cells </ TD> werden in Container <TR> table row </ TR> eingefügt (beides können beliebig viele sein), letztere wiederum bereits in der <TABLE> -Tabelle als Ganzes </ TABLE> . Bei Bedarf wird das Tag <TD> in <TH> geändert . Alles ist einfach, wie die "Russische Nistpuppe". Hier ist ein Beispiel:

<TAB> <TR> <TD> <TD> </ TR> <TR> <TD> <TD> </ TD> </ TD> </ TD> </ TD> </ TD> </ TD> </ TD> </ TD> </ TD>

Sie müssen die Tabelle innerhalb einer anderen Tabelle in den <TD> </ TD> Container einfügen und sonst nichts. Beispiel:

.... eine andere Tabelle .... <TD> <TABLE> Tabelle wird eingefügt </ TABLE> </ TD> .... eine andere Tabelle ......

Zur Vereinfachung müssen Sie im HTML-Code jedes Tag aus einer neuen Zeile schreiben. Aber wenn Sie alles in das obige Formular schreiben, werden Sie nichts im Browser sehen. Der Browser "sieht" keine Parameter der Tabelle oder der Tabellen. Sie werden mithilfe von Attributen mit ihren Werten festgelegt.

Attribute des <TABELLE> -Tags

Attribute für das <TABELLE> -Tag werden benötigt, um das Aussehen der Tabelle (Dimensionen, Farbe, Dicke der Linien) sowie die Position der Tabelle auf der Seite zu bestimmen. Unten ist eine Liste von ihnen:

  • BREITE - Breite der Tabelle (Wert in Pixeln ( px ) oder Prozent)
  • HÖHE - Höhe der Tabelle (Wert in Pixeln ( px ) oder Prozent)
  • ALIGN - Ausrichtung der Tabelle auf der Seite (Werte: links, rechts, Mitte )
  • BORDER - die Dicke des Rahmens der Tabelle (der Wert in px, möglicherweise - Null (unsichtbarer Rahmen)
  • BORDERCOLOR - definiert die Farbe des Tabellenrahmens
  • BGCOLOR - Tabelle Hintergrundfarbe
  • HINTERGRUND - legt das Tabellenhintergrundbild fest
  • CELLSPACING - der Abstand zwischen Zellen in der Tabelle
  • CELLPADDING - der Abstand zwischen dem Rand der Zelle und dem Text

Attribute des <TD> -Tags

Tabellenzellenattribute haben dieselben Namen und Dimensionen wie Tabellen mit dem einzigen Unterschied, dass die letzten beiden Attribute in der Liste (siehe oben) nicht auf sie zutreffen, aber die vertikalen Zellenattribute von VALIGN mit den Werten von top (oben) und Mitte hinzugefügt werden. (Mitte) und Botton (unten) und COLSPAN - Zusammenführen von Zellen zu einer Gruppe mit einem numerischen Wert, der der Anzahl der verbundenen Zellen entspricht.

Attribute des <TR> -Tags

  • BREITE - Breite der Tabellenzeile (Werte in Pixel ( px ))
  • HEIGHT - Höhe der Zeile der Tabelle (Werte in Pixel ( px ))
  • REGELN - Art der internen Linien (Werte - alle (alle), Zeilen (horizontal), Spalten (vertikal), keine (keine)
  • FRAME - Art der externen Linien (Werte - Box (alle), links (links), rechts (rechts), oben (oben), unten (unten), links (rechts und links), links (unten und oben), Volid (Nr )
  • COLGROUP - Trennlinie zwischen Zellgruppen

Zu allen oben genannten Attributen auf dieser Seite sollten Sie hinzufügen, dass sie nicht auf einmal auf ein beliebiges Tag angewendet werden müssen, sondern nur die Seitengröße erhöhen. Sie werden nach Bedarf verwendet.

Bei der Konstruktion der Tabellen gibt es ein weiteres Tag <TBODY>. Es ist zum Gruppieren von Tabellenelementen gedacht und ist optional.

Nun erstellen wir ein einfaches Seitenlayout mit einer Tabelle, um das Material zu reparieren. Öffnen Sie einen beliebigen Texteditor. Wenn Sie bei einer Bildschirmauflösung von 800x600 Einrückungen von den Kanten vermeiden möchten, notieren Sie im Tag <BODY> Folgendes:

<BODY leftmargin = "0" topmargin = "0" margin width = "0" marginheight = "0">

Geben Sie als Nächstes im Container <BODY> Folgendes ein:
<TABELLE width = "780" height = "580" border = "0" align = "center"
<TR> <TD colspan = 2 Höhe = "100" bgcolor = "rot" align = "Mitte"> Kopf </ TD> </ TR>
<TR> <TD Breite = "200" bgcolor = "Grau"> Menü </ TR> </ TD>
<TR> <TD width = "580"> Text </ TR> </ TD> </ TABLE>
Speichern und suchen Sie im Browser in verschiedenen Modi der Bildschirmerweiterung.

Aufgabe:

Experimentieren Sie in der Tabelle mit dem Text, richten Sie ihn in Bezug auf verschiedene Zellen unterschiedlich aus und wiederholen Sie dasselbe, aber mit den Tabellen.