Wir haben uns viele Methoden zum Gestalten von Elementen auf einer Seite wie Textinformationen, Links, Bildern und Überschriften angesehen, aber das alles reicht noch nicht aus. In meinen Artikeln verwende ich häufig HTML-Elemente wie Tabellen, da diese in den meisten Fällen Helfen Sie dabei, wichtige Informationen zu organisieren und ihre Präsentation zu vereinfachen.
In diesem Artikel führe ich Sie in die Feinheiten der Gestaltung von HTML-Tabellen ein und Sie lernen neue CSS-Eigenschaften kennen, mit denen Sie diese Ziele erreichen können.
Die Hypertext-Markup-Sprache HTML hat uns eine Vielzahl von Möglichkeiten geboten, CSS-Stile an zehn einzigartige Tags zu binden, die für die Arbeit mit Tabellen entwickelt wurden. Ich empfehle, sie vor dem weiteren Studium zu wiederholen:
Etikett
Beschreibung
Definiert den Inhalt der Tabelle.
Definiert den Namen der Tabelle.
Definiert die Kopfzelle der Tabelle.
Definiert eine Tabellenzeile.
Definiert eine Tabellendatenzelle.
Wird verwendet, um den Gruppenkopf in der Tabelle (Tabellenkopf) aufzunehmen.
Wird verwendet, um den „Körper“ der Tabelle zu enthalten.
Wird verwendet, um die „Fußzeile“ der Tabelle zu enthalten.
Definiert angegebene Spalteneigenschaften für jede Spalte innerhalb eines Tags
.
Definiert eine Gruppe von Spalten in einer Tabelle.
Arbeiten mit Tabelleneinzügen
Verwenden von Auffüllungen in einer Tabelle
Tabelleneinzug
1
2
3
4
2
3
4
In diesem Beispiel:
Wir haben die Tabelle mit der Technik der horizontalen Zentrierung mit Außeneinzügen (Rand: 0 automatisch) in der Mitte platziert.
Für den Tabellennamen (tag
) stellen wir den unteren Abstand auf 19 Pixel ein. Ich hoffe, die ungeraden Zahlen stören dich nicht :)
Das Ergebnis unseres Beispiels:
Raum zwischen den Zellen
Nach dem oben besprochenen Beispiel ist Ihnen vielleicht aufgefallen, dass zwischen allen Tabellenzellen immer noch eine Lücke besteht. Sehen wir uns an, wie Sie den Abstand zwischen Tabellenzellen entfernen oder vergrößern können.
Um den Abstand zwischen den Rändern benachbarter Zellen festzulegen, müssen Sie die CSS-Eigenschaft border-spacing verwenden.
Den Abstand zwischen Tabellen ändern
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:
schweben: links). Wenn Sie das Thema schwebende Elemente verpasst haben, können Sie in diesem Tutorial jederzeit darauf zurückkommen – „“.
Darüber hinaus stellen wir den rechten Rand für die Tabellen auf 30 Pixel ein und legen die vertikale Ausrichtung der Tabellen fest (die Oberseite des Elements wird an der Oberseite des höchsten Elements ausgerichtet). Wir werden in diesem Artikel auf eine detaillierte Betrachtung dieser Eigenschaft zurückkommen.
) – fetter Stil.
Für die Tabellenzellen (Kopfzeilen- und Datenzellen) legen wir einen 1-Pixel-Vollrand mit der Hex-Farbe #F50 und einen 19-Pixel-Abstand auf allen Seiten fest.
Für den ersten Tisch mit Klasse .Erste Wir legen den Abstand zwischen den Tabellenzellen (Border-Spacing-Eigenschaft) für die zweite Tabelle mit der Klasse auf 30px 10px fest .zweite gleich Null, für dritte Tabellen mit Klasse .dritte gleich 0,2em .
Bitte beachten Sie, dass, wenn in der Eigenschaft border-spacing nur ein Längenwert angegeben wird, dieser die Abstände sowohl horizontal als auch vertikal angibt, und wenn zwei Längenwerte angegeben werden, bestimmt der erste den horizontalen Abstand und der zweite den vertikalen . Der Abstand zwischen den Rändern benachbarter Zellen kann in CSS-Einheiten (px, cm, em usw.) angegeben werden. Negative Werte sind nicht zulässig.
Das Ergebnis unseres Beispiels:
Ränder um Tabellenzellen anzeigen
Sie können sagen: - Also haben wir den Abstand zwischen den Zellen mithilfe der Eigenschaft border-spacing mit dem Wert 0 entfernt, aber warum überschneiden sich unsere Zellränder jetzt?
Doppelte Ränder werden durch die Tatsache verursacht, dass der untere Rand einer Zelle zum oberen Rand der darunter liegenden Zelle hinzugefügt wird. Eine ähnliche Situation tritt an den Seiten von Zellen auf und dies ist aus Sicht der Tabellendarstellung logisch, aber Glücklicherweise gibt es eine Möglichkeit, dem Browser mitzuteilen, dass wir ein so lockeres Verhalten der Zellränder nicht sehen möchten.
Dazu müssen Sie die CSS-Eigenschaft border-collapse verwenden. Seltsamerweise ist die Verwendung der Eigenschaft „border-collapse“ mit dem Wert „collapse“ die beste Möglichkeit, den Abstand zwischen Zellen zu entfernen, ohne dass zwischen ihnen doppelte Ränder entstehen.
Vergleichen wir das Verhalten von Rändern, wenn die Eigenschaft „border-spacing“ mit dem Wert 0 und die Eigenschaft „border-collapse“ mit dem Wert „collapse“ verwendet wird:
Beispiel für die Anzeige von Rändern um Tabellenzellen
Randabstand: 0;
1
2
3
2
3
border-collapse: Zusammenbruch;
1
2
3
2
3
In diesem Beispiel:
Wir haben unsere Tabellen schwebend gemacht und sie nach links verschoben (float: left), ihren äußeren Rand rechts auf 30 Pixel gesetzt.
Legen Sie den Tabellennamen fest (tag
) – fetter Stil.
Für die Tabellenzellen (Kopfzeilen- und Datenzellen) legen wir einen festen 5-Pixel-Rahmen mit der Hex-Farbe #F50 sowie eine feste Breite von 50 Pixel und eine Höhe von 75 Pixel fest.
Für den ersten Tisch mit Klasse .Erste Wir setzen den Abstand zwischen den Tabellenzellen auf Null (border-spacing : 0 ;), und zwar für die zweite Tabelle mit der Klasse .zweite Setzen Sie die Eigenschaft „border-collapse“ auf „collapse“, wodurch die Ränder der Zellen nach Möglichkeit zu einem einzigen zusammengefasst werden.
Das Ergebnis unseres Beispiels:
Verhalten leerer Zellen
Mit CSS können Sie festlegen, ob die Ränder und Hintergründe leerer Zellen in einer Tabelle angezeigt werden sollen oder nicht. Dieses Verhalten wird durch die Eigenschaft empty-cells gesteuert, die, wie Sie vielleicht aus den vorherigen Beispielen bemerkt haben, standardmäßig leere Zellen anzeigt.
Kommen wir zu einem Beispiel:
Beispiel für die Anzeige leerer Tabellenzellen
leere Zellen: anzeigen;
1
2
3
2
☺
3
☺
leere Zellen: verstecken;
1
2
3
2
☺
3
☺
Anhand dieses Beispiels lässt sich ganz einfach verstehen, wie die Eigenschaft empty-cells funktioniert: Wenn sie auf hide eingestellt ist, werden leere Zellen und der Hintergrund darin ausgeblendet. Wenn sie auf show (Standard) eingestellt ist, werden sie angezeigt.
Position der Tabellenüberschrift
Schauen wir uns eine weitere einfache Eigenschaft zum Gestalten von Tabellen an – caption-side , die die Position des Tabellenkopfes festlegt (über oder unter der Tabelle). Standardmäßig ist die caption-side-Eigenschaft auf top gesetzt, wodurch die Beschriftung über der Tabelle platziert wird. Um einen Titel unter der Tabelle zu platzieren, müssen Sie die Eigenschaft mit dem Wert „bottom“ verwenden.
Schauen wir uns ein Beispiel für die Verwendung dieser Eigenschaft an:
Ein Beispiel für die Verwendung der caption-side-Eigenschaft
Kopfzeile über der Tabelle
Name
Preis
Fisch
350 Rubel
Fleisch
250 Rubel
Überschrift unterhalb der Tabelle
Name
Preis
Fisch
350 Rubel
Fleisch
250 Rubel
In diesem Beispiel haben wir erstellt zwei Klassen, die die Position des Tabellenkopfes steuern. Erste Klasse ( .topCaption) fügt den Tabellentitel darüber ein, wir haben ihn auf die erste Tabelle angewendet und die zweite Klasse ( .bottomCaption) den Tabellentitel darunter platziert, haben wir ihn auf die zweite Tabelle angewendet. Klasse .topCaption hat den standardmäßigen Eigenschaftswert für die Beschriftungsseite und wird 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 Kopfzeilen und Datenzellen anpassen. Die text-align-Eigenschaft wird für die horizontale Ausrichtung verwendet, ähnlich wie bei allen Textinformationen. Wir haben die Verwendung dieser Eigenschaft für Text weiter oben im Artikel „“ besprochen.
Um die Ausrichtung für Inhalte in Zellen festzulegen, müssen Sie spezielle Schlüsselwörter mit der text-align-Eigenschaft verwenden. Schauen wir uns im folgenden Beispiel die Verwendung von Schlüsselwörtern für diese Eigenschaft an.
Beispiel für die horizontale Ausrichtung in einer Tabelle
Bedeutung
Beschreibung
links
Richtet den Zellentext linksbündig aus. Dies ist der Standardwert (wenn die Textrichtung von links nach rechts ist).
Rechts
Richtet den Zellentext rechts aus. Dies ist der Standardwert (wenn die Textrichtung von rechts nach links verläuft).
Center
Richtet den Zellentext zentriert aus.
rechtfertigen
Streckt die Linien, sodass jede Linie die gleiche Breite hat (dehnt den Text der Zelle, um ihn an seine Breite anzupassen).
In diesem Beispiel haben wir erstellt vier Klassen, die unterschiedliche horizontale Ausrichtungen in Zellen festlegen und diese der Reihe nach auf die Zeilen der Tabelle anwenden. Der Wert in der Zelle entspricht dem Wert der text-align-Eigenschaft
Das Ergebnis unseres Beispiels:
Zusätzlich zur horizontalen Ausrichtung können Sie mit der Eigenschaft „vertikal-align“ auch die vertikale Ausrichtung in Tabellenzellen definieren.
Bitte beachten Sie, dass beim Arbeiten mit Tabellenzellen nur die folgenden Werte * dieser Eigenschaft angewendet werden:
*
- Auf eine Tabellenzelle angewendete Sub-, Super-, Text-Top-, Text-Bottom-, Längen- und %-Werte verhalten sich so, als würden sie den Basiswert verwenden.
Schauen wir uns ein Anwendungsbeispiel an:
Beispiel für die vertikale Ausrichtung in einer Tabelle
Bedeutung
Beschreibung
Grundlinie
Richtet die Grundlinie der Zelle an der Grundlinie der übergeordneten Zelle aus. Dies ist der Standardwert.
Spitze
Richtet den Inhalt einer Zelle vertikal am oberen Rand aus.
Mitte
Richtet den Inhalt einer Zelle vertikal in der Mitte aus.
unten
Richtet den Inhalt einer Zelle vertikal am unteren Rand aus.
In diesem Beispiel haben wir erstellt vier Klassen, die unterschiedliche vertikale Ausrichtungen in Zellen festlegen und diese der Reihe nach auf die Zeilen der Tabelle anwenden. Der Wert in der Zelle entspricht dem Wert der Vertical-Align-Eigenschaft, die auf diese Zeile angewendet wurde.
Algorithmus zum Platzieren eines Tabellenlayouts in einem Browser
CSS verwendet standardmäßig einen Algorithmus für den Browser, um das Tabellenlayout automatisch anzuordnen. In diesem Fall Die Spaltenbreite wird durch den breitesten geschützten Inhalt der Zelle festgelegt. Dieser Algorithmus kann in manchen Fällen langsam sein, da der Browser den gesamten Inhalt der Tabelle lesen muss, bevor er das endgültige Layout bestimmt.
Zum Ändern des Tabellenlayouttyps des Browsers mit automatisch An Fest, müssen Sie die CSS-Eigenschaft „table-layout“ mit dem Wert „fixed“ verwenden.
In diesem Fall kommt es nur auf die horizontale Platzierung an von der Breite der Tabelle und der Spalten und nicht vom Inhalt der Zellen. Der Browser beginnt sofort mit der Anzeige der Tabelle, nachdem die erste Zeile empfangen wurde. Daher können Sie mit einem festen Algorithmus schneller ein Layout für eine solche Tabelle erstellen als mit der automatischen Option. Wenn Sie mit großen Tabellen arbeiten, können Sie einen festen Algorithmus verwenden, um die Leistung zu verbessern.
Schauen wir uns die Verwendung dieser Eigenschaft anhand des folgenden Beispiels an:
Ein Beispiel für die Verwendung der Eigenschaft table-layout
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:
Tabellenzeilen und -spalten gestalten
Methoden zum Formatieren von Tabellenzeilen und -spalten haben wir im Artikel „“ bereits teilweise angesprochen. In diesem Artikel haben wir uns mit der Verwendung der Gruppenpseudoklasse befasst, die es Ihnen ermöglicht, Zeilenstile in Tabellen mithilfe von Werten zu ändern sogar (ehrlich) Und seltsam (seltsam) oder nach Grundschule mathematische Formel.
Sehen wir uns die Techniken an, die wir zuvor behandelt haben, und erkunden wir neue Möglichkeiten, Zeilen und Spalten in Tabellen zu formatieren. Kommen wir zu den Beispielen.
Ein Beispiel für die Verwendung der Pseudoklasse:nth-child mit Tabellen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
In diesem Beispiel:
Das Ergebnis unseres Beispiels:
Fahren wir mit dem nächsten Beispiel fort, in dem wir uns mit Optionen zum Gestalten von Tabellenzeilen befassen.
Beispiel für die Formatierung von Zeilen in Tabellen
Service
Preis
Summe
15 000
1
1 000
2
2 000
3
3 000
4
4 000
5
5 000
In diesem Beispiel:
Wir legen die Breite der Tabelle auf 100 % der Breite des übergeordneten Elements fest und legen einen festen Rahmen mit einer Breite von 1 Pixel für die Kopfzeile und die Datenzellen fest.
Für Element festlegen („Fußzeile“ der Tabelle) Hintergrundfarbe – Koralle, für Element („Tabellenkopf“) legt die Hintergrundfarbe fest Silber.
Für Elemente
, die sich innerhalb des Elements befinden
(Tabellenkörper) legt die Hintergrundfarbe so fest, dass sie sich beim Hover ändert (Pseudoklasse: Hover) c Weiß pro Farbe khaki(Die gesamte Zeile ist hervorgehoben).
Das Ergebnis unseres Beispiels:
Reis. 153 Beispiel für die Formatierung von Zeilen in Tabellen
Das folgende Beispiel befasst sich mit der Anwendung der Eckenrundung auf Tabellenzellen (Eigenschaft).
Beispiel für das Abrunden von Zellenecken
1
2
3
4
5
In diesem Beispiel:
Wir haben die Tabelle mit äußeren Rändern zentriert, die Breite und Höhe der Kopfzellen auf 50 Pixel festgelegt und angegeben transparent Rand 5 Pixel.
Wir haben festgestellt, dass beim Schweben (Pseudoklasse :hover) über die Headerzelle ein Hintergrund angezeigt wird Blau Farben, orange Textfarbe, Rand orange Farben 5 Pixel und Rundungsradius 100 %.
transparenter Rand ist notwendig, um Platz für den Rand zu reservieren, der beim Schweben angezeigt wird; andernfalls „springt“ die Tabelle.
Das Ergebnis unseres Beispiels:
Das folgende Beispiel behandelt die Verwendung von HTML-Elementen
Und
und ihre Stilisierung.
Beispiel für die Hervorhebung von Tabellenspalten
Bewerbungsnr.
Service
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
Lektüre
3 000
3 000
In diesem Beispiel:
Das Ergebnis unseres Beispiels:
Nun, das letzte Beispiel, das ziemlich schwer zu verstehen ist und fortgeschrittene CSS-Kenntnisse erfordert, da es zukünftige Themen berührt, die in diesem Kurs ausführlich studiert werden sollen.
Im vorherigen Beispiel haben wir festgestellt, dass das HTML-Element
Sie können nur eine CSS-Eigenschaft anwenden – Hintergrundfarbe (background-color), aber Sie können die Hintergrundfarbe nicht direkt festlegen, wenn Sie mit der Maus über dieses Element fahren (die :hover-Pseudoklasse). In diesem Beispiel schauen wir uns an, wie man eine Tabellenspalte nur mit CSS hervorhebt.
Beispiel für die Hervorhebung von Tabellenspalten und -zeilen beim Hover
Bewerbungsnr.
Service
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
Lektüre
3 000
3 000
In diesem Beispiel:
Wir stellen unsere Tabelle so ein, dass sie 100 % des übergeordneten Elements einnimmt, die Tabellenzellen so, dass sie 25 % des übergeordneten Elements einnehmen und einen durchgehenden grünen Rand von 1 Pixel haben. Die Höhe der Kopfzeile und der Datenzellen beträgt 45 Pixel. Wir haben den Abstand zwischen den Zellen mithilfe der Eigenschaft border-collapse mit dem Wert entfernt
.
Und so fügen wir mit dem Pseudoelement ::after nach jedem Element Inhalt hinzu
im Schwebeflug. Das Pseudoelement ::after muss in Verbindung mit der Eigenschaft content verwendet werden, wodurch wir ein Blockelement mit einer Hintergrundfarbe einfügen Waldgrün und hat absolute Positionierung.
Hier ist eine absolute Positionierung erforderlich, um das Element relativ zum angegebenen Rand seines Vorgängers zu versetzen, und der Vorgänger muss einen anderen Positionswert als den Standardwert haben – static , andernfalls erfolgt die Zählung hierfür relativ zum angegebenen Rand des Browserfensters Grund, warum wir den Tisch gedeckt haben relative Positionierung(relativ).
Wir legen die Eigenschaft „top“ für unseren generierten Block fest, die die Richtung angibt, in der das positionierte Element vom oberen Rand versetzt ist, und die Eigenschaft „bottom“, die die Richtung angibt, in der das positionierte Element vom unteren Rand versetzt ist. Für beide Eigenschaften wurde der Wert 0 angegeben, sodass der Block das Element vom unteren und oberen Rand der Tabelle vollständig einnimmt. 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 einem Wert von „-1“, bestimmt die Reihenfolge der positionierten Elemente entsprechend Z-Achse. Diese Eigenschaft ist erforderlich, damit der Text vor diesem Block und nicht dahinter steht. Wenn Sie keinen Wert kleiner als Null festlegen, deckt der Block den Text ab.
Das Ergebnis unseres Beispiels:
Wenn Sie in dieser Phase Ihres Studiums den Prozess der Positionierung von Elementen nicht verstehen, dann lassen Sie sich nicht entmutigen; dies ist ein schwer zu verstehendes Thema, das wir auch nicht berücksichtigt haben, aber wir werden es auf jeden Fall im nächsten Artikel des behandeln Lehrbuch „Positionierung von Elementen in CSS“.
Fragen und Aufgaben zum Thema
Bevor Sie mit dem nächsten Thema fortfahren, erledigen Sie die Übungsaufgabe:
Wenn Sie Schwierigkeiten haben, die Übungsaufgabe zu lösen, können Sie das Beispiel jederzeit in einem separaten Fenster öffnen und die Seite überprüfen, um zu verstehen, welcher CSS-Code verwendet wurde.
2016-2019 Denis Bolshakov, Sie können Kommentare und Vorschläge zur Arbeit der Website an [email protected] senden
Vlad Merzhevich
Bei einer großen Anzahl von Zeilen in einer Tabelle kann es schwierig sein, Daten aus verschiedenen Spalten miteinander zu vergleichen. Dazu ist es erforderlich, eine Tabellenzeile optisch von einer anderen zu trennen, entweder durch die Verwendung von Linien oder durch das Hinzufügen einer Hintergrundfarbe.
Schauen wir uns zunächst die Möglichkeit an, horizontale Linien zu verwenden. In Abb. 1 zeigt eine der Möglichkeiten, die Aufmerksamkeit auf die Zeilen der Tabelle zu lenken. Jede Linie wird oben und unten von einer Linie umrahmt, so dass der Blick des Besuchers entlang dieser Linie gleitet und nicht zur nächsten Linie springt. In diesem Fall sind die in den Spalten befindlichen Daten ebenfalls miteinander verknüpft, jedoch aufgrund der gleichzeitigen Linksausrichtung und des Leerraums zwischen den Spalten.
Das Setzen von Linien zwischen Zeilen ist ganz einfach; fügen Sie dazu die Stileigenschaft „border-bottom“ zum TD-Selektor hinzu. Wenn es einen Rand um die Tabelle gibt, ist der untere Rand doppelt so dick. In diesem Fall können Sie die untere Zeile aus der letzten Zeile entfernen oder den unteren Rand aus der Tabelle ausblenden (Beispiel 1).
Beispiel 1: Tabellenzeilen durch Linien trennen
Tisch
2004
2005
2006
Rubine
43
51
79
Smaragde
28
34
48
Saphire
29
57
36
In diesem Beispiel werden vertikale Linien zwischen Kopfzellen mithilfe der Eigenschaft „Rahmenstil“ hinzugefügt, die für den TH-Selektor verwendet wird. Dadurch entsteht ein Leerraum von einem Pixel zwischen dem Tabellenrand und dem Hintergrundkopfbereich.
Der Einsatz von Farbe erweitert die Möglichkeiten, das Erscheinungsbild des Tisches zu verändern. Beispielsweise kann die Hintergrundfarbe gerader und ungerader Zeilen unterschiedlich sein, wie in Abb. 2.
Um die Hintergrundfarbe der erforderlichen Zeilen zu ändern, führen wir eine zusätzliche Klasse ein, nennen sie even und beginnen mit dem Hinzufügen zu den geraden Zeilen der Tabelle, nämlich zum Tag
. Beachten Sie, dass der TR-Selektor die Hintergrundfarbe nur über die Hintergrundeigenschaft festlegen kann. Alle für den TR-Selektor festgelegten Zeilen werden nicht angezeigt. Daher zeichnen wir einen unteren Rand an der Zelle, indem wir die Eigenschaft „border-bottom“ auf den TD-Selektor anwenden (Beispiel 2).
Die Hintergrundfarbe ungerader Zeilen wird durch Ändern der Farbe der gesamten Tabelle bestimmt. Da jedoch für selektive Zeilen eine individuelle Farbe festgelegt wird (für die der Parameter class="even" hinzugefügt wird), „überlappt“ diese die Hintergrundfarbe der Tabelle. Dadurch entstehen abwechselnd farbige Linien.
Beispiel 2. Hervorheben von Tabellenzeilen mit Farbe
Tisch
2004
2005
2006
Rubine
43
51
79
Smaragde
28
34
48
Saphire
29
57
36
Amethyste
23
64
97
In diesem Beispiel entsteht die Doppellinie am Ende der Tabelle nicht durch die Anwendung der Eigenschaft „border-collapse“ mit dem Wert „collapse“ auf den TABLE-Selektor. Diese Option erkennt das Auftreten von Doppellinien an den Stellen, an denen sich Zellen berühren, und ersetzt sie durch einzelne Linien. Bitte beachten Sie, dass es in verschiedenen Browsern zu Unterschieden in der Farbe der verbleibenden Linien kommen kann, wenn die Farbe des Rahmens um die Tabelle nicht mit der Farbe der Linien unterhalb der Zeilen übereinstimmt.
Es wurde populär, Webdesigner verwendeten hauptsächlich die Tabellenlayout-Methode und erzielten sehr gute Ergebnisse.
Tags, die zum Erstellen einer Tabelle in HTML verwendet werden
Tisch– ein erforderliches Tag, das die Tabelle öffnet und schließt Untertitel- optionales Tag, das den Tabellentitel angibt Th- ein optionales Tag, dessen öffnendes und schließendes Tag den Spaltennamen enthält. Erscheint normalerweise fett tr– ein erforderliches Tag, das die Zeile öffnet und schließt td– ein erforderliches Tag, das das Öffnen und Schließen einer Zelle in einer Zeile angibt
Beispielcode für eine einfache Tabelle
HTML-Tabelle
Tabellenname
Stobets 1
Stobets 2
Text in der ersten Zelle
Text in der zweiten Zelle
Der Browser wird angezeigt
Zweck von Tabellen in HTML
Der Tischunterricht ist sehr wichtig! Dank Tabellen können Sie nicht nur Texte, sondern auch Bilder, Links und vieles mehr anordnen. In der Tabelle können Sie angeben Hintergrund(oder seine Farbe), Vertiefung, Breite, Grenze Und andere Parameter, was ihm ein schönes Aussehen verleiht. Tabelle – Ihr erster Schritt zum Verstehen Web-Design! Früher waren viele Websites vollständig als Tabellen angelegt, d. h. alles, was der Benutzer sah (Seitenmenü, Hauptmenü, Inhalt), war der Inhalt der Zellen einer großen Tabelle. Kommen wir in diesem Sinne direkt zu den Attributen, die den Tisch schön machen ...
Eigenschaften und Parameter von HTML-Tabellen: Einrückung, Breite, Hintergrundfarbe, Rahmen (Rahmen)
U Tisch-Tag Es gibt folgende Attribute:
Breite- Tischbreite. kann in Pixel oder % der Bildschirmbreite angegeben werden. bgcolor- Hintergrundfarbe der Tabellenzellen Hintergrund- Füllt den Tabellenhintergrund mit einem Muster Grenze- Rahmen und Ränder in der Tabelle. Die Dicke wird in Pixel angegeben Zellpolsterung- Abstand in Pixeln zwischen dem Zellinhalt und seinem inneren Rand Wie zuvor schreiben wir den Attributwert in Anführungszeichen.
Schauen wir uns die Verwendung dieser Attribute anhand eines Beispiels an. Erstellen wir dazu eine Tabelle (aber bereits ohne die äußerst selten verwendeten Beschriftungs- und Th-Tags) und legen Sie den Parameter auf das Attribut fest Grenze, width (Breite der Tabelle, Zeile oder Zelle) Und bgcolor (Zellenfarbe)
HTML-Tabelle
Stobets 1
Stobets 2
Als Ergebnis wird die folgende Tabelle im Browser angezeigt: rahmen- ein Attribut, das den Rahmen um den Tisch angibt. Es gibt folgende Werte:
Nichtig - kein Rahmen, oben - nur der obere Rahmen, unten - nur unterer Rahmen, hsides - nur der obere und untere Rahmen, vsides – nur linker und rechter Frame, links – nur linker Rahmen, rhs – nur rechter Rahmen, Box - alle vier Teile des Rahmens.
Regeln– ein Attribut, das die Grenzen innerhalb der Tabelle zwischen Zellen angibt. Es gibt folgende Werte:
Keine – es gibt keine Grenzen zwischen den Zellen, Gruppen – Grenzen nur zwischen Zeilengruppen und Spaltengruppen (wird etwas später besprochen), Zeilen – nur Grenzen zwischen Zeilen, cols – Grenzen nur zwischen Spalten, alle – alle Ränder anzeigen.
Schauen wir uns das Codebeispiel an
HTML-Tabelle
Stobets 1
Stobets 2
Text in der ersten Zelle der ersten Spalte
Text in der zweiten Zelle der zweiten Spalte
Ergebnis
Versuchen wir nun, einen schönen Tisch zu erstellen. Beginnen wir dazu mit der Verwendung Tischausrichtung. Hierzu gibt es folgende bereits bekannte Parameter:
ausrichten- Tischausrichtung. Es kann links (links), rechts (rechts), in der Mitte (Mitte) platziert werden. Zellabstand- Abstand zwischen Tabellenzellen. Angabe in Pixeln (Standard 0 Pixel) Zellpolsterung- Abstand in Pixeln zwischen dem Zellinhalt und seinem internen Rand (Standard 0 Pixel) Schauen wir uns ein Beispiel an
HTML-Tabelle
Stobets 1
Stobets 2
Text in der ersten Zelle der ersten Spalte
Text in der zweiten Zelle der zweiten Spalte
Der Browser zeigt eine zentrierte Tabelle an, die so aussieht:
tr-Zeilen und td-Zellen in HTML-Tabellen
Ich möchte Sie noch einmal daran erinnern, dass Tabellen Zeile für Zeile (tr) erstellt werden. Die Zeilen (tr) enthalten bereits Zellen (td). Wenn Sie einen Parameter für eine Zeichenfolge (tr) angeben, ist dieser gültig für alle Zellen(td) in dieser Zeile, wenn für eine bestimmte Zelle, dann nur für diese. In den obigen Beispielen habe ich die Farbe für die Zeile angegeben, dieser Parameter wurde entsprechend auf alle Zellen verteilt.
Stobets 1
Stobets 2
Für tr- und td-Tags gibt es Folgendes
ausrichten- Ausrichtung von Text innerhalb einer Zelle. Linker Rand (links), rechter Rand (rechts), Mitte (Mitte) valign- Vertikale Ausrichtung des Textes innerhalb einer Zelle. Oben (oben), unten (unten), Mitte (Mitte) bgcolor- legt die Farbe der Linie fest Breite- Die Spaltenbreite (alle Zellen darunter akzeptieren diesen Parameter) wird in Pixeln oder als Prozentsatz angegeben, wobei 100 % die Breite der gesamten Tabelle ist Höhe- Zellenhöhe (alle Zellen in der Zeile akzeptieren diesen Parameter)
Schauen wir uns den Code an, in dem die Inhalte der Zellen (td) an verschiedenen Kanten ausgerichtet sind: in der ersten nach links, in der zweiten nach rechts:
HTML-Tabelle
Stobets 1
Stobets 2
Text in der ersten Zelle der ersten Spalte
Text in der zweiten Zelle der zweiten Spalte
Ergebnis
Mithilfe von Tabellen können Sie eine sehr gute Seite erstellen. Vergessen Sie nicht, dass Sie nicht nur Text in Zellen einfügen können, sondern auch Bilder, Links usw.!)
Vielen Dank für Ihre Aufmerksamkeit! Ich hoffe, das Material war nützlich!
Vom Autor: CSS verfügt über Selektoren, um Elemente basierend auf ihrer Position im Dokumentbaum zu finden. Sie werden Index-Pseudoklassen genannt, weil sie die Position des Elements und nicht seinen Typ, seine Attribute oder seine ID betrachten. Insgesamt gibt es fünf davon.
:erstes-Kind und :letztes-Kind
Wie der Name schon vermuten lässt, wählen die Pseudoklassen :first-child und :last-child das erste und letzte Kind in einem Knoten (Element) aus. Wie bei anderen Pseudoklassen haben :first-child und :last-child minimale Nebenwirkungen, wenn einfache Selektoren verwendet werden.
Schauen wir uns den folgenden HTML- und CSS-Code an:
:erstes-Kind und:letztes-Kind
Liste der Früchte
Äpfel
Bananen
Blaubeeren
Orangen
Erdbeeren
<
!
DOCTYPE
html
>
<
html
lang
=
"en-US"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>: erstes Kind und : letztes Kind<
/
title
>
<
/
head
>
<
body
>
<
h2
>Liste der Früchte<
/
h2
>
<
ul
>
<
li
>Äpfel<
/
li
>
<
li
>Bananen<
/
li
>
<
li
>Blaubeeren<
/
li
>
<
li
>Orangen<
/
li
>
<
li
>Erdbeeren<
/
li
>
<
/
ul
>
<
/
body
>
<
/
html
>
Der Screenshot unten zeigt das Ergebnis.
Der h2-Header und das erste li sind rosa gefärbt, weil:first-child nicht an bestimmte Elemente gebunden ist. Das h2-Tag ist das erste untergeordnete Element des body-Tags und li ist das erste untergeordnete Element des ul-Elements. Aber warum sind die restlichen Li-Elemente grün? Denn:last-child ist auch nicht an ein bestimmtes Element gebunden und ul ist das letzte untergeordnete Element im Body-Tag. Tatsächlich haben wir in den oben genannten Stilen *:first-child und *:last-child geschrieben.
Das Hinzufügen eines einfachen Selektors zu :first-child und :last-child macht sie spezifischer. Beschränken wir unsere Auswahl auf nur Listenelemente. Ersetzen Sie :first-child durch li:first-child und :last-child durch li:last-child. Der Screenshot unten zeigt das Ergebnis.
:nth-child() und :nth-last-child()
Es ist keine schlechte Idee, das erste und letzte untergeordnete Element in einem Dokument auswählen zu können. Was ist, wenn Sie gerade oder ungerade Elemente auswählen müssen? Möglicherweise müssen wir das sechste Element im Baum auswählen oder Stile auf jedes dritte untergeordnete Element anwenden. Dabei helfen uns die Pseudoklassen:nth-child() und:nth-last-child().
Wie :not sind auch :nth-child() und :nth-last-child() funktionale Pseudoklassen. Sie vertreten ein Argument, das lauten muss:
Schlüsselwort ungerade;
Schlüsselwort gerade;
ein ganzzahliger Wert vom Typ 2 oder 8;
Argument in der Form An+B, wobei A der Schritt, B der Offset und n eine positive Ganzzahlvariable ist.
Das letzte Argument ist etwas komplizierter als die anderen. Wir schauen uns das etwas später an.
Was ist der Unterschied zwischen :nth-child() und :nth-last-child()? Sie unterscheiden sich im Startpunkt: :nth-child() zählt vorwärts und :nth-last-child() zählt rückwärts. CSS-Indizes verwenden natürliche Zahlen und beginnen bei 1, nicht bei 0.
Mit den Pseudoklassen:nth-child() und:nth-last-child() ist es praktisch, alternierende Muster zu erstellen. Der gestreifte Tisch ist ein perfekter Anwendungsfall. Das folgende CSS gibt den geraden Zeilen in der Tabelle einen hellen bläulich-grauen Hintergrund, das Ergebnis ist im Screenshot unten zu sehen:
Wenn Sie von:nth-child zu:nth-last-child wechseln, werden die Balken invertiert, da die Zählung von unten beginnt. Siehe Screenshot unten.
Möchten Sie etwas Komplexeres mit komplexeren Argumenten? Erstellen wir ein Dokument mit 20 Elementen, wie unten gezeigt.
Mit :nth-child() und :nth-last-child() können Sie ein bestimmtes Element auswählen. Sie können alle untergeordneten Elemente nach einer bestimmten Position auswählen oder Elemente mit einem Vielfachen des Versatzes. Ändern wir den Hintergrund des sechsten Elements:
Item:nth-child(6) (Hintergrund: #e91e63;)
Auch hier ist A Schritt. Dies ist ein Faktor für n, der bei 1 beginnt. Das heißt, wenn A = 3, dann wählt 3n das dritte, sechste und neunte Element aus und so weiter. Genau das ist im Screenshot unten zu sehen.
Hier ist alles etwas interessanter. Mit :nth-child() und :nth-last-child() können Sie alle Elemente nach einem bestimmten Punkt auswählen. Wählen wir alle Elemente außer den ersten sieben aus:
Item:nth-child(n+8) (Hintergrund: #e91e63;)
Artikel: n-tes Kind (n + 8) (
Hintergrund: #e91e63;
Hier ist kein Schritt angegeben. Als Ergebnis wählt n+8 alle Elemente von n aus, beginnend mit dem achten. Siehe Screenshot unten.
Hinweis: negativer Offset
Auch negative Werte und Bereiche sind gültig. Ein Eintrag wie:nth-child(-n+8) kehrt die Auswahl um und wählt die ersten acht Elemente aus.
Mit Offset und Step können Sie jedes dritte Element auswählen, beginnend mit dem fünften:
Item:nth-child(3n+5) (Hintergrund: #e91e63;)
Artikel: n-tes Kind (3n + 5) (
Hintergrund: #e91e63;
Ergebnis.
Einzelkind
Die Pseudoklasse „Nur untergeordnete Elemente“ wählt ein Element nur aus, wenn es das einzige untergeordnete Element ist. Nachfolgend finden Sie zwei Listen mit Aufzählungszeichen. Das erste hat ein Element, das zweite hat drei:
Apfel
Orange
Banane
Himbeere
<
ul
>
<
li
>Apfel<
/
li
>
<
/
ul
>
<
ul
>
<
li
>Orange<
/
li
>
<
li
>Banane<
/
li
>
<
li
>Himbeere<
/
li
>
<
/
ul
>
Der Selektor li:only-child(color: #9c27b0;) wählt aus
Apfel
, da es das einzige untergeordnete Element der ersten Liste ist. Die Elemente der zweiten Liste werden nicht in die Auswahl einbezogen, da drei benachbarte Elemente vorhanden sind. Das Ergebnis ist unten dargestellt.
:leer
Sie können die Pseudoklasse :empty verwenden, um Elemente auszuwählen, die keine untergeordneten Elemente haben. Die Pseudoklasse:empty spricht für sich (empty vom englischen „empty“). Um in die Auswahl „:empty“ aufgenommen zu werden, muss das Element vollständig leer sein und darf keine Leerzeichen enthalten. Das heißt, es gelangt in die Probe, aber nicht.
Manchmal fügen WYSIWYG-Editoren leere p-Tags in Ihren Inhalt ein. Sie können :empty und :not verwenden, um zu verhindern, dass Stile auf diese Elemente angewendet werden. Beispiel: p:not(:empty).
Auswählen von Elementen eines bestimmten Typs anhand ihres Index
Die im vorherigen Abschnitt beschriebenen Pseudoklassen wählen Elemente aus, wenn sie eine bestimmte Position im Dokumentenbaum einnehmen. Beispielsweise wählt p:nth-last-child(2) alle p-Tags vor dem letzten im übergeordneten Block aus.
In diesem Abschnitt werden wir über typisierte Index-Pseudoklassen sprechen. Diese Pseudoklassen wählen Elemente auch nach Indexwert aus, die Auswahl ist jedoch auf einen bestimmten Typ beschränkt. Beispielsweise müssen Sie das fünfte p-Tag oder sogar h2-Tags auswählen.
Es gibt fünf solcher Pseudoklassen, deren Namen das genaue Gegenteil ihrer untypisierten Gegenstücke sind:
nth-last-of-type()
Es gibt einen schmalen Grat zwischen ihnen und untergeordneten Index-Pseudoklassen. Der Eintrag p:nth-child(5) findet nur das fünfte Tag p, während der Eintrag p:nth-of-type(5) alle Tags p findet und das fünfte auswählt.
Lassen Sie uns ein weiteres Dokument erstellen. Es hat auch 20 Elemente, nur einige sind p-Tags und andere sind divs. p-Tags mit abgerundeten Ecken, siehe Screenshot unten.
Finden Sie nicht, dass ein schwarz-weißer Tisch etwas langweilig aussieht? Das denken wir auch! Daher werden wir in diesem Tutorial darüber sprechen, wie man die Farbe einer Tabelle in HTML ändert. Es gibt drei Optionen zum Hinzufügen von Farbe, jede mit ihrer eigenen Eigenschaft.
Festlegen der Hintergrundfarbe von Zellen. Dies geschieht über die Immobilie Hintergrundfarbe.
Festlegen der Textfarbe in Zellen. Dies geschieht über die Immobilie Farbe.
Gibt die Farbe der Zellränder an. Dies geschieht über die Immobilie Randfarbe.
Bisher wurde zum Ändern der Farbe eine prägnantere Form der Rahmenbeschreibung verwendet. Sie sah so aus:
Rand: 1 Pixel einfarbig hellgrau
Und der letzte Teil war hier für die Farbe verantwortlich - hellgay.
Es gibt verschiedene Möglichkeiten, die Bedeutung von Farben festzulegen CSS. Wir zeigen Ihnen, wie Farbe mithilfe von Attributen beschrieben wird.
So ändern Sie die Zellenfarbe
Mal sehen, wie der Code aussieht CSS, das die Farbe für die Zelle angibt.
Td (Hintergrundfarbe: Hintergrundfarbe;)
Natürlich können Sie auch die Farben ändern Tisch, Und td, Und Th. Versuchen wir, unserer Multiplikationstabelle ein solideres Aussehen zu verleihen.
Fügen wir mit dem Tag Stile für Kopfzellen hinzu Th, sowie für diagonale Zellen, die Zahlenquadrate enthalten:
Multiplikationstabelle
Multiplikationstabelle
*
2
3
2
4
6
3
6
9
Ergebnis im Browser:
So ändern Sie die Rahmenfarbe in einer Tabelle
Wie Sie im obigen Beispiel bereits bemerkt haben, haben wir in der Tabelle die Farbe des Randes geändert. Hierfür haben wir die Eigenschaft border verwendet. Es legt die Parameter in der unten aufgeführten Reihenfolge fest:
Linientyp, in unserem Fall durchgezogen (durchgezogen)
Linienstärke, in unserem Fall 1px
Linienfarbe, in unserem Fall blau
Erinnern wir uns noch einmal daran, wie das Festlegen der Rahmenfarbe für eine Zelle aussieht:
Td (Rand: 1 Pixel durchgehend blau;)
So ändern Sie die Farbe einer Zeile in einer Tabelle
Wir haben also gelernt, wie man mithilfe von CSS-Funktionen die Farben von Zellen und Kopfzellen ändert. Wenn wir Stile für Tags wie angeben Th oder td, dann sollten Sie verstehen, dass die Stile auch für andere Tags gelten.
Es gibt jedoch Situationen, in denen Sie die Farbe einer bestimmten Zelle, mehrerer Zellen oder der gesamten Zeile ändern müssen. Was ist in diesem Fall zu tun? Hier sollten Sie Klassen verwenden und deren Stile anwenden. In der Praxis sieht es so aus:
RowGreen (Hintergrundfarbe:grün;)
Und um die Farbe bestimmter Linien mithilfe dieser Klasse zu ändern, müssen Sie Folgendes tun:
Tabelle mit abwechselnden Farben in Reihen
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Und das Ergebnis im Browser:
So ändern Sie die Textfarbe in einer Tabelle
Um die Textfarbe in der Tabelle zu ändern, verwenden Sie die Eigenschaft Farbe. Sie können es auf eine Vielzahl von Elementen anwenden: table, tr, th, td. Abhängig davon ändert sich die Farbe im ausgewählten Element. Beispielsweise stellen wir für die gesamte Tabelle die Schriftfarbe auf Grün ein:
Tisch (Farbe: grün; ...)
Ebenso können Sie die Farbe einzelner Zellen ändern. Und damit endet diese Lektion. Vergessen Sie nicht, Ihre Hausaufgaben zu machen. Tschüss zusammen!
