Einzug zwischen Zellen CSS. Verhalten leerer Zellen

Abschnitte der Website

Wahl des Herausgebers:

Grenze

Eine Eigenschaft wird in einem betrachtet und umfasst mehrere Eigenschaften gleichzeitig:

BORDER-STIL
RANDBREITE
RANDFARBE

Es gibt auch eine allgemeine Regel:

table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; )

Ergebnis:

Breite und Höhe
(Tischhöhe und -breite)

Werte:

Beispiel:

Textausrichtung
(horizontale Ausrichtung)

Werte:

Mitte (Mitte)
links (am linken Rand entlang)
rechts (rechter Rand)
ausrichten (Breite)

vertikal ausrichten
(vertikale Ausrichtung)

Werte:

Grundlinie (entlang der Grundlinie)
sub (als Subindex)
super (wie superindex)
oben (entlang der Oberkante)
Mitte (in der Mitte)
unten (entlang der Unterkante)
% (der Zeilenabstandshöhe)

Beispiel:

Polsterung
(interne Einzüge in der Tabelle)

Hintergrundfarbe (Hintergrund)
Farbe (Textfarbe)

CSS-Tabellenlayout

Dank eine große Anzahl Eigenschaften von Tischen und Variationen in ihrem Design, Tische für eine lange Zeit waren einige Standards für das Webseitenlayout. Wenn Sie die Ränder der Tabelle unsichtbar machen, können Sie ihre einzelnen Zellen als separate Blöcke der Seite verwenden: Kopfzeile, Menü, Fußzeile usw.

Dies ist jedoch nicht ganz richtig, da jedes Tag seinen eigenen Zweck hat und die Tabellen nicht für das Seitenlayout verwendet werden sollten. Das Fehlen einer Alternative veranlasste Designer jedoch, diese spezielle Layoutmethode zu verwenden.

Jetzt gibt es einen anderen Weg – die Verwendung von Ebenen, die bei dieser Art von Arbeit mit einer Webseite nach und nach Tabellen ersetzt haben. Doch auch in unserer Zeit verwenden einige Designer erfolgreich das tabellarische Layout.

Tabellarisches Layout mit zwei Spalten

Eine der gebräuchlichsten Layoutmethoden ist zweispaltig, d.h. Die Seite ist in zwei Teile gegliedert.

Normalerweise befindet sich auf der linken Seite das Menü und zusätzliche Elemente, und die rechte Seite ist die Hauptseite für den Hauptinhalt.

In diesem Fall wird die Breite des linken Teils auf einen bestimmten Wert eingestellt, d.h. starr, und die rechte Seite nimmt den restlichen Bereich der Seite ein.

In diesem Fall müssen Sie die Gesamtbreite der gesamten Tabelle (Tabellen-Tag) in Prozent über die Eigenschaft „Breite“ (100 %) festlegen und für die erste Zelle (Tag „td“) die Breite (auch die Eigenschaft „Breite“) in Pixel festlegen oder Prozentsätze.

Beispiel: Legen Sie den Hauptrahmen der Seite aus zwei Spalten fest: die erste – mit einer festen Größe, die zweite – für den verbleibenden Bereich des Browsers. Schließen Sie die Aufgabe mit CSS-Stilen ab ()

Ausführung:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </tr> </Tabelle> ...

...

Ergebnis:

Versuchen wir nun, zwei Spalten der Tabelle optisch voneinander zu trennen.

Beispiel: Legen Sie unterschiedliche Zellhintergründe fest (um zwei Spalten voneinander zu trennen) und legen Sie den Abstand zwischen den Spalten fest (Trennzeichen).

Ausführung:
Fügen wir neue Stileigenschaften hinzu:

/* für die linke Zelle */ td#left( Breite: 200 Pixel; Hintergrund: #ccc; Rand: 1 Pixel durchgehend schwarz; /* markiert vorübergehend die Ränder */ ) /* für die rechte Zelle */ td#right( Hintergrund: #fc3; border:1px solid black; /* markiert vorübergehend die Ränder */ ) /* für den Teiler */ #razdel( width: 10px; /* Abstand zwischen den Spalten */ )

Alles zusammen:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "razdel" > <td id = "right" > 2</td> </tr> </Tabelle>

Für das Trennzeichen wurde eine neue Zelle hinzugefügt.
Ergebnis:

Das Trennzeichen zwischen den Spalten kann auch weniger hervorgehoben werden. Dazu verwenden wir Rahmenstile.

Beispiel: Erstellen Sie eine Trennlinie zwischen Tabellenspalten, indem Sie eine gepunktete Linie verwenden, die benachbarte Zellen begrenzt

Ausführung:
Fügen wir neue Randeigenschaften für Zellen hinzu:

/* für die linke Zelle */ td#left( width:200px; Hintergrund: #ccc; /* Hintergrundfarbe der linken Spalte */ /* neu */ border-right: 1px dashed #000; /* Rechter gestrichelter Rand Optionen */ )

Alles zusammen:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </tr> </Tabelle>

Ergebnis:

Tabellenlayout mit drei Spalten

Es gibt das Konzept eines festen oder „fließenden“ Layouts.

CSS-Layout korrigiert

Bei der Verwendung festes Layout Die Breite der gesamten Tabelle wird in Pixel angegeben, und dann hat die Tabelle unabhängig von der Auflösung des Monitors und des Browserfensters immer die gleiche Breite.
In diesem Fall Auch die Breite der übrigen Spalten sollte festgelegt werden.
Sie können die Breite einer Zelle nicht angeben, diese wird dann automatisch anhand der Größe der übrigen Zellen und der gesamten Tabelle berechnet.

Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein festes Tabellenlayout:

linke Spalte – 150 Pixel;
mittlere Spalte – 400 Pixel;

Ausführung:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle>

Ergebnis:

Gummimodell

Tischbreite bei Verwendung der „Gummi“-Ausführung Wird als % der Breite des Browserfensters festgelegt. Das. Wenn sich das Browserfenster ändert, ändert sich auch die Tabellengröße.
Breite aller Zellen installiert werden kann in Prozent.
Die zweite Option ist wann Breite einiger Zellen ist installiert in Prozent, A einige - in Pixel.

Wichtig: Die Summe der Breiten aller Spalten sollte 100 % betragen, unabhängig von der Breite der Tabelle.

Beispiel:

linke Spalte - 20 %;
mittlere Spalte - 40 %;
rechte Spalte – 40 %;

Legen Sie einen Hintergrund für die Spalten fest und trennen Sie die Spalten optisch durch einen Rahmen.

Ausführung:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle>

Ergebnis:

Betrachten wir die zweite Option, bei der die Breite der zentralen Spalte automatisch vom Browser ausgewählt wird; Ein Beispiel ist die folgende Abbildung:

Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein flüssiges Tabellenlayout:

linke Spalte – 150 Pixel;
mittlere Spalte - 40 %;
rechte Spalte – 200 Pixel;

Legen Sie einen Hintergrund für die Spalten fest und trennen Sie die Spalten optisch durch einen Rahmen.

Ausführung:

</Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle>

Ergebnis:
Das Ergebnis wird ungefähr das gleiche sein, nur dass es aufgrund der Mittelsäule zu einer „Dehnung“ kommt.

Verwendung einer verschachtelten Tabelle in einem fließenden Layout

Wenn die Breite von zwei Spalten in Prozent und die der dritten in Pixel angegeben wird, kommt man mit nur einer Tabelle nicht aus. Wenn also die Breite der gesamten Tabelle 100 Prozent beträgt, die erste Spalte 200 Pixel und die übrigen Spalten 20 Prozent, dann ergibt eine einfache Berechnung, dass die Größe der ersten Spalte 60 Prozent beträgt. In diesem Fall wird der angegebene Wert in Pixel vom Browser nicht akzeptiert und die Größe wird in Prozent angegeben.

