Abstand zwischen den Spalten der HTML-Tabelle. Verwenden des Zellenabstandsattributs

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-Collapse: 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;) / * Rest des Codes - wie im obigen Beispiel * /

Durch Hinzufügen eines: hover-Effekts zum tr-Element werden Tabellen mit minimalistischem Stil leichter lesbar. Wenn Sie den Mauszeiger über eine Zelle bewegen, werden die restlichen Zellen derselben Zeile gleichzeitig hervorgehoben. Dies erleichtert 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 auszuwä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 und einen: Hover-Effekt hinzu, wenn Sie über einer Linie schweben.

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: 1px durchgehend # 0865c2; Rand unten: 1px durchgehend #fff; Polsterung: 20px;) td (Farbe: # 669; Rand rechts: 1px gestrichelt # 6cf; Polsterung: 10px 20px;)

6. Tabellenhintergrund

Wenn Sie nach einer schnellen und einzigartigen Möglichkeit suchen, Ihren Tisch zu gestalten, wählen Sie ein attraktives Bild oder Foto aus, das sich auf das Thema des Tisches bezieht, und legen Sie es als Hintergrund für den Tisch 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); )

Hallo! Jetzt können Sie elementare Tabellen erstellen, die aus so vielen Zeilen und Spalten bestehen, wie Sie benötigen. Nicht schlecht nicht schlecht. Lassen Sie uns nun über das Design dieser Tabellen sprechen.

In der letzten Lektion wurden Tabellen ohne Rahmen angezeigt. Und du siehst, es sieht so lala aus, du kannst es nicht einmal als Zeichen bezeichnen. Fügen Sie dem Tag hinzu, um Tabellenränder in HTML zu erstellen

Attribut randindem Sie ihm einen anderen Wert als Null geben.

Erstellen wir also Rahmen für die Tabelle. Zum Beispiel für die, die wir bereits haben:

Oben links Zelle	Zelle oben rechts
Unten links Zelle	Unten rechts Zelle

Ergebnis im Browser:

So entfernen Sie Tabellenränder

Um die Ränder der HTML-Tabelle zu entfernen oder sie unsichtbar zu machen, benötigen Sie das Attribut rand Wert einstellen 0 ... Nach diesen einfachen Aktionen wird der Rahmen entfernt.

Mit dem Attribut können Sie Rahmen erstellen, aber nicht verwalten. Sie können nur deren Dicke ändern.

Deshalb werden wir jetzt darüber sprechen CSSderen Eigenschaften machen es möglich mit randerstellen Sie unterschiedliche Rahmen, sowohl innerhalb als auch außerhalb jeder Zelle, um den gesamten Tisch herum.

Lassen Sie uns einen Blick darauf werfen, wie Sie CSS anwenden, um die äußeren und inneren Ränder einer Tabelle zu erstellen.
Entfernen Sie dazu das Rahmenattribut aus unserer Tabelle und fügen Sie Stile hinzu:

Oben links Zelle	Zelle oben rechts
Unten links Zelle	Unten rechts Zelle

Ergebnis im Browser:

Fügen wir nun für jede Zelle Rahmen hinzu. Fügen Sie dazu einfach die Stile hinzu:

Ergebnis im Browser:

So entfernen Sie das Auffüllen zwischen Zellen in der HTML-Tabelle

Stimmen Sie zu, dass ein mit CSS definierter Rahmen nicht das gewünschte Erscheinungsbild hat. Zweifellos gibt es aus ästhetischer Sicht noch viel zu tun. Auf der Browserseite können Sie sehen, dass standardmäßig die Ränder von Tabellen und Zellen separat angezeigt werden. Ein Beispiel zeigt dies deutlich.

Es ist jedoch durchaus möglich, solche Ränder, die als doppelt bezeichnet werden, zu entfernen, wenn wir die CSS-Eigenschaft zum Reduzieren von Rändern verwenden. In der Praxis sieht es so aus:

Tabelle (Rand: durchgehend 1px blau; Randkollaps: Kollaps;) ...

Dadurch wird der Abstand zwischen den Zellen entfernt:

Der dem Rahmenattribut zugewiesene Reduzierungswert entfernt doppelte Ränder. Wie Sie sehen können, ist das Ergebnis ein Zusammenbruch benachbarter Zellränder sowie der Zellränder und des äußeren Randes der Tabelle. Letzteres kann ganz entfernt werden. Und wenn es angezeigt werden muss, müssen Sie seine Breite erhöhen. So haben wir die Trennzeichen in der Tabelle entfernt. In der nächsten Lektion werden wir darüber sprechen, wie Sie vertikale und horizontale Ränder festlegen können. Viel Glück für jeden!

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 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 dieselbe 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 vertikalen Ausrichtungseigenschaft 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.

Betrachten wir ein Anwendungsbeispiel:

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üllung, stellen Sie die Breite und Höhe der Kopfzellen auf 50 Pixel ein und geben Sie sie an 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, die 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 die Standardstatik haben muss. Andernfalls wird die Anzahl relativ zur angegebenen Kante des Browserfensters angegeben. Aus diesem Grund haben wir dies für die Tabelle festgelegt 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 die Seite überprüfen, um festzustellen, welches CSS verwendet wurde.

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