Einzug in CSS-Tabelle. Ränder innerhalb von Zellen

Guten Tag. Die Tabelle als Element hat ihre eigenen Eigenschaften, die sie stark von den bekannteren bis zu vielen Blöcken unterscheiden. Heute möchte ich darüber sprechen, wie der Abstand zwischen Tabellenzellen in CSS geschrieben wird.

Unterschiede zum Blockmodell

Um den Abstand zwischen den Blöcken festzulegen, wird normalerweise eine externe Auffüllung verwendet, dies funktioniert jedoch bei Zellen nicht. Zellen können intern, aber nicht extern gepolstert werden.

Dies scheint eine kleine Katastrophe zu sein, aber standardmäßig befinden sich die Zellen in der Tabelle nicht durchgehend, sondern mit kleinen Einrückungen, die nicht immer benötigt werden. Wie entferne ich sie?

Die Randabstandseigenschaft

Die Eigenschaft kommt zur Rettung, die in CSS speziell für tabellarische Daten verwendet wird - Randabstand. Wie der Name schon sagt, definiert er den freien Speicherplatz (Auffüllen) jeder Zelle.

Ein wichtiger Punkt: Die gesamte Tabelle muss den Randabstand festlegen. Das heißt, so:

Tabelle (
Randabstand: 0;
}

Mit dieser Regel entfernen wir den Abstand zwischen den Zellen und jetzt werden sie fest gegeneinander gedrückt. Dementsprechend können Sie diesen Abstand bei Bedarf in Pixel einstellen.

Es mag etwas ungewöhnlich sein, dass eine Eigenschaft für eine Tabellenauswahl festgelegt wird, aber das ist eine tabellenspezifische Funktion. Sie müssen sich nur daran erinnern. Die Eigenschaft funktioniert nicht, wenn die Tabelle auch auf border -apse: kollabieren eingestellt ist. In diesem Fall wird das Auffüllen der Zellen automatisch entfernt, und es ist kein Randabstand erforderlich.

Veralteter Weg, um das Auffüllen von Zellen einzustellen

Zuvor dazu zum Tag

Das Zellabstandsattribut wurde hinzugefügt, das das Auffüllen definierte. Heute wird dies jedoch nicht empfohlen. Dies überfrachtet den Code und entspricht nicht den modernen Webentwicklungsstandards.

Der Punkt ist, dass sich das Auffüllen auf das Erscheinungsbild eines Elements bezieht und HTML für diesen Fall völlig ungeeignet ist. Nach den Standards ist es sicher, dass CSS dafür verantwortlich sein sollte.

Wie Sie sehen können, kann in CSS der Abstand zwischen Tabellenzellen vollständig entfernt oder über die Eigenschaft gesteuert werden randabstand... Das ist alles für heute. Wenn Sie sich für das Thema Site-Erstellung interessieren, abonnieren Sie, um über neue Materialien auf der Site auf dem Laufenden zu bleiben.

Wir haben viele Methoden zum Gestalten von Elementen auf der Seite in Betracht gezogen, z. B. Textinformationen, Links, Bilder, Überschriften, aber all dies reicht noch nicht aus. In meinen Artikeln verwende ich häufig HTML-Elemente wie Tabellen, da dies in den meisten Fällen der Fall ist helfen bei der Organisation wichtiger Informationen und erleichtern die Präsentation.

In diesem Artikel werde ich Sie in die Feinheiten des Stils von HTML-Tabellen einführen und neue CSS-Eigenschaften kennenlernen, mit denen diese Ziele erreicht werden sollen.

Die Hypertext-Markup-Sprache HTML hat uns eine Vielzahl von Möglichkeiten geboten, CSS-Stile an zehn eindeutige Tags zu binden, die für die Arbeit mit Tabellen entwickelt wurden. Ich empfehle, diese vor dem weiteren Studium zu wiederholen:

("Fußzeile" der Tabelle) Hintergrundfarbe - koralle, für Element (Tabelle "Kopf") stellen Sie die Hintergrundfarbe ein silber.

Für Artikel

das sind innerhalb des Elements (Tabellenkörper) Hintergrundfarbänderung beim Hover einstellen (Pseudoklasse: Hover) c weiß pro Farbe khaki (Die gesamte Zeile ist hervorgehoben).

Das Ergebnis unseres Beispiels:

Zahl: 153 Beispiel für das Stylen von Zeilen in Tabellen

Das folgende Beispiel zeigt, wie Eckrundungen auf Tabellenzellen (Eigenschaft) angewendet werden.

) Wir setzen die untere Polsterung auf 19 Pixel. Ich hoffe du bist nicht verwirrt von den ungeraden Zahlen :)

Das Ergebnis unseres Beispiels:

Abstand zwischen Zellen

Nach dem obigen Beispiel haben Sie möglicherweise bemerkt, dass zwischen allen Tabellenzellen eine Lücke besteht. Schauen wir uns an, wie Sie die Lücke zwischen Tabellenzellen entfernen oder vergrößern können.

Um den Abstand zwischen den Rändern benachbarter Zellen festzulegen, müssen Sie die CSS-Eigenschaft - Randabstand - verwenden.

randabstand: 30px 10px;

1	2	3
2
3

randabstand: 0;

1	2	3
2
3

randabstand: 0,2em;

1	2	3
2
3

In diesem Beispiel haben wir:

• float: left). Wenn Sie das Thema schwebende Elemente verpasst haben, können Sie in diesem Tutorial jederzeit darauf zurückgreifen - "".
• Außerdem setzen wir die Tabellenauffüllung rechts auf 30 Pixel und die vertikale Ausrichtung der Tabellen (die Oberseite des Elements ist mit der Oberseite des höchsten Elements ausgerichtet). Wir werden in diesem Artikel ausführlich auf diese Eigenschaft zurückkommen.

) - Fett gedruckt.

Für die Tabellenzellen (Header- und Datenzellen) setzen wir einen 1-Pixel-Rahmen mit der Hex-Farbe # F50 und die Auffüllung für alle Seiten auf 19 Pixel.

Für den ersten Tisch mit Klasse .zuerst Wir setzen den Abstand zwischen Tabellenzellen (Rahmenabstandseigenschaft) für die zweite Tabelle mit der Klasse auf 30px 10px .zweite gleich Null für die dritte Tabelle mit Klasse .dritte gleich 0,2em.

Ich mache Sie darauf aufmerksam, dass, wenn in der Eigenschaft "Randabstand" nur ein Längenwert angegeben ist, dieser den Abstand sowohl horizontal als auch vertikal angibt und wenn zwei Längenwerte angegeben werden, der erste den horizontalen Abstand und der zweite vertikale Wert bestimmt. Der Abstand zwischen den Rändern benachbarter Zellen kann in CSS-Einheiten (px, cm, em usw.) angegeben werden. Negative Werte sind nicht erlaubt.

Das Ergebnis unseres Beispiels:

Ränder um Tabellenzellen anzeigen