Die ursprüngliche Tabelle wird mit zwei Zellen erstellt. Die Tabellenbreite wird in Prozent eingestellt.
Für die linke Zelle(erste Spalte) Breite ist eingestellt in Pixel.
Rechte Zellenbreite(Basis für andere Spalten) nicht angegeben. In diese Zelle wird eine zweite Tabelle eingefügt, die ebenfalls aus zwei Zellen besteht.
Bei verschachtelten Tabellenzellen wird die Breite als Prozentsatz festgelegt.
Die Breite der inneren Tabelle sollte auf 100 Prozent eingestellt sein sodass diese Tabelle den gesamten freien Platz in der externen Tabelle einnimmt.
Die Breite der mittleren und rechten Spalte wird relativ zur Breite der Zelle berechnet, nicht der äußeren Tabelle als Ganzes.

Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein flüssiges Layout mit verschachtelter Tabelle:

linke Spalte – 150 Pixel;
mittlere Spalte - 60 %;
rechte Spalte – 40 %;

Legen Sie den Hintergrund für die Spalten fest.

Ausführung:

Die Tag-Attribute „cellpadding“ und „cellspacing“ sind hier notwendig, um sicherzustellen, dass zwischen den Tabellen keine „Lücke“ entsteht.
Ergebnis:

Gibt den Abstand zwischen Zellrändern in einer Tabelle an. Das Attribut „border-spacing“ funktioniert nicht, wenn für die Tabelle der Parameter „border-collapse“ auf „collapse“ gesetzt ist.

Syntax

border-spacing: Wert [Wert]

Argumente

Ein Wert legt sowohl den vertikalen als auch den horizontalen Abstand zwischen den Zellrändern fest. Wenn es zwei Argumente gibt, bestimmt das erste den horizontalen Abstand und das zweite den vertikalen Abstand.

Grenzabstand

1	2
3	4

Ergebnis dieses Beispiel weder in Abb. dargestellt. 1.

Reis. 1. Anwenden des Randabstandsparameters

Notiz

Wenn markiert werden soll

Wenn der Parameter „cellspacing“ hinzugefügt wird, wird er bei Verwendung des Attributs „border-spacing style“ nicht berücksichtigt und der Wert „cellspacing“ wird ignoriert. Eine Ausnahme von dieser Regel ist Internetbrowser Explorer, der die Border-Spacing-Eigenschaft überhaupt nicht versteht.

Tische

border-collapse legt fest, wie Ränder um Tabellenzellen angezeigt werden. Dieser Parameter spielt eine Rolle, wenn ein Rahmen für die Zellen installiert wird. An der Verbindungsstelle der Zellen erhalten Sie eine Linie mit doppelter Dicke. Durch das Hinzufügen des Collapse-Werts wird der Browser gezwungen, ähnliche Stellen in der Tabelle zu analysieren und Doppelzeilen daraus zu entfernen.

Tabellenlayout gibt an, wie der Browser die Höhe und Breite von Tabellenzellen basierend auf deren Inhalt berechnen soll.

Der Randabstand gibt den Abstand zwischen den Rändern der Zellen in der Tabelle an. Das Attribut „border-spacing“ funktioniert nicht, wenn für die Tabelle der Parameter „border-collapse“ auf „collapse“ eingestellt ist.

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; )

A Vollständiger Code Stile in dieser Phase:

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 daraus 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.

Wir haben bereits herausgefunden, dass HTML-Tabellen vorhanden sind Rahmen, obwohl Browser sie standardmäßig nicht anzeigen. Aber das ist noch nicht alles, jede Tabellenzelle hat auch einen Rahmen namens Zellrand. Aber das ist noch nicht alles: Die Verwendung spezieller Tag-Attribute

