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

Tabellen erstellen

Tabellen erstellen

Tabellen im "ursprünglichen" Sinne dieses Wortes beim Erstellen von Webseiten werden natürlich für ihren direkten Zweck verwendet, aber nicht so allgegenwärtig, wie sie für das Seitenlayout verwendet werden. Mit Hilfe von ihnen ist die Seite der Website in mehrere Teile unterteilt, wobei die Anzahl der Teile nicht begrenzt ist. Zusammen mit ihrer großen Positionierungsmöglichkeiten, um einen Freund zu triggern und eine große Auswahl an Strukturierung - die Art der Seitenmarkierung mit Tabellen ist das beste Werkzeug für den Webdesigner heute. Es gibt zwei weitere Möglichkeiten, die Seiten zu füllen - mit Design-Tools und mit Frames . Die ersten, die Vorteile in der Benutzerfreundlichkeit haben (Objekte werden vom Benutzer visuell positioniert, ohne die HTML-Sprache zu kennen), haben einen wesentlichen Nachteil - sie erzeugen Seiten nur für eine spezifische Bildschirmerweiterung. Bei anderen Erweiterungen wird die Seite nicht korrekt angezeigt. Mit Frames sind die Dinge noch schlimmer - sie werden von Suchmaschinen nicht "gesehen". Verwenden Sie daher fast immer die tabellarische Methode und schlagen Sie vor, sich diesem Thema mit besonderer Aufmerksamkeit zu nähern.

Tabellen-Tags

Es gibt nur 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 die Zelle in der Tabelle.
  4. <TH> - gibt an, wo sich der Header in der Tabelle befindet.

Das öffnende und schließende Tag wird Container genannt . Container <TD> cell contents </ TD> werden in Container <TR> table row </ TR> eingefügt (beide können beliebig sein), letztere wiederum bereits in der <TABLE> -Tabelle als Ganzes </ TABLE> . Bei Bedarf ändert sich das <TD> -Tag zu <TH>. Es ist so einfach wie eine russische Matroschka. Hier ist ein Beispiel:

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

Das Einfügen einer Tabelle in eine andere Tabelle ist im Container <TD> </ TD> und sonst nichts erforderlich. Beispiel:

.... ein weiterer Tisch .... <TD> <TABLE> einschiebbarer Tisch </ TABLE> </ TD> .... ein weiterer Tisch ......

Im HTML-Code müssen wir jeden Tag aus einer neuen Zeile schreiben. Aber wenn Sie alles in der Form schreiben, die oben angegeben ist, dann werden Sie im Browser nichts sehen. Der Browser "sieht" keine Parameter der Tabelle oder der Tabellen. Sie werden mithilfe von Attributen mit ihren Werten angegeben.

Die Attribute des <TABLE> -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)
  • HEIGHT - die Höhe der Tabelle (der Wert in Pixel ( px ) oder Prozent)
  • ALIGN - Ausrichtung der Tabelle auf der Seite (Werte: links, rechts, Mitte )
  • BORDER - die Dicke des Tabellenrahmens (Wert in px, möglicherweise - null (unsichtbarer Rahmen)
  • BORDERCOLOR - legt die Farbe des Tabellenrahmens fest
  • BGCOLOR - Tabelle Hintergrundfarbe
  • HINTERGRUND - legt das Tabellenhintergrundbild fest
  • CELLSPACING - Abstand zwischen Zellen in der Tabelle
  • CELLPADDING - der Abstand zwischen der Zellgrenze und dem Text

Die Attribute des <TD>

Attribute von Tabellenzellen haben dieselben Namen und Dimensionen wie die Tabellen mit dem einzigen Unterschied, dass die letzten beiden Attribute in der Liste (siehe oben) nicht auf sie zutreffen, sondern die vertikalen Ausrichtungsattribute von VALIGN mit top (oben), Mitte (Mitte) und botton (unten) und COLSPAN - die Kombination von Zellen zu einer Gruppe mit einem numerischen Wert gleich der Anzahl der Zellen, die zusammengeführt werden sollen.

Die Attribute des <TR> -Tags

  • BREITE - Breite der Tabellenzeile (Werte in Pixel ( px ))
  • HEIGHT - die Höhe der Tabellenzeile (Werte in Pixel ( px ))
  • REGELN - die Art der internen Zeilen (Werte - alle , Zeilen , Spalten , keine ,
  • FRAME ist das Aussehen der äußeren Linien (die Werte sind Box (alle), links (links), rechts (rechts), oben , unten , links (rechts und links), links (unten und oben), oben )
  • COLGROUP - die Trennlinie zwischen Zellgruppen

Alle oben genannten Attribute auf dieser Seite sollten hinzugefügt werden, damit sie nicht auf einmal auf alle Tags angewendet werden müssen. Sie erhöhen nur die Seitengröße. Sie werden nach Bedarf angewendet.

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

Jetzt machen wir ein einfaches Layout der Seite, um das Material mit der Tabelle zu fixieren. Öffnen Sie einen beliebigen Texteditor. Wenn Sie möchten, dass es bei der Auflösung des Bildschirms 800x600 keine Einrückungen von den Kanten gab, dann schreiben Sie im Tag <BODY> auf:

<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 Bildschirm-Erweiterungsmodi.

Zuordnung:

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