Einzug in einer HTML-Tabelle. Verwendung der Border-Eigenschaft

Wir haben also am meisten mit Ihnen gelernt einfache Schritte, was mit Tabellengrenzen erfolgen kann. Und jetzt sieht der Tisch viel ästhetischer aus. Die Füllung der Zellen ruht jedoch direkt auf den Grenzen. Dies lässt sich leicht beheben, indem man einfach die Zellen in der HTML-Tabelle einrückt. Und dann ist der Text innerhalb des Rahmens, in der Zelle, besser lesbar.

Um eine Zelle einzurücken, verwenden Sie das Attribut Zellpolsterung für Tag

. Es gibt jedoch noch eine andere, vorzuziehende Option: CSS.

In diesem Fall wird die Einrückung über die Eigenschaft festgelegt Polsterung. Mit seiner Hilfe wird es nicht schwer sein, bei Bedarf, also oben, rechts, unten oder links, einzurücken, jeweils mit einer dieser Eigenschaften: Polsterung oben, Polsterung-rechts, Polsterung unten Und Polsterung links.

Sie können genau festlegen, wie viele Pixel die Einrückung betragen soll. Lassen Sie uns ein Beispiel geben, in dem der untere Einzug sein wird 20 Pixel, und der Rest wird es sein 10 . Solch CSS-Der Code sieht so aus:

Td ( padding: 10px; padding-bottom: 20px; )

Und der vollständige Stilcode zu diesem Zeitpunkt:

Tabelle (Rand: durchgehend 1 Pixel blau; Rand-Collapse: Collapse;) td (Rand: durchgehend 1 Pixel blau; Polsterung: 10 Pixel; Polsterung unten: 20 Pixel;)

Ergebnis im Browser:

Zwischenräume zwischen Zellen

In der Regel können Probleme beim Erstellen von Tabellen durch die Verwendung von Tags, Attributen und Eigenschaften gelöst werden, mit denen Sie Rahmen und Einzüge in Zellen erstellen und auch den Farbhintergrund der Zellen selbst festlegen können.

Einzüge in Tabellen finden sich nicht nur innerhalb von Zellen. Sie können auch zwischen den Zellen selbst vorhanden sein.

Es gibt zwei Möglichkeiten, Einzüge zwischen Zellen vorzunehmen:

Attribut verwenden Zellabstand für Tag

verwenden CSS-Eigenschaften Grenzabstand.

Das muss betont werden Grenzabstand wird für die Tabelle als Ganzes angegeben, während die Eigenschaft Polsterung wird direkt für Zellen geschrieben.

Schauen wir uns ein Beispiel an:

Tabelle (Rand: durchgehend 1 Pixel blau; Randreduzierung: getrennt; Randabstand: 5 Pixel;) td (Rand: durchgehend 1 Pixel blau; Polsterung: 10 Pixel; Polsterung unten: 20 Pixel;)

Und das resultierende Ergebnis:

Lassen Sie uns gleich darauf hinweisen, dass Sie nicht versuchen sollten, solche Eindrücke mit zu machen Grenzkollaps: Zusammenbruch. Denn bei dieser Option „kleben“ die Zellen aneinander.

Und um sie voneinander zu trennen, sollten Sie verwenden Grenzkollaps: getrennt. Es ist wichtig zu verstehen, dass dieser Wert der Standardwert ist. Und es wird nur verwendet, um klar zu zeigen, wie dieses Problem gelöst wird. Wenn wir diese Zeile löschen, wird das Ergebnis in Form von voneinander getrennten Zellen gespeichert.

Eine Tabelle ist eines der wichtigsten Werkzeuge zum Erstellen von Webseiten.

Ohne mit CSS, nur mit Hilfe von Tabellen können Sie Seiten mit komplexem Design erstellen. Wenn Sie die Lektionsreihe „Erstellen einer Website – Die ersten Schritte“ abgeschlossen haben, dann verstehen Sie, wovon wir sprechen.