Sie können sagen: - Also haben wir den Abstand zwischen den Zellen mithilfe der Eigenschaft "Randabstand" mit dem Wert 0 entfernt. Aber warum schneiden sich jetzt die Ränder der Zellen?

Doppelte Ränder entstehen aufgrund der Tatsache, dass der untere Rand einer Zelle zum oberen Rand der darunter liegenden Zelle hinzugefügt wird. Eine ähnliche Situation tritt an den Seiten der Zellen auf, und dies ist unter dem Gesichtspunkt der Anzeige der Tabelle logisch, aber zum Glück gibt es eine Möglichkeit, dem Browser mitzuteilen, dass wir es sind Wir wollen kein so freches Verhalten der Zellgrenzen sehen.

Dazu müssen Sie die CSS-Eigenschaft zum Reduzieren des Rahmens verwenden. Seltsamerweise ist die Verwendung der Border-Collapse-Eigenschaft mit dem Collapse-Wert der beste Weg, um die Lücke zwischen Zellen zu entfernen und keine doppelten Ränder zwischen ihnen zu erhalten.

Betrachten Sie einen Vergleich des Randverhaltens, wenn Sie die auf 0 festgelegte Eigenschaft für den Randabstand und die auf den Kollaps festgelegte Eigenschaft für den Randkollaps verwenden:

randabstand: 0;

1	2	3
2
3

grenzkollaps: Kollaps;

1	2	3
2
3

In diesem Beispiel haben wir:

• Wir haben unsere Tabellen schwebend und linksbündig gemacht (float: left) und ihre rechte Polsterung auf 30px gesetzt.
• Legen Sie den Tabellennamen (Tag) fest

) - Fett gedruckt.

Für die Tabellenzellen (Header- und Datenzellen) setzen wir einen festen Rand von 5 Pixel mit # F50 hex und legen eine feste Breite von 50 Pixel und eine Höhe von 75 Pixel fest.

Für den ersten Tisch mit Klasse .zuerst Wir setzen den Abstand zwischen Tabellenzellen auf Null (Randabstand: 0;) und für die zweite Tabelle mit der Klasse .zweite Setzen Sie die Eigenschaft border-Collapse auf Collapse, wodurch die Zellränder nach Möglichkeit zu einer zusammengeführt werden.

Das Ergebnis unseres Beispiels:

Verhalten leerer Zellen

Mit CSS können Sie festlegen, ob Rahmen und Hintergründe für leere Zellen in einer Tabelle angezeigt werden sollen oder nicht. Die Eigenschaft "Leere Zellen" ist für dieses Verhalten verantwortlich. Standardmäßig werden, wie Sie möglicherweise aus den vorherigen Beispielen bemerkt haben, leere Zellen angezeigt.

Kommen wir zu einem Beispiel:

leere Zellen: zeigen;

1	2	3
2		☺
3	☺

leere Zellen: verstecken;

1	2	3
2		☺
3	☺

In diesem Beispiel ist es sehr einfach zu verstehen, wie die Eigenschaft "Leere Zellen" funktioniert. Wenn sie ausgeblendet ist, werden leere Zellen und der Hintergrund in ihnen ausgeblendet. Wenn sie (standardmäßig) angezeigt werden, werden sie angezeigt.

Position des Tabellenkopfs

Schauen wir uns eine andere einfache Eigenschaft zum Stylen von Tabellen an - die Untertitelseite, mit der die Position der Tabellenbeschriftung (über oder unter der Tabelle) festgelegt wird. Standardmäßig ist die beschriftungsseitige Eigenschaft auf top gesetzt, wodurch die Beschriftung über der Tabelle platziert wird. Um den Titel unter der Tabelle zu platzieren, müssen Sie die Eigenschaft mit dem unteren Wert verwenden.

Sehen wir uns ein Beispiel für die Verwendung dieser Eigenschaft an:

Über dem Tisch

Name	Preis
Ein Fisch	350 Rubel
Fleisch	250 Rubel

Titel unter der Tabelle

Name	Preis
Ein Fisch	350 Rubel
Fleisch	250 Rubel

In diesem Beispiel haben wir erstellt zwei Klassendie die Position des Tabellenkopfes steuern. Erste Klasse ( .topCaption) setzt den Tabellentitel darüber, wir haben ihn auf die erste Tabelle und die zweite Klasse angewendet ( .bottomCaption) platziert den Tabellentitel darunter, wir haben ihn auf die zweite Tabelle angewendet. Klasse .topCaption hat eine standardmäßige beschriftungsseitige Eigenschaft und wurde zu Demonstrationszwecken erstellt.

Das Ergebnis unseres Beispiels:

Horizontale und vertikale Ausrichtung

In den meisten Fällen müssen Sie beim Arbeiten mit Tabellen die Ausrichtung des Inhalts in Header- und Datenzellen anpassen. Die Textausrichtungseigenschaft wird für die horizontale Ausrichtung ähnlich wie bei allen Textinformationen verwendet. Wir haben die Verwendung dieser Eigenschaft für Text weiter oben im Artikel "" erläutert.

Um die Ausrichtung für den Inhalt in den Zellen festzulegen, müssen Sie spezielle Schlüsselwörter mit der Eigenschaft text-align verwenden. Betrachten wir die Anwendung der Schlüsselwörter dieser Eigenschaft im folgenden Beispiel.

Wert	Beschreibung
links	Richtet den Zellentext nach links aus. Dies ist die Standardeinstellung (wenn die Textrichtung von links nach rechts ist).
richtig	Richtet den Zellentext nach rechts aus. Dies ist die Standardeinstellung (wenn die Richtung des Textes von rechts nach links ist).
center	Richtet den Zellentext an der Mitte aus.
rechtfertigen	Streckt Linien so, dass jede Linie die gleiche Breite hat (streckt den Zellentext entsprechend der Breite).

In diesem Beispiel haben wir erstellt vier Klassendie unterschiedliche horizontale Ausrichtung in Zellen festlegen und diese auf die Tabellenzeilen anwenden. Der Wert in der Zelle entspricht dem Wert der Textausrichtungseigenschaft

Das Ergebnis unseres Beispiels:

Zusätzlich zur horizontalen Ausrichtung können Sie mithilfe der Eigenschaft "Vertikal ausrichten" auch die vertikale Ausrichtung in Tabellenzellen definieren.

Bitte beachten Sie, dass beim Arbeiten mit Tabellenzellen nur die folgenden Werte * dieser Eigenschaft verwendet werden:

* - Die auf eine Tabellenzelle angewendeten Werte sub, super, text-top, text-bottom, length und% verhalten sich so, als würden sie einen Basiswert verwenden.

Schauen wir uns ein Anwendungsbeispiel an:

Wert	Beschreibung
grundlinie	Richtet die Grundlinie der Zelle an der Grundlinie des übergeordneten Elements aus. Dies ist die Standardeinstellung.
oben	Richtet den Inhalt der Zelle vertikal nach oben aus.
mitte	Richtet den Inhalt der Zelle vertikal in der Mitte aus.
unterseite	Richtet den Inhalt der Zelle vertikal nach unten aus.

