Tabellen in HTML sind so funktional, dass Sie sie zum Layouten ganzer Websites (Lesen) verwenden können. Jetzt werden wir über das Einfügen einfacher HTML-Tabellen in eine Webseite sprechen, wobei wir nur das Markup analysieren, aber nicht auf das Design eingehen, da es besser ist, Tabellen mit CSS-Stilen zu dekorieren.

Tabellen-Tags und -Attribute

Hier sind die grundlegenden Elemente, die Sie zum Erstellen von Tabellen benötigen:

• - ein Container, in dem sich der Tisch befindet (dasselbe wie
  für markiert oder
  für nummerierte Listen).
  1. Grenze- ein Attribut, das die Dicke der Rahmen bestimmt. Es ist besser, stattdessen die CSS-Eigenschaft „border“ zu verwenden.

  Gibt die Tabellensignatur an. Sie müssen keinen Container verwenden, aber wenn Sie sich dennoch für einen Titel der Tabelle entscheiden, platzieren Sie ihn direkt nach dem Tag , außerhalb von Zellen und Zeilen.

  - ein gepaartes Tag, das eine Tabellenzeile enthält (Zellen, die sich auf derselben horizontalen Ebene befinden).

  , es werden so viele Zellen darin sein: ein Tag – eine Zelle.

  ermöglicht es Ihnen, Spalten schnell und ohne Verstopfung des Codes zu gruppieren und zuzuweisen allgemeine Merkmale. Mithilfe eines Containers können Sie die logischen Teile einer Tabelle voneinander trennen. Wird nach dem Tag platziert

  , wenn es nicht da ist, dann danach .

  zum gleichen Zweck verwendet wie . enthalten kann , aber nicht umgekehrt.

  Spanne– ein Attribut, das die Anzahl der Spalten angibt, auf die Containereigenschaften angewendet werden

  .

  , Und - Container, mit denen Sie die Tabelle in den oberen Teil (Überschriften), den Hauptteil (Körper) und den unteren Teil (Endteil) unterteilen können. In einer HTML-Tabelle entspricht die Reihenfolge dieser Tags der Reihenfolge der Container , Und

  Tools zur Website-Erstellung

  Zweck	Werkzeug