Sie können die Abstände zwischen Zellen und zwischen Zellen und dem Tabellenrahmen sowie den Innenabstand von den Rändern der Zellen bis zu ihrem Inhalt ändern.

HTML-Tabellenrahmen, Zellränder, Abstände zwischen ihnen und Polsterung.

Also für einen Rahmen erstellen HTML-Tabellen und Grenzen seiner Zellen Es wird nur ein Tag-Attribut verwendet

- Grenze. Der Attributwert ist eine nicht negative Ganzzahl (standardmäßig Null), die die Größe in Pixel darstellt. Beachten Sie jedoch, dass sich die Größe nur am Tabellenrahmen ändert; an den Zellrändern bleibt sie immer unverändert.

...

Zu ändern Abstände zwischen Zellen(ihre Grenzen) und von den Zellen bis zum Rahmen Tabellen im Tag

Das Attribut „cellspacing“ wird angewendet. Seine Werte können auch nur Zahlen sein, die Abstände in Pixeln messen.

...

Intern installieren Auffüllen von Zellrändern bis zum Inhalt im Tag erforderlich

Verwenden Sie das cellpadding-Attribut. Und seine Werte sind Zahlen, die die Pixelabmessungen angeben.

...

Bitte beachten Sie, dass Browser standardmäßig kleine Werte (zwei Pixel) für Zellabstand und Zellpadding festlegen. Um den Abstand vollständig zu entfernen, setzen Sie die Attribute auf Null (0).

Beispiel für HTML-Tabellenränder, -rahmen und -abstände

Tischränder, Rahmen und Polsterung

Zelle 1.1	Zelle 1.2	Zelle 1.3
Zelle 2.1	Zelle 2.2	Zelle 2.3
Zelle 3.1	Zelle 3.2	Zelle 3.3

Tabelle, in der nur Zellränder und Ränder festgelegt sind:

Zelle 1.1	Zelle 1.2	Zelle 1.3
Zelle 2.1	Zelle 2.2	Zelle 2.3
Zelle 3.1	Zelle 3.2	Zelle 3.3

Ergebnis im Browser

Tabelle mit geänderten Einzügen und Abständen:

Natürlich ist es nicht notwendig, einen Rahmen und Zellränder auf der Tabelle zu zeichnen, um die inneren Einzüge und Abstände zwischen den Zellen zu ändern.

Gemäß der HTML-Syntax fügen Browser die Cellspacing- und Cellpadding-Werte zu den Abmessungen der Tabelle und ihrer Zellen hinzu. Wenn Sie beispielsweise die Zellenbreite auf 100 Pixel und cellpadding="10" festlegen, addieren Browser 20 Pixel zur Breite (jeweils 10 links und rechts) und ergeben 120 Pixel. Im Allgemeinen werden Sie es im Laufe der Zeit herausfinden.

Exkurs vom Thema oder wie man Einrückungen an den Seitenrändern entfernt

Zunächst installieren alle Browser kleine Ränder an den Rändern der HTML-Seite, die oft unnötig sind. Jetzt erfahren Sie, wie Sie diese entfernen. Im Allgemeinen sollten diese Informationen am Anfang des Lehrbuchs platziert werden, aber dort wäre es für Sie kaum von Nutzen.

Rechtzeitig am Tag Es gab vier Attribute, die die Größe dieser Ränder für jede Seite der Seite festlegten: topmargin (oben), rightmargin (rechts), bottommargin (unten) und leftmargin (links). Jetzt sind diese Attribute veraltet, daher werden wir Stile (CSS) verwenden. Sie können die Randabstände an den Rändern der Seite also auf verschiedene Arten ändern. Ich zeige Ihnen zwei, und Sie werden etwas über die dritte erfahren, wenn Sie sich entscheiden, CSS zu lernen.

Methode eins. Im Tag Geben Sie das Stilattribut mit den folgenden Werten an:

style="margin:0" >...