Jede Tabelle besteht aus einer Reihe von Zeilen und Spalten, an deren Schnittpunkt sich Zellen befinden. Zum Beispiel:

Schauen wir uns unsere Tabelle aus einer HTML-Perspektive an:

Die Tabelle selbst wird mithilfe von Tags angegeben

Die Tabelle hat einen Namen - Tags ,

Die Tabelle besteht aus Zeilen - Tags ,

Jede Zeile besteht aus Spalten – Tags ,

Spalten haben Namen in der ersten Zeile – Tags .

Erstellen wir eine Tabelle, in der wir den Schnittpunkt der Zeilen- und Spaltennummern als Inhalt angeben:

Ergebnis:

Wie Sie sehen, ist es nicht sehr schön geworden, wir werden es dekorieren.

HTML-Tabellenparameter: Einzug, Breite, Hintergrundfarbe, Rahmen

Zu diesem Zweck das Tag

Es gibt eine Reihe von Parametern:

Breite- legt die Breite der Tabelle fest (in Pixel oder % der Bildschirmbreite),
bgcolor- legt die Hintergrundfarbe von Tabellenzellen fest,
Hintergrund- füllt den Tabellenhintergrund mit einem Muster,
Grenze- legt einen Rand der angegebenen Breite (in Pixel) um die gesamte Tabelle fest,
Zellpolsterung– legt den Abstand in Pixeln zwischen dem Zellrand und seinem Inhalt fest.

Wenden wir diese Parameter an:

Ergebnis:

Das ist besser, aber unsere Tabelle wird an den linken Rand des Fensters gedrückt, ebenso wie der Text darin. Beheben wir dieses Problem, indem wir drei weitere Parameter hinzufügen:

ausrichten- legt die Tabellenausrichtung fest: links (rechts), rechts (links), Mitte (Mitte),
Zellabstand- legt den Abstand zwischen Tabellenzellen fest (in Pixel),
Zellpolsterung- legt den Abstand zwischen dem Text und dem inneren Rand der Tabellenzelle fest (in Pixel).

Wenden wir diese Parameter an:

Ergebnis:

Bitte beachten Sie, dass die Tabelle doppelte Ränder hat. Wenn Sie angeben Zellenabstand="0", dann nehmen die Grenzen die übliche Form an:

Ergebnis:

Im Allgemeinen sind zwei Parameter für Grenzen verantwortlich:

rahmen- legt die Art des Rahmens um den Tisch fest und kann folgende Werte annehmen:
- Leere- kein Rahmen,
- über- nur der obere Rahmen,
- unten- nur unterer Rahmen,
- Seiten- nur der obere und untere Rahmen,
- im Gegensatz- nur linker und rechter Rahmen,
- lhs- nur linker Rahmen,
- rhs- nur rechter Rahmen,
- Kasten- alle vier Teile des Rahmens.
Regeln- legt die Art der internen Tabellengrenzen fest und kann folgende Werte annehmen:
- keiner- es gibt keine Grenzen zwischen den Zellen,
- Gruppen- Grenzen nur zwischen Gruppen von Zeilen und Gruppen von Spalten (wird etwas später besprochen),
- Reihen- Grenzen nur zwischen Zeilen,
- Spalten- Grenzen bestehen nur zwischen Spalten,
- alle- Alle Ränder anzeigen.

Mithilfe dieser Parameter können Sie die Grenzen nach Ihren Wünschen festlegen. Hier geben wir nur ein Beispiel, experimentieren Sie selbst mit allen.

Ergebnis:

Es ist zu beachten, dass die Grenzen in verschiedene Browser werden etwas anders angezeigt.

HTML-Tags tr und td

Tabellen werden Zeile für Zeile erstellt. Daher erstrecken sich die in der Zeile (tr) angegebenen Parameter auf alle Zellen (td) der Zeile. Strings können drei Parameter haben:

ausrichten- richtet Text in Zellen horizontal aus, kann folgende Werte annehmen: links (rechts), rechts (links), zentriert (Mitte),
valign- richtet Text in Zellen vertikal aus, kann folgende Werte annehmen: oben (oben), unten (unten), zentriert (Mitte),
bgcolor- legt die Farbe der Linie fest.

Schauen wir uns ein Beispiel an:

Breite- legt die Spaltenbreite fest (in Pixel oder als Prozentsatz, wobei 100 % die Tabellenbreite ist),
Höhe– legt die Höhe der Zelle fest und alle Zellen in derselben Zeile erhalten diese Höhe.

Fügen wir beispielsweise unseren Code in den Tags hinzu

Ergebnis:

Es ist zu beachten, dass die Tabelle entsprechend dem Inhalt gebildet wird, wenn Sie die Breite und Höhe nicht festlegen (dies war in den vorherigen Beispielen der Fall).

Diese Lektion ist beendet. Üben Sie das Erstellen und Entwerfen von Tabellen. Diese Fähigkeiten werden Sie in der nächsten Lektion benötigen, in der wir Tabellen mit komplexen Strukturen erstellen.

Mit CSS können Sie nicht nur den Stil des Tabellenrahmens festlegen, sondern auch den Stil der Ränder einzelner Zellen. Da jede Zelle ihre eigenen Ränder hat, ist der Rand zwischen benachbarten Zellen doppelt. Es ist jedoch möglich, die Grenzen benachbarter Zellen zu einer zusammenzufassen. Dafür gibt es eine border-collapse-Eigenschaft. Es werden Werte angenommen:

border-collapse: separat – jede Zelle hat ihren eigenen Rand (Standard)

border-collapse: Collapse – gemeinsame Grenze

border-collapse: inherit – der Wert wird vom übergeordneten Element übernommen

Lassen Sie uns beispielsweise eine Tabelle erstellen und einen Rahmen für die Zellen aller Tabellen festlegen, die auf der Seite angezeigt werden sollen. Lassen Sie uns zunächst nichts ändern, um zu sehen, wie die Tabelle aussehen wird:

Stil:

diese Parameter
1	2	3

1
2
3
4
5
6

Seite

Hausaufgaben.

Auch in dieser Lektion werde ich nicht alles im Detail beschreiben, sondern nur allgemeine Punkte. Schauen Sie sich der Vollständigkeit halber das Beispielergebnis an.

Erstellen Sie drei Tabellen, die jeweils aus einer Zeile und drei Spalten (Spalten) bestehen.
Platzieren Sie in der ersten Tabelle den Header oder „Header“ der Seite (nicht zu verwechseln mit dem „Header“ des HTML-Dokuments), in der zweiten das linke und rechte Menü sowie den Hauptinhalt (Inhalt). im dritten - die Fußzeile oder „Fußzeile“ der Seite.
Lassen Sie die Breite der ersten und letzten Spalte jeder Tabelle fest.
Wichtig. Tag verwenden nur um vier horizontale Menüschaltflächen im Seitenkopf zu erstellen. In anderen Fällen lassen Sie die Bilder im Hintergrund, und in den zweiten Zellen der Tabellen werden nur Farben verwendet, und in der ersten und letzten Tabelle ist es #99FF99.
Lassen Sie den Seiteninhaltstext auf beiden Seiten der Tabellenzelle ausgerichtet und der Titel zentriert sein.
Was die Abstände zwischen den Tabellenzellen sowie die Zelleinzüge betrifft, überlegen Sie selbst, wo diese vollständig entfernt und wo vergrößert werden sollen.

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 - erforderliches Tag, den Tisch öffnen und schließen
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

HTML-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 Web-Design! 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)

HTML-Tabelle

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 Frame,
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

HTML-Tabelle

Stobets 1	Stobets 2

Ergebnis

Versuchen wir nun, einen schönen Tisch zu erstellen. 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

HTML-Tabelle

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- Die Spaltenbreite (alle Zellen darunter akzeptieren 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:

HTML-Tabelle

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!