Markierung	HTML	XHTML
Anmeldung	CSS
Entwicklung	PHP	Python

  Im Browser sieht das Dokument so aus:

  Lassen Sie uns herausfinden, welche Codezeilen wofür verantwortlich sind.

  • - Öffnen Sie den Tisch und geben Sie ihm die Dicke der Rahmen an.
    - Sie haben es betitelt.
    - öffnete die Leitung.
    - Eine Zelle mit Header-Design erstellt.
    - Eine zweite Kopfzelle in der Zeile erstellt. Der Parameter colspan gab an, dass diese Zelle horizontal zwei Zellen umfassen sollte.
    - Leitung geschlossen. Die restlichen Zeilen wurden auf die gleiche Weise erstellt.
    - Eine zweite Zeile der Tabelle mit regulären Zellen anstelle von Kopfzeilen hinzugefügt. Nachfolgende Zeilen und Zellen wurden auf ähnliche Weise eingefügt.

    Tools zur Website-Erstellung

    Zweck	Werkzeug
  Markierung	HTML	XHTML

    - schloss den Tisch.

  Aufgabe

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

  Lösung

  Eine Tabelle besteht aus Zeilen und Spalten von Zellen, die Text und Bilder enthalten können. Um einer Webseite eine Tabelle hinzuzufügen, verwenden Sie das Tag

  . Dieses Element dient als Container für Elemente, die den Inhalt der Tabelle definieren. Jede Tabelle besteht aus Zeilen und Zellen, die jeweils über Tags spezifiziert werden Und

  Quellcode der HTML-Tabelle

  Und

  . Die Tabelle muss mindestens eine Zelle enthalten (Beispiel 1). Erlaubt anstelle von Tag	Tag verwenden	. Text in einer Zelle, der mit einem Tag versehen ist	, wird vom Browser in Fettschrift dargestellt und an der Zellmitte ausgerichtet. Ansonsten werden die Unterschiede zwischen Zellen durch Tags erzeugt	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 Abb. dargestellt. 1. Reis. 1. Ergebnis der Erstellung einer Tabelle mit vier Zellen Rand-Tag-Attribut Es darf nur mit einem leeren Wert hinzugefügt werden ( ) oder gleich 1. Alle anderen Werte werden nicht validiert. Um die Ränder innerhalb von Zellen zu steuern, verwenden Sie die Eigenschaft padding style, 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; der IE-Browser versteht ihn erst seit 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 Eine Tabelle mit Feldern und Abständen zwischen Zellen ist in Abb. dargestellt. 2. Ein ähnliches Ergebnis kann mit einem weißen Rahmen um die Zellen erzielt werden. Reis. 2. Felder in Tabellenzellen Dank der Vielseitigkeit der Tische eine große Anzahl Aufgrund ihrer Parameter, die ihr Aussehen steuern, sind Tabellen längst zu einem festen Standard für die Gestaltung von Webseiten geworden. Eine Tabelle mit einem unsichtbaren Rand sieht so aus, als ob modulares Raster, in deren Blöcken es bequem ist, Webseitenelemente zu platzieren. Dies ist jedoch nicht ganz der Fall der richtige Ansatz, weil jeder HTML-Objekt definiert für eigene Zwecke und wenn es nicht bestimmungsgemäß und überall verwendet wird, bedeutet dies, dass es keine Alternativen gibt. So war es für eine lange Zeit bis Ebenen Tabellen im Website-Layout ersetzten. Das bedeutet nicht, dass heute ständig Ebenen verwendet werden, aber der Trend ist bereits klar erkennbar: Tabellen werden zum Platzieren tabellarischer Daten verwendet, und Ebenen werden für Layout und Design verwendet. Eine Tabelle erstellen Eine Tabelle besteht aus Zeilen und Spalten von Zellen, die Text und Bilder enthalten können. Tabellen werden normalerweise zum Organisieren und Präsentieren von Daten verwendet, aber Tabellen sind nicht darauf beschränkt. Mithilfe von Tabellen ist es praktisch, Seitenlayouts zu gestalten, indem Textfragmente und Bilder in der gewünschten Weise angeordnet werden. Um einer Webseite eine Tabelle hinzuzufügen, verwenden Sie das Tag . Dieses Element dient als Container für Elemente, die den Inhalt der Tabelle definieren. Jede Tabelle besteht aus Zeilen und Zellen, die jeweils über Tags spezifiziert werden Und Bitte beachten Sie, dass sich beim Zusammenführen von Zellen die Anzahl der Elemente in der Zeile ändert. Wenn eine Tabelle beispielsweise drei Spalten mit Zellen hat und wir die erste und zweite Zelle zusammenführen, wird alles innerhalb des Tags definiert diese Zeile Es wird zwei Elemente geben, das erste davon enthält das Attribut colspan="2". Beispiel einer HTML-Tabelle mit zusammengeführten Zellen HTML-Tabellenquellcode mit verbundenen Zellen . Die Tabelle muss mindestens eine Zelle enthalten (Beispiel 12.1). Erlaubt anstelle von Tag Tag verwenden . Text in einer Zelle, der mit einem Tag versehen ist , wird vom Browser in Fettschrift dargestellt und an der Zellmitte ausgerichtet. Ansonsten werden die Unterschiede zwischen Zellen durch Tags erzeugt Und NEIN. Beispiel 12.1. Eine Tabelle erstellen Zelle 1 Zelle 2 Zelle 3 Zelle 4 Die Reihenfolge der Zellen und ihr Aussehen ist in Abb. dargestellt. 12.1. Einfacher HTML-Tabellenquellcode Zelle 1 Zelle 2 Zelle 3 Zelle 4 Zelle 5 Zelle 6 Zelle 7 Zelle 8 Zelle 9 HTML-Tabellenüberschriften Es gibt zwei Arten von Zellen in HTML-Tabellen. Tag definiert eine Zelle regulärer Typ. Wenn eine Zelle als Header fungiert, wird sie mithilfe der definiert. Beispiel-HTML-Tabelle mit Header Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Schlau Rolls-Royce HTML-Tabellenquellcode mit den Headern Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Schlau Rolls-Royce Zellen in einer HTML-Tabelle zusammenführen HTML-Tabellen bieten die Möglichkeit, Zellen horizontal und vertikal zusammenzuführen. Zu Zellen horizontal zusammenführen Verwenden Sie das Attribut colspan=" X" , an der Zelle oder , wo X Zu Zellen vertikal zusammenführen Verwenden Sie das rowspan="-Attribut X" , an der Zelle oder , wo X- Anzahl der zusammenzuführenden Zellen. Zellen können gleichzeitig horizontal und vertikal zusammengeführt werden. Verwenden Sie dazu sowohl das colspan- als auch das rowspan-Attribut für die gewünschte Zelle: Zellentext Nissan Modell Ausrüstung Verfügbarkeit Nissan Qashqai VISIA + TEKNA + Nissan X-Trail ACENTA + CONNECTA - Kopf- und Fußzeilen in HTML-Tabellen HTML-Tabellen können in 3 Bereiche unterteilt werden: Header, Body, Fußzeile. Dies geschieht, indem die Zeilen des ausgewählten Teils der Tabelle mit Tags umschlossen werden. definiert den Kopfbereich, - den Fußbereich, - den Hauptteil der Tabelle. Standardmäßig sind Kopf- und Fußzeilen nicht unterschiedlich gestaltet (dies kann bei Bedarf über CSS erfolgen), können aber von Browsern verwendet werden. Wenn Sie beispielsweise eine mehrseitige Tabelle drucken, können Kopf- und Fußzeilen auf jeder gedruckten Seite dupliziert werden. Die richtige Reihenfolge beim Platzieren von Bereichs-Tags im HTML-Code einer Tabelle ist wie folgt: zuerst die Kopfzeile, dann die Fußzeile und dann den Text. In diesem Fall wird der Hauptteil der Seite zwischen den Kopf- und Fußzeilen angezeigt. Bei Bedarf können Sie der Tabelle eine Signatur hinzufügen. Verwenden Sie dazu das Tag. Beispiel-HTML-Tabelle mit Kopf- und Fußzeilen Quellcode für Tabelle mit Kopf- und Fußzeilen Renault Sandero Stepway-Konfigurationen Merkmal SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R Verfügbarkeit + + + Motorleistung 0,9 (90 PS) 0,9 (90 PS) 1,5 (90 PS) Kraftstoff Benzin Benzin Diesel Toxizitätsstandard 6 Euro 6 Euro 5 Euro Spalten und Spaltengruppen Eine HTML-Tabelle kann mithilfe der Tags und in Spalten und Spaltengruppen unterteilt werden. Mit dieser Unterteilung können Sie mit einer Mindestanzahl Stile für die Tabelle festlegen CSS-Eigenschaften Dadurch wird die Menge an Tabellencode reduziert (anstatt Stile für jede Zelle einer Spalte zu definieren, können Sie Stile für eine oder mehrere Spalten gleichzeitig festlegen). Tags und werden innerhalb des Tags vor den Tags platziert, AKP6 (EDC)	Übertragung

  ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSIV 2E3C AL A	Merkmal