- Entfernt Einzüge von allen Seiten der HTML-Seite gleichzeitig.

Stil= „Rand:oben rechts unten links“>...

- Passt die Größe der Einzüge für jede Seite im Uhrzeigersinn an. In der Regel werden Größen in Pixel verwendet, zum Beispiel: style= "margin:5px 3px 4px 5px" >...

Der zweite und bequemere Weg. Im Tag

Hausaufgaben.

Auch in dieser Lektion werde ich nicht alles im Detail beschreiben, sondern nur allgemeine Punkte. Um das Bild zu vervollständigen, schauen Sie sich 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 Schaltflächen zu erstellen horizontales Menü in der Kopfzeile der Seite. 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.

Hallo. Eine Tabelle als Element hat ihre eigenen Eigenschaften, die sie stark von den Blöcken unterscheiden, die vielen bekannter sind. Heute möchte ich darüber sprechen, wie der Abstand zwischen Tabellenzellen in CSS geschrieben wird.

Unterschiede zum Blockmodell

Um den Abstand zwischen Blöcken festzulegen, werden normalerweise Außenränder verwendet, bei Zellen funktioniert dies jedoch nicht. Interne Einzüge für Zellen können angegeben werden, externe Einzüge jedoch nicht.

Dies scheint ein kleines Problem zu sein, aber standardmäßig liegen die Zellen in der Tabelle nicht nahe beieinander, sondern mit kleinen Einzügen, was nicht immer notwendig ist. Wie entferne ich sie?

Grenzabstandseigenschaft

Eine Eigenschaft, die Abhilfe schafft, ist eine Eigenschaft, die in CSS speziell für Tabellendaten verwendet wird – border-spacing . Wie der Name schon sagt, definiert es den freien Platz (Ränder) jeder Zelle.

Wichtiger Punkt: Der Randabstand muss für die gesamte Tabelle festgelegt werden. Das heißt, so:

Tisch(
Randabstand: 0;
}

Mit dieser Regel entfernen wir den Abstand zwischen den Zellen und nun werden sie fest aneinander gepresst. Dementsprechend können Sie diesen Abstand bei Bedarf in Pixeln einstellen.

Es mag etwas ungewöhnlich sein, eine Eigenschaft für einen Tabellenselektor festzulegen, aber es ist eine Funktion der Tabelle, man muss sie sich nur merken. Die Eigenschaft funktioniert nicht, wenn die Tabelle auch auf border-collapse:collapse gesetzt ist. In diesem Fall werden die äußeren Ränder der Zellen automatisch entfernt und es ist kein Randabstand erforderlich.

Veraltete Methode zum Festlegen von Zellrändern

Zuvor hierzu zum Tag

Sie fügten das Attribut „cellspacing“ hinzu, das die Einrückung festlegte, aber heute wird die Verwendung dieser Methode nicht empfohlen. Dadurch wird der Code unübersichtlich und entspricht nicht den modernen Webentwicklungsstandards.

Der Punkt ist, dass sich die Einrückung darauf bezieht Aussehen Element, und HTML ist für diesen Zweck völlig ungeeignet. Die Standards besagen eindeutig, dass CSS dafür verantwortlich sein soll.

Wie Sie sehen, kann der Abstand zwischen Tabellenzellen in CSS ganz entfernt oder über die Eigenschaft gesteuert werden Grenzabstand. Das ist alles für heute. Wenn Sie sich für das Thema Website-Erstellung interessieren, melden Sie sich an, um über neue Materialien auf der Website informiert zu werden.

Lesen:

Ursachen für Fehlfunktionen auf dem Motherboard Wenn der Chipsatz auf dem Motherboard durchbrennt Verwenden von Stilen in Excel So erstellen Sie Ihren eigenen neuen Stil Welche Fehler treten bei der Installation auf? Sozialer Status einer Person in der Gesellschaft Vollständige Interpretation von Fehlern