In diesem Beispiel haben wir erstellt vier Klassendie unterschiedliche vertikale Ausrichtung in Zellen festlegen und diese in der Reihenfolge auf die Tabellenzeilen anwenden. Der Wert in der Zelle entspricht dem Wert der vertikal ausgerichteten Eigenschaft, die auf diese Zeile angewendet wurde.

Algorithmus zum Platzieren des Tabellenlayouts per Browser

CSS verwendet standardmäßig den automatischen Tabellenlayoutalgorithmus des Browsers. In diesem Fall die Spaltenbreite wird durch den breitesten nicht unterbrechenden Zelleninhalt festgelegt... Dieser Algorithmus kann in einigen Fällen langsam sein, da der Browser den gesamten Inhalt der Tabelle lesen muss, bevor er das endgültige Layout festlegt.

So ändern Sie den Platzierungstyp des Tabellenlayouts durch den Browser mit automatisch auf der festmüssen Sie die CSS-Eigenschaft für das Tabellenlayout mit dem festen Wert verwenden.

In diesem Fall hängt die horizontale Platzierung nur von ab von der Breite der Tabelle und der Breite der Spalten und nicht vom Inhalt der Zellen. Der Browser zeigt die Tabelle sofort nach dem Empfang der ersten Zeile an. Infolgedessen können Sie mit dem festen Algorithmus das Layout einer solchen Tabelle schneller erstellen als mit der automatischen Version. Wenn Sie mit großen Tabellen arbeiten, können Sie einen festen Algorithmus verwenden, um die Leistung zu verbessern.

Schauen wir uns die Anwendung dieser Eigenschaft anhand des folgenden Beispiels an:

tabellenlayout: auto;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Weizen	125	215	2540	33287	695878	1222222	125840000	125

tabellenlayout: fest;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Weizen	125	215	2540	33287	695878	1222222	125840000	125

In diesem Beispiel haben wir:

Stylen von Tabellenzeilen und -spalten

Wir haben bereits teilweise auf die Methoden zum Stylen der Zeilen und Spalten der Tabelle im Artikel "" eingegangen. In diesem Artikel haben wir uns mit der Verwendung einer Gruppenpseudoklasse befasst, mit der Sie Zeilenstile in Tabellen mithilfe von Werten abwechseln können sogar (sogar) und seltsam (seltsam) oder durch elementare mathematische Formel.

Lassen Sie uns die vorherigen Techniken erneut betrachten und neue Möglichkeiten zum Stylen von Zeilen und Spalten in Tabellen kennenlernen. Kommen wir zu den Beispielen.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

In diesem Beispiel haben wir:

Das Ergebnis unseres Beispiels:

Fahren wir mit dem nächsten Beispiel fort, in dem wir uns die Optionen zum Stylen von Tabellenzeilen ansehen.

Bedienung	Die Kosten
Menge	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

In diesem Beispiel haben wir:

• Wir setzen die Breite der Tabelle auf 100% der Breite des übergeordneten Elements und setzen einen 1px-Rahmen für den Header und die Datenzellen.
• Für den Artikel installiert