1,5 (90 PS)	1,2 (115 PS)	1,5 (90 PS)	Motorleistung
Diesel	Benzin	Diesel	Kraftstoff
Automatikgetriebe6 (EDC)	Automatikgetriebe6 (EDC)	Automatikgetriebe6 (EDC)	Übertragung

  Tabellen im Site-Seitenlayout

  Auf modernen Websites ist es wichtig, dass Seiten sowohl auf Computern als auch auf Computern korrekt angezeigt werden mobile Geräte. Verwenden Sie Tabellen, um ein Drahtmodell zu erstellen HTML-Seiten nicht ratsam, da die Fähigkeit zur Anpassung von Inhalten an Bildschirme verloren geht verschiedene Größen(Computer, Smartphones, Tablets).

  Tabellengruppen-Tags werden am besten innerhalb einer Seite verwendet, um Inhalte in einem Tabellenformat anzuzeigen.

  Es wurde populär, Webdesigner verwendeten hauptsächlich die Tabellenlayout-Methode und erzielten sehr gute Ergebnisse.

  Tags, die zum Erstellen einer Tabelle in HTML verwendet werden

  Tisch– ein erforderliches Tag, das die Tabelle öffnet und schließt
  Untertitel- optionales Tag, das den Tabellentitel angibt
  Th- ein optionales Tag, dessen öffnendes und schließendes Tag den Spaltennamen enthält. Erscheint normalerweise fett
  tr– ein erforderliches Tag, das die Zeile öffnet und schließt
  td– ein erforderliches Tag, das das Öffnen und Schließen einer Zelle in einer Zeile angibt

  Beispielcode für eine einfache Tabelle

  Tabellenname

  Stobets 1	Stobets 2
Text in der ersten Zelle	Text in der zweiten Zelle

  Der Browser wird angezeigt

  Zweck von Tabellen in HTML

  Der Tischunterricht ist sehr wichtig! Dank Tabellen können Sie nicht nur Texte, sondern auch Bilder, Links und vieles mehr anordnen. In der Tabelle können Sie angeben Hintergrund(oder seine Farbe), Vertiefung, Breite, Grenze Und andere Parameter das wird ihr ein schönes geben Aussehen. Tabelle – Ihr erster Schritt zum Verstehen Webdesign! Früher waren viele Websites vollständig als Tabellen angelegt, d. h. alles, was der Benutzer sah ( Seitenmenü, Hauptmenü, Inhalt) – war der Inhalt der Zellen einer großen Tabelle.
  Kommen wir in diesem Sinne direkt zu den Attributen, die den Tisch schön machen ...

  Eigenschaften und Parameter von HTML-Tabellen: Einrückung, Breite, Hintergrundfarbe, Rahmen (Rahmen)

  U Tisch-Tag Es gibt folgende Attribute:

  Breite- Tischbreite. kann in Pixel oder % der Bildschirmbreite angegeben werden.
  bgcolor- Hintergrundfarbe der Tabellenzellen
  Hintergrund- Füllt den Tabellenhintergrund mit einem Muster
  Grenze- Rahmen und Ränder in der Tabelle. Die Dicke wird in Pixel angegeben
  Zellpolsterung- Abstand in Pixeln zwischen dem Zellinhalt und seinem inneren Rand
  Wie zuvor schreiben wir den Attributwert in Anführungszeichen.

  Schauen wir uns die Verwendung dieser Attribute anhand eines Beispiels an. Erstellen wir dazu eine Tabelle (aber bereits ohne die äußerst selten verwendeten Beschriftungs- und Th-Tags) und legen Sie den Parameter auf das Attribut fest Grenze, width (Breite der Tabelle, Zeile oder Zelle) Und bgcolor (Zellenfarbe)

  Als Ergebnis wird die folgende Tabelle im Browser angezeigt:

  rahmen- ein Attribut, das den Rahmen um den Tisch angibt. Es gibt folgende Werte:

  Nichtig - kein Rahmen,
  oben - nur der obere Rahmen,
  unten - nur unterer Rahmen,
  hsides - nur der obere und untere Rahmen,
  vsides – nur linker und rechter Rahmen,
  links – nur linker Rahmen,
  rhs – nur rechter Rahmen,
  Box - alle vier Teile des Rahmens.

  Regeln– ein Attribut, das die Grenzen innerhalb der Tabelle zwischen Zellen angibt. Es gibt folgende Werte:

  Keine – es gibt keine Grenzen zwischen den Zellen,
  Gruppen – Grenzen nur zwischen Zeilengruppen und Spaltengruppen (wird etwas später besprochen),
  Zeilen – nur Grenzen zwischen Zeilen,
  cols – Grenzen nur zwischen Spalten,
  alle – alle Ränder anzeigen.

  Schauen wir uns das Codebeispiel an

  Stobets 1	Stobets 2

  Ergebnis

  Versuchen wir nun zu erstellen schöner Tisch. Beginnen wir dazu mit der Verwendung Tischausrichtung. Hierzu gibt es folgende bereits bekannte Parameter:

  ausrichten- Tischausrichtung. Es kann links (links), rechts (rechts), in der Mitte (Mitte) platziert werden.
  Zellabstand- Abstand zwischen Tabellenzellen. Angabe in Pixeln (Standard 0 Pixel)
  Zellpolsterung- Abstand in Pixeln zwischen dem Zellinhalt und seinem internen Rand (Standard 0 Pixel)
  Schauen wir uns ein Beispiel an

  Stobets 1	Stobets 2
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-Zeilen und td-Zellen in HTML-Tabellen

  Ich möchte Sie noch einmal daran erinnern, dass Tabellen Zeile für Zeile (tr) erstellt werden. Die Zeilen (tr) enthalten bereits Zellen (td). Wenn Sie einen Parameter für eine Zeichenfolge (tr) angeben, ist dieser gültig für alle Zellen(td) in dieser Zeile, wenn für eine bestimmte Zelle, dann nur für diese. In den obigen Beispielen habe ich die Farbe für die Zeile angegeben; dieser Parameter wurde entsprechend auf alle Zellen verteilt.

  Für tr- und td-Tags gibt es Folgendes

  ausrichten- Ausrichtung von Text innerhalb einer Zelle. Linker Rand (links), rechter Rand (rechts), Mitte (Mitte)
  valign- Vertikale Ausrichtung des Textes innerhalb einer Zelle. Oben (oben), unten (unten), Mitte (Mitte)
  bgcolor- legt die Farbe der Linie fest
  Breite- Spaltenbreite (alle Zellen darunter werden belegt). diesen Parameter) wird in Pixeln oder als Prozentsatz angegeben, wobei 100 % die Breite der gesamten Tabelle ist
  Höhe- Zellenhöhe (alle Zellen in der Zeile akzeptieren diesen Parameter)

  Schauen wir uns den Code an, in dem die Inhalte der Zellen (td) an verschiedenen Kanten ausgerichtet sind: in der ersten nach links, in der zweiten nach rechts:

  Stobets 1	Stobets 2
Text in der ersten Zelle der ersten Spalte	Text in der zweiten Zelle der zweiten Spalte
Stobets 1	Stobets 2

  Ergebnis

  Mithilfe 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 nützlich!

  VERWANDTE ARTIKEL

  • Rückmeldung
  • Sitemap
  • Über die Website

  Stobets 1	Stobets 2
Text in der ersten Zelle der ersten Spalte	Text in der zweiten Zelle der zweiten Spalte

  – ein Tag, der eine Tabellenkopfzelle erstellt. Äußerlich unterscheidet sich sein Inhalt vom Inhalt anderer Zellen – normalerweise vom Text darin	Der Browser markiert es fett und platziert es in der Mitte.	- ein Container, mit dem eine einfache Zelle erstellt wird. Wie viele solcher Tags enthält eine Zeile (tag