Etikett	Beschreibung
. Definiert den Inhalt der Tabelle. Gibt den Namen der Tabelle an. Definiert die Kopfzelle der Tabelle. Definiert eine Zeile in einer Tabelle. Definiert die Datenzelle der Tabelle. Wird verwendet, um den Gruppenkopf in der Tabelle zu enthalten (Tabellenkopf). Wird verwendet, um den "Körper" der Tabelle zu enthalten. Wird verwendet, um die "Fußzeile" der Tabelle (Fußzeile) zu enthalten. Definiert die angegebenen Spalteneigenschaften für jede Spalte innerhalb eines Tags Definiert eine Gruppe von Spalten in einer Tabelle. Arbeiten mit Tabelleneinzügen Tabelleneinrückungen 1 2 3 4 2 3 4 In diesem Beispiel haben wir: Platzieren Sie den Tisch in der Mitte mit der horizontalen Zentriertechnik mit äußerer Polsterung (Rand: 0 automatisch). Für den Namen der Tabelle (Tag

1	2	3	4	5

In diesem Beispiel haben wir:

• Zentrieren Sie die Tabelle mit Auffüllungen, stellen Sie die Breite und Höhe der Kopfzellen auf 50 Pixel ein transparent Rand 5 Pixel.
• Beim Bewegen des Mauszeigers (Pseudoklasse: Schweben) über die Header-Zelle wird der Hintergrund angezeigt blau Farben, orange Textfarbe, Rand orange Farben 5 Pixel und ein Radius von 100%.
• Transparenter Rand ist notwendig, um Platz für den Rand zu reservieren, der beim Hover angezeigt wird. Andernfalls springt die Tabelle.

Das Ergebnis unseres Beispiels:

Das folgende Beispiel behandelt die Verwendung von HTML-Elementen und und ihr Styling.

Anmeldenummer	Bedienung	Preis, reiben.	Gesamt
1	Singen	6 000	6 000
2	der Abwasch	2 000	2 000
3	Reinigung	1 000	1 000
4	Gezeter	1 500	1 500
5	lesen	3 000	3 000

In diesem Beispiel haben wir:

Das Ergebnis unseres Beispiels:

Nun, und das letzte Beispiel, das ziemlich schwer zu verstehen ist und fortgeschrittene Kenntnisse in CSS erfordert, da es zukünftige Themen berührt, die für ein detailliertes Studium im Rahmen dieses Kurses geplant sind.

Im vorherigen Beispiel haben wir festgestellt, dass das HTML-Element Sie können nur eine CSS-Eigenschaft anwenden, die Hintergrundfarbe, aber Sie können die Hintergrundfarbe nicht direkt auf Hover (die: Hover-Pseudoklasse) für dieses Element festlegen. In diesem Beispiel sehen wir uns an, wie eine Tabellenspalte nur mit CSS hervorgehoben wird.

Anmeldenummer	Bedienung	Preis, reiben.	Gesamt
1	Singen	6 000	6 000
2	der Abwasch	2 000	2 000
3	Reinigung	1 000	1 000
4	Gezeter	1 500	1 500
5	lesen	3 000	3 000

In diesem Beispiel haben wir:

• Wir setzen unsere Tabelle so, dass sie 100% des übergeordneten Elements belegt, Tabellenzellen 25% des übergeordneten Elements belegen und einen durchgehenden grünen Rand von 1 Pixel haben. Die Header und Datenzellen sind 45 Pixel hoch. Wir haben die Lücke zwischen den Zellen mithilfe der Border-Collapse-Eigenschaft mit dem Wert entfernt .
• Fügen Sie daher mit dem Pseudoelement :: after nach jedem Element Inhalt hinzu auf schweben. Das :: after-Pseudoelement wird notwendigerweise in Verbindung mit der content-Eigenschaft verwendet, dank derer wir ein Blockelement einfügen, das eine Hintergrundfarbe hat waldgrün und hat absolute Positionierung.
• Hier ist eine absolute Positionierung erforderlich, um das Element relativ zur angegebenen Kante seines Vorfahren zu versetzen, während der Vorfahr einen anderen Positionswert als den statischen Standardwert haben muss. Andernfalls wird die Anzahl relativ zur angegebenen Kante des Browserfensters angegeben. Aus diesem Grund legen wir dies für die Tabelle fest relative Positionierung (relativ).
• Wir setzen für unseren generierten Block die Eigenschaft top, die die Versatzrichtung des positionierten Elements von der Oberkante angibt, und die Eigenschaft bottom, die die Versatzrichtung des positionierten Elements von der Unterkante angibt. Für beide Eigenschaften wurde der Wert 0 angegeben, sodass der Block das Element vom unteren und oberen Rand der Tabelle vollständig belegt. Die Breite dieses Blocks wurde auf 25% festgelegt. Dieser Wert entspricht der Breite der Zelle selbst.
• Und die letzte Eigenschaft, die wir für diesen Block festlegen: z-Index mit dem Wert "-1" bestimmt die Reihenfolge der positionierten Elemente nach z-Achse... Diese Eigenschaft ist erforderlich, damit sich der Text vor diesem Block und nicht dahinter befindet. Wenn Sie keinen Wert kleiner als Null festlegen, schließt der Block den Text.

Das Ergebnis unseres Beispiels:

Wenn Sie in dieser Phase der Studie den Prozess der Positionierung von Elementen nicht verstehen, lassen Sie sich nicht entmutigen. Dies ist ein schwer zu verstehendes Thema, das wir ebenfalls nicht berücksichtigt haben. Wir werden es jedoch im nächsten Artikel des Tutorials "Positionierung von Elementen in CSS" auf jeden Fall berücksichtigen.

Fragen und Aufgaben zum Thema

Schließen Sie die Übungsaktivität ab, bevor Sie mit dem nächsten Thema fortfahren:

Wenn Sie Schwierigkeiten haben, die Übung abzuschließen, können Sie das Beispiel jederzeit in einem separaten Fenster öffnen und auf der Seite nachsehen, welches CSS verwendet wurde.

2016-2020 Denis Bolshakov können Sie Ihre Kommentare und Vorschläge zur Arbeit der Website an [email protected] senden

Wir haben bereits mit Ihnen herausgefunden, dass HTML-Tabellen vorhanden sind rahmenBrowser zeigen sie jedoch nicht standardmäßig an. Aber das ist noch nicht alles, jede Tabellenzelle hat auch einen Rahmen namens zellgrenze... Aber das ist noch nicht alles, wenn man die speziellen Tag-Attribute verwendet

Sie können den Abstand zwischen Zellen und von Zellen zum Tabellenrand ändern sowie von den Zellenrändern zu deren Inhalt auffüllen.

HTML-Tabellenrahmen, Zellenränder, Abstand und Abstand.

So für rahmenerstellung HTML-Tabellen und die Grenzen seiner Zellen Es wird nur ein Tag-Attribut verwendet

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

...

Für den Wandel abstand zwischen den Zellen (ihre Grenzen) und von den Zellen zum Rahmen Tabellen im Tag

Das Zellenabstandsattribut wird angewendet. Seine Werte können auch nur Zahlen sein, die Entfernungen in Pixel messen.

...

Intern einstellen auffüllen von Zellrändern zu deren Inhalt im Tag benötigt

Verwenden Sie das Cellpadding-Attribut. Und seine Werte sind Zahlen, die Pixelabmessungen darstellen.

...

Beachten Sie, dass Browser standardmäßig kleine Werte (zwei Pixel) für den Zellenabstand und das Auffüllen von Zellen festlegen. Um den Abstand insgesamt zu entfernen, setzen Sie die Attribute auf Null (0).

Beispiel für Rahmen, Rahmen und Auffüllen von HTML-Tabellen

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 der Rand und die Zellenrä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 Einrückungen und Abständen:

Natürlich ist es nicht erforderlich, den Rahmen und die Ränder der Zellen in der Tabelle zu zeichnen, um die Auffüllung und den Abstand zwischen den Zellen zu ändern.

Gemäß der HTML-Syntax fügen Browser den Abmessungen der Tabelle und ihrer Zellen Werte für den Zellenabstand und das Auffüllen von Zellen hinzu. Wenn Sie beispielsweise die Zellenbreite auf 100 Pixel und cellpadding \u003d "10" einstellen, fügen Browser der Breite 20 Pixel hinzu (jeweils 10 links und rechts) und es werden 120 Pixel. Im Allgemeinen werden Sie es auf dem Weg herausfinden.

Abweichung vom Thema oder Entfernen von Auffüllungen an den Seitenrändern

Anfänglich setzen alle Browser kleine Ränder an den Rändern von HTML-Seiten, die häufig nicht erforderlich sind. Jetzt lernen Sie, wie Sie sie entfernen. Im Allgemeinen sollten diese Informationen am Anfang des Lehrbuchs stehen, aber dort wären sie für Sie kaum nützlich.

Zu einer Zeit das Tag Es gab vier Attribute, die die Größe dieser Ränder für jede Seite der Seite festlegten: oberer Rand (oben), rechter Rand (rechts), unterer Rand (unten) und linker Rand (links). Diese Attribute sind jetzt veraltet, daher wenden wir Stile (CSS) an. Es gibt also verschiedene Möglichkeiten, den Abstand des Auffüllens an den Seitenrändern zu ändern. Ich zeige Ihnen zwei und die dritte lernen Sie, wenn Sie sich für CSS entscheiden.

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

style \u003d "margin: 0"\u003e ... - Entfernt Einrückungen von allen Seiten der HTML-Seite gleichzeitig.

stil \u003d "Rand: oben rechts unten links">... - Passt die Größe der Einrückungen für jede Seite im Uhrzeigersinn an. Typischerweise werden Pixelabmessungen verwendet, zum Beispiel: style \u003d "Rand: 5px 3px 4px 5px"\u003e ...

Der zweite und bequemere Weg. Im Tag

Hausaufgaben.

In dieser Lektion werde ich auch nicht alles im Detail beschreiben - nur allgemeine Punkte. Der Vollständigkeit halber siehe das Ergebnis des Beispiels.

1. Erstellen Sie drei Tabellen mit jeweils einer Zeile und drei Spalten.
2. Platzieren Sie die Kopfzeile oder "Kopfzeile" der Seite in der ersten Tabelle (nicht zu verwechseln mit der "Kopfzeile" des HTML-Dokuments), im zweiten - dem linken und rechten Menü - sowie dem Hauptinhalt (Inhalt) in der dritten - Fußzeile oder der "Fußzeile" der Seite.
3. Die Breite der ersten und letzten Spalte jeder Tabelle sei fest.
4. Wichtig. Verwenden Sie ein Tag Nur um vier horizontale Menüschaltflächen in der "Kopfzeile" der Seite zu erstellen. In anderen Fällen sollten sich die Bilder im Hintergrund befinden, und in den zweiten Zellen der Tabellen werden im Allgemeinen nur Farben verwendet, und in der ersten und letzten Tabelle ist es # 99FF99.
5. Lassen Sie den Seiteninhaltstext auf beiden Seiten der Tabellenzelle ausgerichtet und den Titel zentriert sein.
6. Überlegen Sie sich, wo der Abstand zwischen Tabellenzellen sowie die Zelleneinzüge liegen, wo Sie sie vollständig entfernen müssen und wo Sie sie vergrößern müssen.

Die CSS-Spezifikation bietet unbegrenzte Möglichkeiten für die Tabellengestaltung. Standardmäßig haben die Tabelle und die Tabellenzellen keine sichtbaren Ränder und Hintergründe, und die Zellen in der Tabelle liegen nicht nebeneinander.

Die Breite von Tabellenzellen wird durch die Breite ihres Inhalts bestimmt, sodass die Breite der Tabellenspalten unterschiedlich sein kann. Die Höhe aller Zellen in einer Reihe ist gleich und wird durch die Höhe der höchsten Zelle bestimmt.

Formatieren von Tabellen

1. Tabellenrand Grenze

Die Tabelle und die darin enthaltenen Zellen werden standardmäßig im Browser ohne sichtbare Rahmen angezeigt. Tabellenränder durch die Eigenschaft border festgelegt:

Tabelle (Rand-Zusammenbruch: Zusammenbruch; / * Leerzeichen zwischen Zellen entfernen * / Rand: 1px durchgehend grau; / * einen 1px-Außenrand für die Tabelle festlegen * /)

Kopfzellenränder Jede Spalte wird für das th-Element festgelegt:

Th (Rand: 1px durchgehend grau;)

Zellgrenzen Tabellenkörper werden für das td-Element festgelegt:

Td (Rand: 1px durchgehend grau;)

Die Breite der Ränder benachbarter Zellen wird nicht verdoppelt, sodass Sie die Ränder für die gesamte Tabelle folgendermaßen festlegen können:

Th, td (Rand: 1px durchgehend grau;)

Der äußere Rand der Tabelle kann durch Erhöhen der Breite ausgewählt werden:

Tabelle (Rand: 3px durchgehend grau;)

Grenzen können teilweise gesetzt werden:

/ * einen 3px grauen äußeren Rand für die Tabelle festlegen * / table (Rand oben: 3px durchgehend grau;) / * einen 1px grauen Rand für die Tabellenkörperzelle festlegen * / td (Rand unten: 1px durchgehend grau;)

Sie können mehr über die Eigenschaft border lesen.

2. So stellen Sie die Breite und Höhe der Tabelle ein

Default tischbreite und -höhe wird durch den Inhalt seiner Zellen bestimmt. Wenn keine Breite angegeben ist, entspricht diese der Breite der breitesten Zeile (Zeile).

Tabellen- und Spaltenbreite Mit der Eigenschaft width festlegen. Wenn für eine Tabelle eine Tabelle (width: 100%;) angegeben ist, entspricht die Breite der Tabelle der Breite des Containerblocks, in dem sie sich befindet.

Die Breite der Tabelle und der Spalten wird normalerweise in px oder% angegeben, zum Beispiel:

Tabelle (Breite: 600px;) th (Breite: 20%;) td: erstes Kind (Breite: 30%;)

Tischhöhe nicht festgelegt. Die Höhe der Reihen Tabellen können durch Hinzufügen von oberen und unteren Auffüllungen zu Elementen bearbeitet werden und ... Das Festlegen der Höhe mithilfe der Eigenschaft height wird nicht empfohlen.

Th, td (Polsterung: 10px 15px;)

3. So legen Sie den Hintergrund der Tabelle fest

Default tabellenhintergrund und die Zellen sind transparent. Wenn die Seite oder der Block mit der Tabelle einen Hintergrund hat, leuchtet sie durch die Tabelle. Wenn der Hintergrund sowohl für die Tabelle als auch für die Zellen festgelegt ist, ist nur der Hintergrund der Zellen an den Stellen sichtbar, an denen sich der Hintergrund der Tabelle und der Zellen überlappen. Der Hintergrund für die gesamte Tabelle und ihre Zellen kann sein:
füllen,
,
.

4. Tabellenspalten

Das CSS-Tabellenmodell konzentriert sich hauptsächlich auf Zeichenfolgen (Zeilen), die mithilfe eines Tags gebildet werden

... In der Praxis gibt es Zeiten, in denen Sie eine spezielle Spaltenformatierung benötigen, die auf folgende Arten möglich ist:

mit dem Tag

Sie können den Hintergrund für eine beliebige Anzahl von Spalten festlegen.

mit der Tabelle td: first-child, table td: last-child-Selektor können Sie die erste oder letzte Spalte der Tabelle formatieren (mit Ausnahme der ersten Zelle des Tabellenkopfs).

mit der Tabellenauswahl td: nth-child (Spaltenauswahlregel) können Sie beliebige Spalten in der Tabelle formatieren.

Weitere Informationen zu CSS-Selektoren finden Sie hier.

5. So fügen Sie einen Tabellentitel hinzu

Mit dem Tag können Sie der Tabelle einen Titel hinzufügen und mit der beschriftungsseitigen Eigenschaft kann sie vor oder unter der Tabelle platziert werden. Die Textausrichtungseigenschaft wird verwendet, um den Titeltext horizontal auszurichten. Vererbt.

...

Tabelle Nr. 1

Unternehmen	Q1	Q2	Q3	Q4

Beschriftung (Beschriftungsseite: unten; Textausrichtung: rechts; Auffüllen: 10px 0; Schriftgröße: 14px;) Zahl: 2. Ein Beispiel für die Anzeige der Kopfzeile unter der Tabelle

6. So entfernen Sie die Lücke zwischen Zellenrahmen

Standardmäßig sind die Ränder von Tabellenzellen durch ein kleines Leerzeichen getrennt. Wenn wir Border-Collapse: Collapse für die Tabelle festlegen, wird die Lücke entfernt. Die Eigenschaft wird vererbt.

Syntax

Tabelle (Border-Collapse: Collapse;)
Zahl: 3. Ein Beispiel für Tabellen mit zusammengeführten und geteilten Zellenrändern

7. So vergrößern Sie den Abstand zwischen den Zellrändern

Mit der Eigenschaft "Randabstand" können Sie den Abstand zwischen Zellenrändern ändern. Diese Eigenschaft gilt für die gesamte Tabelle. Vererbt.

Syntax

Tabelle (Randkollaps: getrennt; Randabstand: 10px 20px;) Tabelle (Randkollaps: getrennt; Randabstand: 10px;)
Zahl: 4. Ein Beispiel für Tabellen mit größeren Lücken zwischen Zellenrahmen

8. So verbergen Sie leere Tabellenzellen

Die Eigenschaft "Leere Zellen" blendet leere Zellen aus oder zeigt sie an. Betrifft nur Zellen, die keinen Inhalt enthalten. Wenn für eine Zelle ein Hintergrund angegeben ist und für eine Tabelle eine Tabelle (border-Reduce: Collapse;) angegeben ist, wird die Zelle nicht ausgeblendet. Vererbt.

Unternehmen	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

Tabelle (Rand: 1px fest # 69c; Randkollaps: getrennt; leere Zellen: verstecken;) th, td (Rand: 2px fest # 69c;) Zahl: 5. Ein Beispiel zum Ausblenden einer leeren Tabellenzelle

9. Layout des Tabellenlayouts mithilfe der Eigenschaft "Tabellenlayout"

Das Layout eines Tabellenlayouts wird durch einen von zwei Ansätzen bestimmt: festes Layout oder automatisches Layout. Layout bedeutet in diesem Fall, wie die Breite der Tabelle auf die Breite der Zellen verteilt wird. Die Eigenschaft wird nicht vererbt.

Syntax

Tabelle (Tabellenlayout: fest;)

10. Beste Tabellenlayouts

1. Horizontaler Minimalismus

Horizontale Tabellen sind Tabellen, in denen Text horizontal gelesen wird. Jede Entität ist eine separate Zeile. Sie können Tabellen wie diese in einem minimalistischen Stil formatieren, indem Sie einen Zwei-Pixel-Rand unter die Überschrift th setzen.

Mitarbeiter	Gehalt	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

Tabelle (Schriftfamilie: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; Schriftgröße: 14 Pixel; Hintergrund: Weiß; maximale Breite: 70%; Breite: 70%; Randkollaps: Zusammenbruch; Text -ausrichten: links;) th (Schriftgröße: normal; Farbe: # 039; Rand unten: 2px durchgehend # 6678b1; Auffüllen: 10px 8px;) td (Farbe: # 669; Auffüllen: 9px 8px; Übergang: .3s linear;) tr: hover td (Farbe: # 6699ff;)

Aufgrund der großen Anzahl von Zeilen sind Tabellen aufgrund dieser Gestaltung schwer lesbar. Um dieses Problem zu lösen, können Sie unter allen td-Elementen einen Ein-Pixel-Rand hinzufügen.

Td (Rand unten: 1px durchgehend #ccc; Farbe: # 669; Polsterung: 9px 8px; Übergang: .3s linear;) / * Der Rest des Codes ist wie im obigen Beispiel * /

Durch Hinzufügen eines: hover-Effekts zum tr-Element werden Tabellen mit minimalistischem Stil leichter lesbar. Wenn Sie mit der Maus über eine Zelle fahren, werden die restlichen Zellen derselben Zeile gleichzeitig ausgewählt. Dies vereinfacht das Verfolgen von Informationen, wenn Tabellen mehrere Spalten enthalten.

Th (Schriftgröße: normal; Farbe: # 039; Polsterung: 10px 15px;) td (Farbe: # 669; Rand oben: 1px durchgehend # e8edff; Polsterung: 10px 15px;) tr: Hover td (Hintergrund: # e8edff ;)

2. Vertikaler Minimalismus

Obwohl solche Tabellen selten verwendet werden, sind vertikal ausgerichtete Tabellen nützlich, um Beschreibungen von Objekten, die durch eine Spalte dargestellt werden, zu kategorisieren oder zu vergleichen. Sie können sie in einem minimalistischen Stil formatieren, indem Sie ein Leerzeichen zwischen den Spalten hinzufügen.

Th (Schriftgröße: normal; Rand unten: 2px durchgehend # 6678b1; Rand rechts: 30px durchgehend #fff; Rand links: 30px durchgehend #fff; Farbe: # 039; Polsterung: 8px 2px;) td (Rand- rechts: 30px durchgehend #fff; Rand links: 30px durchgehend #fff; Farbe: # 669; Polsterung: 12px 2px;)

3. "Box" -Stil

Der zuverlässigste Stil zum Dekorieren von Tischen aller Art ist der sogenannte "Box" -Stil. Es reicht aus, ein gutes Farbschema zu wählen und dann die Hintergrundfarbe für alle Zellen festzulegen. Denken Sie daran, den Unterschied zwischen Linien hervorzuheben, indem Sie Rahmen als Trennzeichen festlegen.

Th (Schriftgröße: 13px; Schriftgröße: normal; Hintergrund: # b9c9fe; Rand oben: 4px fest #aabcfe; Rand unten: 1px fest #fff; Farbe: # 039; Polsterung: 8px;) td (Hintergrund : # e8edff; Rand unten: 1px durchgehend #fff; Farbe: # 669; Rand oben: 1px durchsichtig; Polsterung: 8px;) tr: hover td (Hintergrund: #ccddff;)

Am schwierigsten ist es, das Farbschema zu finden, das sich harmonisch in Ihre Website einfügt. Wenn die Site mit Grafiken und Design geladen ist, ist es für Sie ziemlich schwierig, diesen Stil zu verwenden.

Tabelle (Schriftfamilie: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; Schriftgröße: 14 Pixel; maximale Breite: 70%; Breite: 70%; Textausrichtung: Mitte; Randkollaps: Zusammenbruch ; Rand oben: 7px fest # 9baff1; Rand unten: 7px fest # 9baff1;) th (Schriftgröße: 13px; Schriftgröße: normal; Hintergrund: # e8edff; Rand rechts: 1px fest # 9baff1; Rand- links: 1px durchgehend # 9baff1; Farbe: # 039; Polsterung: 8px;) td (Hintergrund: # e8edff; Rand rechts: 1px durchgehend #aabcfe; Rand links: 1px durchgehend #aabcfe; Farbe: # 669; Polsterung: 8px ;)

4. Horizontales Zebra

Zebra Tisch sieht ziemlich attraktiv und handlich aus. Die ergänzende Hintergrundfarbe kann als visueller Hinweis für das Lesen der Tabelle dienen.

Th (Schriftgröße: normal; Farbe: # 039; Polsterung: 10px 15px;) td (Farbe: # 669; Rand oben: 1px durchgehend # e8edff; Polsterung: 10px 15px;) tr: n-tes Kind (2n) ( Hintergrund: # e8edff;)

5. Zeitungsstil

Um den sogenannten Zeitungseffekt zu erzielen, können Sie Tabellenelemente mit Rändern versehen und mit den Zellen darin spielen. Ein leichter, minimaler Zeitungsstil könnte folgendermaßen aussehen: Spielen Sie mit dem Farbschema, fügen Sie Ränder, Polster, verschiedene Hintergründe hinzu und bewegen Sie den Schwebeflug über eine Linie.

Tabelle (Rand: 1px durchgehend # 69c;) th (Schriftgröße: normal; Farbe: # 039; Rand unten: 1px gestrichelt # 69c; Polsterung: 12px 17px;) td (Farbe: # 669; Polsterung: 7px 17px; ) tr: hover td (Hintergrund: #ccddff;)

Tabelle (Rand: 1px durchgehend # 69c;) th (Schriftgröße: normal; Farbe: # 039; Polsterung: 10px;) td (Farbe: # 669; Rand oben: 1px gestrichelt #fff; Polsterung: 10px; Hintergrund: #ccddff;) tr: hover td (Hintergrund: # 99bcff;)

Tabelle (Rand: 1px durchgehend # 6cf;) th (Schriftgröße: normal; Schriftgröße: 13px; Farbe: # 039; Texttransformation: Großbuchstaben; Rand rechts: 1px durchgehend # 0865c2; Rand oben: 1px durchgehend; # 0865c2; Rand links: 1 Pixel durchgehend # 0865c2; Rand unten: 1 Pixel durchgehend #fff; Polsterung: 20 Pixel;) td (Farbe: # 669; Rand rechts: 1 Pixel gestrichelt # 6cf; Polsterung: 10 Pixel 20 Pixel;)

6. Tabellenhintergrund

Wenn Sie nach einer schnellen und einzigartigen Möglichkeit suchen, Ihren Tisch zu gestalten, wählen Sie ein attraktives Bild oder Foto zum Thema der Tabelle und legen Sie es als Tabellenhintergrund fest.

Png ") 98% 86% keine Wiederholung;) th (Schriftgröße: normal; Schriftgröße: 14px; Farbe: # 339; Polsterung: 10px 12px; Hintergrund: weiß;) td (Farbe: # 669; Rand- oben: 1px durchgehend weiß; Polsterung: 10px 12px; Hintergrund: rgba (51, 51, 153, .2); Übergang: .3s;) tr: Hover td (Hintergrund: rgba (51, 51, 153, .1); )

Tabellen sehen für sich genommen eher "schlecht" aus, außerdem zeigen Browser einige Eigenschaften von Tabellen auf ihre eigene Weise an, insbesondere Frames. Diese Mängel können jedoch mithilfe der Kraft von Stilen leicht behoben werden. Gleichzeitig werden die Tools für das Entwerfen von Tabellen erheblich erweitert, sodass Sie Tabellen erfolgreich in das Site-Design einpassen und Tabellendaten übersichtlicher darstellen können.

Hintergrundfarbe der Zelle

Die Hintergrundfarbe aller Tabellenzellen gleichzeitig wird über die Hintergrundeigenschaft festgelegt, die auf den TABLE-Selektor angewendet wird. Beachten Sie dabei die Regeln für die Verwendung von Stilen, insbesondere die Vererbung von Eigenschaften von Elementen. Obwohl die Hintergrundeigenschaft nicht vererbt wird, ist der Standardhintergrundwert für Zellen transparent, d.h. Transparenz, so dass der Hintergrundfüllungseffekt auch für die Zellen erhalten wird. Wenn Sie gleichzeitig mit TABLE die Farbe für den Selektor TD oder TH einstellen, wird diese Farbe als Hintergrund der Zelle festgelegt (Beispiel 2.3).

Beispiel 2.3. Hintergrundfarbe

Überschrift 1	Überschrift 2
Zelle 3	Zelle 4

In diesem Beispiel erhalten wir eine blaue Hintergrundfarbe für die Zellen (Tag) ) und rot am Titel (Tag ). Dies liegt daran, dass der Stil für den TH-Selektor nicht definiert ist und der Hintergrund des übergeordneten Elements, in diesem Fall des TABLE-Selektors, "überflogen" wird. Und die Farbe für den Selektor TD wird explizit angegeben, sodass die Zellen mit Blau „gefüllt“ werden.

Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 2.4.

Zahl: 2.4. Ändern Sie die Hintergrundfarbe

Ränder innerhalb von Zellen

Der Rand ist der Abstand zwischen dem Rand des Zelleninhalts und seinem Rand. Normalerweise wird zu diesem Zweck das Cellpadding-Attribut des Tags verwendet.

... Es definiert den Randwert in Pixel auf allen Seiten der Zelle. Sie können die Padding-Style-Eigenschaft verwenden, indem Sie sie dem TD-Selektor hinzufügen, wie in Beispiel 2.4 gezeigt.

Beispiel 2.4. Felder in Tabellen

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Überschrift 1	Überschrift 2
Zelle 3	Zelle 4

In diesem Beispiel werden unter Verwendung von Gruppierungsselektoren die Felder gleichzeitig für den Selektor TD und TH eingestellt. Das Beispielergebnis ist in Abb. 1 dargestellt. 2.5.

Zahl: 2.5. Felder in Zellen

Wenn die Eigenschaft padding style auf Tabellenzellen angewendet wird, wird die Aktion des Attributs cellpadding des Tags ausgeführt

ignoriert.

Abstand zwischen den Zellen

Wenden Sie das Zellenabstandsattribut des Tags an, um den Abstand zwischen Zellen zu ändern

... Der Effekt dieses Attributs ist deutlich sichtbar, wenn Sie Rahmen um Zellen verwenden oder Zellen mit einer Farbe füllen, die sich vom Hintergrund der Seite abhebt. Die Stileigenschaft für den Randabstand dient als Ersatz für den Zellenabstand. Sie legt den Abstand zwischen den Rändern der Zellen fest. Ein Wert legt sowohl den vertikalen als auch den horizontalen Abstand zwischen den Zellrändern fest. Wenn diese Eigenschaft zwei Werte hat, definiert der erste den horizontalen Abstand (d. H. Links und rechts von der Zelle) und der zweite den vertikalen Abstand (oben und unten).

Die Eigenschaft "Randabstand" ist nur wirksam, wenn die Eigenschaft "Randreduzierung" für den TABLE-Selektor mit dem Reduzierungswert nicht festgelegt ist (Beispiel 2.5).

Beispiel 2.5. Abstand zwischen Zellgrenzen

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 2.6.

Zahl: 2.6. Tabellenansicht bei Verwendung des Rahmenabstands

Internet Explorer bis einschließlich Version 7 unterstützt die Eigenschaft "Randabstand" nicht. Daher verwenden Tabellen den Standardzellenabstand (normalerweise 2 Pixel) für Tabellen.

Wenn Sie dem TABLE-Selektor eine Border-Collapse-Eigenschaft mit einem Collapse-Wert hinzufügen, wird das Zellenabstandsattribut ignoriert und der Border-Spacing-Wert gelöscht.

Rahmen und Rahmen

Standardmäßig enthält die Tabelle zunächst keinen Rahmen und wird mithilfe des Rahmenattributs des Tags hinzugefügt

... Browser zeigen einen solchen Rahmen auf unterschiedliche Weise an. Es ist daher besser, dieses Attribut überhaupt nicht anzugeben und die Zeichnung der Rahmen den Stilen zu überlassen. Schauen wir uns zwei Methoden an, die in direktem Zusammenhang mit Stilen stehen.

Verwenden des Zellenabstandsattributs

Es ist bekannt, dass das Zellenabstandsattribut des Tags lautet

Legt den Abstand zwischen Tabellenzellen fest. Wenn eine andere Hintergrundfarbe der Tabelle und der Zellen verwendet wird, wird zwischen den Zellen ein Linienraster angezeigt, dessen Farbe mit der Farbe der Tabelle übereinstimmt, und die Dicke entspricht dem Wert des Zellenabstandsattributs in Pixel. Beispiel 2.3 oben zeigt diesen Effekt, daher werde ich ihn nicht wiederholen.

Beachten Sie, dass dies keine sehr bequeme Methode zum Erstellen von Rahmen ist, da der Umfang begrenzt ist. Auf diese Weise erhalten Sie nur ein einfarbiges Raster, keine vertikalen oder horizontalen Linien an den richtigen Stellen.

Anwenden der Randeigenschaft

Mit der Eigenschaft "Rahmenstil" werden gleichzeitig die Rahmenfarbe, der Stil und die Dicke um das Element festgelegt. Wenn Sie separate Linien auf verschiedenen Seiten erstellen müssen, ist es besser, Ableitungen zu verwenden - Rand links, Rand rechts, Rand oben und Rand unten. Diese Eigenschaften definieren jeweils den Rand links, rechts, oben und unten.

Durch Anwenden der Eigenschaft border auf den TABLE-Selektor fügen wir einen Rand um die gesamte Tabelle hinzu und fügen dem TD- oder TH-Selektor einen Rand um die Zellen hinzu (Beispiel 2.6).

Beispiel 2.6. Hinzufügen eines doppelten Rahmens

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Überschrift 1	Überschrift 2
Zelle 3	Zelle 4

In diesem Beispiel wird ein doppelter schwarzer Rand um die Tabelle selbst und ein fester weißer Rand um jede Zelle verwendet. Das Beispielergebnis ist in Abb. 1 dargestellt. 2.7.

Zahl: 2.7. Rand um Tabelle und Zellen

Bitte beachten Sie, dass an der Stelle, an der die Zellen verbunden sind, doppelte Linien gebildet werden. Sie werden erneut durch die Aktion des Zellenabstandsattributs des Tags erhalten

... Obwohl dieses Attribut an keiner Stelle im Beispielcode angezeigt wird, wird es vom Browser standardmäßig verwendet. Wenn du fragst , dann bekommen wir nicht doppelte, sondern einzelne Linien, sondern doppelte Dicke. Verwenden Sie zum Ändern dieser Funktion die Stileigenschaft "Rahmen reduzieren" mit dem Reduzierungswert, der dem TABLE-Selektor hinzugefügt wird (Beispiel 2.7).

Beispiel 2.7. Einen einzelnen Frame erstellen

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Überschrift 1	Überschrift 2
Zelle 3	Zelle 4

In diesem Beispiel wird eine durchgezogene grüne Linie zwischen den Zellen und eine schwarze durchgezogene Linie um die Tabelle erstellt. Alle Ränder innerhalb der Tabelle sind gleich dick. Das Beispielergebnis ist in Abb. 1 dargestellt. 2.8.

Zahl: 2.8. Rand um den Tisch

Zelleninhalt ausrichten

Standardmäßig ist der Text in einer Tabellenzelle linksbündig. Eine Ausnahme von dieser Regel ist das Tag definiert eine Überschrift, in der die Ausrichtung zentriert ist. Verwenden Sie zum Ändern der Ausrichtung die Stileigenschaft Textausrichtung (Beispiel 2.8).

Beispiel 2.8. Den Inhalt der Zellen horizontal ausrichten

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Überschrift 1	Zelle 1	Zelle 2
Überschrift 2	Zelle 3	Zelle 4

In diesem Beispiel der Inhalt des Tags ist linksbündig und der Inhalt des Tags - Im Zentrum. Das Ergebnis des Beispiels ist unten dargestellt (Abb. 2.9).

Zahl: 2.9. Text in Zellen ausrichten

Die vertikale Ausrichtung in einer Zelle ist immer zentriert, sofern nicht anders angegeben. Dies ist nicht immer praktisch, insbesondere bei Tabellen, in denen sich der Inhalt der Zellen in der Höhe unterscheidet. In diesem Fall wird die Ausrichtung mithilfe der vertikalen Ausrichtungseigenschaft an der Oberkante der Zelle festgelegt, wie in Beispiel 2.9 gezeigt.

Beispiel 2.9. Den Inhalt von Zellen vertikal ausrichten

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Überschrift 1	Überschrift 2
Zelle 1	Zelle 2

In diesem Beispiel wird die Höhe des Headers festgelegt als 40 Pixel und der Text ist nach unten ausgerichtet. Das Beispielergebnis ist in Abb. 1 dargestellt. 2.10.

Zahl: 2.10. Text in Zellen ausrichten

Leere Zellen

Browser zeigen eine Zelle anders an, ohne dass sich etwas darin befindet. "Nichts" bedeutet in diesem Fall, dass der Zelle kein Bild oder Text hinzugefügt wurde und der Platz nicht berücksichtigt wird. Natürlich unterscheidet sich das Aussehen der Zellen nur, wenn eine Grenze um sie herum festgelegt wird. Bei Verwendung eines unsichtbaren Rahmens ist das Erscheinungsbild der Zellen, unabhängig davon, ob sich etwas in ihnen befindet oder nicht, dasselbe.

Ältere Browser zeigten nicht die Hintergrundfarbe von leeren Ansichtszellen an Daher wurde in dem Fall, in dem die Zelle ohne Inhalt belassen werden musste, aber die Hintergrundfarbe angezeigt wurde, ein nicht trennbarer Raum () innerhalb der Zelle hinzugefügt. Der Platz ist nicht immer geeignet, insbesondere wenn Sie die Zellenhöhe auf 1–2 Pixel einstellen müssen, weshalb transparente Einzelpixelbilder häufig verwendet werden. Ein solches Bild kann zwar nach eigenem Ermessen skaliert werden, wird jedoch in keiner Weise auf der Webseite angezeigt.

Glücklicherweise ist die Ära der Einzelpixel-Zeichnungen und aller darauf basierenden Abstandshalter vorbei. Browser funktionieren gut genug mit Tabellen ohne Zellinhalt.

Die Eigenschaft "Leere Zellen" wird verwendet, um das Erscheinungsbild leerer Zellen zu steuern. Wenn diese Option zum Ausblenden festgelegt ist, werden der Rand und der Hintergrund in leeren Zellen nicht angezeigt. Wenn alle Zellen in einer Zeile leer sind, wird die gesamte Zeile ausgeblendet. Eine Zelle wird in folgenden Fällen als leer betrachtet:

• es gibt überhaupt keine Symbole;
• die Zelle enthält nur einen Zeilenvorschub, ein Tabulatorzeichen oder ein Leerzeichen.
• die Sichtbarkeit ist ausgeblendet.

Das Hinzufügen eines nicht unterbrechenden Raums wird als sichtbarer Inhalt wahrgenommen, d.h. Die Zelle ist nicht mehr leer (Beispiel 2.10).

Beispiel 2.10. Leere Zellen

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Die Tabellenansicht im Safari-Browser ist in Abb. 2 dargestellt. 2.11a. Die gleiche Tabelle im IE7-Browser ist in Abb. 1 dargestellt. 2.11b.

und. Im Browser Safari, Firefox, Opera, IE8, IE9

b. Im IE7-Browser

Zahl: 2.11. Tabellenansicht mit leeren Zellen