So erstellen Sie Rahmen in Tabellen-CSS

Die Standard-Browserstile zeigen die Tabelle und ihre Zellen ohne sichtbare Ränder oder Hintergrund an, und die Zellen innerhalb der Tabelle grenzen nicht aneinander. Mithilfe von CSS-Stilen können Sie eine Tabelle entsprechend ihrem Inhalt schön gestalten.

Tabellen mit Leerzeichen zwischen den Zeilen helfen Ihnen, sich auf verwandte Informationen zu konzentrieren, die sich in derselben Tabellenzeile, aber in benachbarten Zellen befinden. Um den Text vom Bild zu trennen, platzieren Sie ihn in einer anderen Zelle und verbinden gleichzeitig zwei Zellen im Tabellenkopf Modell , und entfernen Sie den rechten Rand zwischen den Zellen.

HTML-Markup

CSS-Stile

Tisch (
Randabstand: 0 10px;
Schriftfamilie: „Open Sans“, serifenlos;
Schriftdicke: fett;
}
th(
Polsterung: 10px 20px;
Hintergrund: #56433D;
Farbe: #F9C941;
Rand rechts: 2 Pixel fest;
Schriftgröße: 0,9em;
}
th:erstes-kind (
Textausrichtung: links;
}
th:last-child (
border-right: keine;
}
td(
vertikal ausrichten: Mitte;
Polsterung: 10px;
Schriftgröße: 14px;
Textausrichtung: Mitte;
border-top: 2px solide #56433D;
border-bottom: 2px solide #56433D;
Rand rechts: 2 Pixel durchgehend #56433D;
}
td:first-child (
Rand links: 2 Pixel durchgehend #56433D;
border-right: keine;
}
td:nth-child(2)(
Textausrichtung: links;
}

Mit dieser Technik können Sie eine Tabelle effektiv gestalten kontrastierende Farben, das sich harmonisch in das Farbschema Ihrer Website einfügt.

HTML-Markup

CSS-Stile

Tisch (

Schriftgröße: 14px;
border-collapse: Zusammenbruch;
Textausrichtung: Mitte;
}
th, td:first-child (
Hintergrund: #AFCDE7;
Farbe weiß;
Polsterung: 10px 20px;
}
th, td (
Randstil: solide;
Randbreite: 0 1px 1px 0;
Randfarbe: weiß;
}
td(
Hintergrund: #D8E6F3;
}

Textausrichtung: links;
}

Dank der Hinzufügung der Eigenschaft „border-radius“ zur CSS3-Spezifikation ist es nun möglich, die Ecken einer Tabelle abzurunden, ohne sie zu verwenden Hintergrundbilder. Um diesen Effekt zu erzielen, müssen Sie die Ecken der entsprechenden Zellen abrunden.

HTML-Markup
- ähnlich Beispiel 2.

CSS-Stile

Tisch (
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
Schriftgröße: 14px;
Randradius: 10px;
Randabstand: 0;
Textausrichtung: Mitte;
}
th(
Hintergrund: #BCEBDD;
Farbe weiß;
Textschatten: 0 1px 1px #2D2020;
Polsterung: 10px 20px;
}
th, td (
Randstil: solide;
Randbreite: 0 1px 1px 0;
Randfarbe: weiß;
}
th:first-child, td:first-child (
Textausrichtung: links;
}
th:erstes-kind (

}
th:last-child (

border-right: keine;
}
td(
Polsterung: 10px 20px;
Hintergrund: #F8E391;
}
tr:last-child td:first-child (
Randradius: 0 0 0 10px;
}
tr:last-child td:last-child (
Randradius: 0 0 10px 0;
}
tr td:last-child (
border-right: keine;
}

4. Tabelle mit separaten Zellen

HTML-Markup

- ähnlich Beispiel 2.

CSS-Stile

Tisch (
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
Textausrichtung: links;
Grenzkollaps: getrennt;
Randabstand: 5px;
Hintergrund: #ECE9E0;
Farbe: #656665;
Rand: 16px einfarbig #ECE9E0;
Randradius: 20px;
}
th(
Schriftgröße: 18px;
Polsterung: 10px;
}
td(
Hintergrund: #F5D7BF;
Polsterung: 10px;
}

HTML-Markup

CSS-Stile

Tisch (
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
Textausrichtung: Mitte;
border-collapse: Zusammenbruch;
Randabstand: 5px;
Hintergrund: #E1E3E0;
Randradius: 20px;
}
th(
Schriftgröße: 22px;
Schriftstärke: 300;
Polsterung: 12px 10px;

Farbe: #F56433;
}
tbody tr:nth-child(2) (
border-bottom: 2px solide #F56433;
}
td(
Polsterung: 10px;
Farbe: #8D8173;
}

HTML-Markup

CSS-Stile

Tisch (
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
Schriftgröße: 14px;
Textausrichtung: links;
border-collapse: Zusammenbruch;
Randradius: 20px;
Kastenschatten: 0 0 0 10px #F2906B;
Farbe: #452F21;
}
th(
Polsterung: 10px 8px;
Hintergrund:weiß;
}
Tabelle th:first-child (
Rand-oben-links-Radius: 20px;
}
Tabelle th:last-child (
Rand-oben-rechts-Radius: 20px;
}
td(
Rand oben: 10 Pixel einfarbig #F2906B;
Polsterung: 8px;
Hintergrund:weiß;
}
Tabelle td:first-child (
Rand-unten-links-Radius: 20px;
}
Tabelle td:last-child (
Rand-unten-rechts-Radius: 20px;
}

Ein vertikales Zebra im Tischdesign ermöglicht es Ihnen, die Spalten hervorzuheben, und der Effekt, wenn Sie mit der Maus über eine Zeile fahren, verleiht einem solchen Tisch mehr Attraktivität.

HTML-Markup

CSS-Stile

Tisch (
Randabstand: 0;
leere Zellen: verstecken;
}
td(
Polsterung: 10px 20px;
Textausrichtung: Mitte;

Übergang: alle 0,5s linear;
}
td:first-child (
Textausrichtung: links;
Farbe: #3D3511;
Schriftdicke: fett;
}
th(
Polsterung: 10px 20px;
Farbe: #3D3511;
border-bottom: 1px solid #F4EEE8;
Rand-oben-links-Radius: 10px;
Rand-oben-rechts-Radius: 10px;
}
td:nth-child(even) (
Hintergrund: #F6D27E;
}
td:nth-child(odd) (
Hintergrund: #D1C7BF;
}
th:nth-child(even) (
Hintergrund: #F6D27E;
}
th:nth-child(odd) (
Hintergrund: #D1C7BF;
}
.rund-oben (
Rand-oben-links-Radius: 5px;
}
.Rundboden (
Rand-unten-links-Radius: 5px;
}
tr:hover td(
Hintergrund: #D1C7BF;
Schriftdicke: fett;
}

HTML-Markup

CSS-Stile

Tisch (
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
border-collapse: Zusammenbruch;
Farbe: #686461;
}
Untertitel (
Polsterung: 10px;
Farbe weiß;
Hintergrund: #8FD4C1;
Schriftgröße: 18px;
Textausrichtung: links;
Schriftdicke: fett;
}
th(
border-bottom: 3px solide #B9B29F;
Polsterung: 10px;
Textausrichtung: links;
}
td(
Polsterung: 10px;
}
tr:nth-child(odd) (
Hintergrund:weiß;
}
tr:nth-child(even) (
Hintergrund: #E8E6D1;
}

HTML-Markup

CSS-Stile

Table_col(
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, Sans-Serif;
Schriftgröße: 14px;
Breite: 660px;
Hintergrund:weiß;
Textausrichtung: links;
border-collapse: Zusammenbruch;
Farbe: #3E4347;
}
.table_col th:first-child, .table_col td:first-child (
Farbe: #F5F6F6;
border-left: keine;
}
.table_col th(
Schriftstärke: normal;
border-bottom: 2px solide #F5E1A6;


Polsterung: 8px 10px;
}
.table_col td(
Rand rechts: 20 Pixel durchgehend weiß;
Rand links: 20 Pixel durchgehend weiß;
Polsterung: 12px 10px;
Farbe: #8b8e91;
}

HTML-Markup

CSS-Stile

table_blur(
Hintergrund: #f5ffff;
border-collapse: Zusammenbruch;
Textausrichtung: links;
}
.table_blur th (
border-top: 1px solide #777777;

box-shadow: Einschub 0 1px 0 #999999, Einschub 0 -1px 0 #999999;
Hintergrund: linearer Farbverlauf (#9595b6, #5a567f);
Farbe weiß;
Polsterung: 10px 15px;
Position: relativ;
}
.table_blur th:after (
Inhalt: "";
Bildschirmsperre;
Position: absolut;
links: 0;
oben: 25 %;
Höhe: 25 %;
Breite: 100 %;
Hintergrund: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) (
Hintergrund: #ebf3f9;
}
.table_blur th:first-child (
Rand links: 1 Pixel durchgehend #777777;
border-bottom: 1px solide #777777;
box-shadow: Einschub 1px 1px 0 #999999, Einschub 0 -1px 0 #999999;
}
.table_blur th:last-child (
Rand rechts: 1 Pixel durchgehend #777777;
border-bottom: 1px solide #777777;
box-shadow: Einschub -1px 1px 0 #999999, Einschub 0 -1px 0 #999999;
}
.table_blur td (
Rand: 1px fest #e3eef7;
Polsterung: 10px 15px;
Position: relativ;
Übergang: alle 0,5 Sekunden nachlassen;
}
.table_blur tbody:hover td (
Farbe: transparent;
Textschatten: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td (
Farbe: #444444;
Textschatten: keiner;
}

Tabellen sind ein weit verbreitetes Element zur Darstellung verschiedener Daten in Präsentationen, Vorträgen, Flyern und mehr. Aufgrund ihrer Übersichtlichkeit, Vielseitigkeit und Einfachheit werden Tabellen auch häufig auf Websites verwendet, um dem Leser den notwendigen Stoff besser zu vermitteln. Indem Sie die volle Leistungsfähigkeit von Stilen zu Tabellen hinzufügen, können Sie Tabellen sehr erfolgreich in das Website-Design integrieren und tabellarische Daten klar und schön darstellen.

Tischbreite

Standardmäßig wird die Breite der Tabelle vom Browser selbst basierend auf der Menge der darin enthaltenen Tabellendaten festgelegt. Befindet sich viel Text in den Zellen, nimmt die Tabelle die gesamte verfügbare Breite ein, ist nicht genügend Text vorhanden, verringert sich die Tabellenbreite automatisch. Wenn sich auf einer Seite mehrere Tabellen befinden, wirken deren unterschiedliche Breiten manchmal unauffällig. Daher ist es besser, die Tabellenbreite explizit in Prozent, Pixel, Ems oder anderen CSS-Einheiten festzulegen, wie in Beispiel 1 gezeigt.

Beispiel 1: Tabellenbreite in Prozent

Tabelle (Breite: 100 %;) .tbl-medium (Breite: 60 %;) .tbl-small (Breite: 200 px;)

In diesem Beispiel wird auf alle Tabellen eine Breite von 100 % angewendet. Auch hier helfen Klassen dabei, die Breite für ausgewählte Tabellen mithilfe einer zuvor erstellten Klasse festzulegen. Um der Tabelle eine Breite von 200 Pixeln zu geben, müssen Sie das Element hinzufügen

Tabellenausrichtung

Zunächst befindet sich jede Tabelle am linken Rand des Browserfensters. Sie können ihn in der Mitte ausrichten, es sei denn, der Tisch nimmt die gesamte verfügbare Fläche ein, also weniger als 100 %. Fügen Sie dazu Einzüge zum Tabellenstil hinzu, indem Sie die Eigenschaft margin mit dem Wert auto verwenden, wie in Beispiel 2 gezeigt.

Beispiel 2: Ausrichten einer Tabelle mit mit Marge

In diesem Beispiel sind alle Tabellen auf der Seite auf zentrierte Ausrichtung eingestellt.

Hintergrundfarbe

Die Hintergrundfarbe aller Tabellenzellen gleichzeitig wird über die Hintergrundeigenschaft festgelegt, die auf den Tabellenselektor angewendet wird. In diesem Fall sollten Sie die Regeln für die Verwendung von Stilen beachten, insbesondere die Vererbung von Elementeigenschaften. Wenn Sie gleichzeitig mit der Tabelle eine Farbe für den td- oder th-Selektor festlegen, wird diese als Hintergrund festgelegt (Beispiel 3).

Beispiel 3: Hintergrundfarbe

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

Reis. 1. Hintergrundfarbe ändern

Wenn wir ein Zebramuster erstellen möchten, wie abwechselnde Linien unterschiedlicher Farbe bezeichnet werden, sollten wir die Pseudoklasse :nth-child verwenden und sie dem tr-Selektor hinzufügen. Damit sich das Zebra nur bis zum Hauptteil der Tabelle und nicht bis zur Kopfzeile erstreckt, trennen wir sie mithilfe von Elementen voneinander Und (Beispiel 4).

Beispiel 4: Erstellen eines Zebras

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2.

Reis. 2. Zebra

Der gerade Wert des :nth-child-Selektors wendet den Stil auf alle geraden Zeilen an und legt deren Hintergrundfarbe fest. Sie können es auch in odd ändern, dann werden ungerade Zeilen grau hervorgehoben.

Ebenso werden Spalten und nicht Zeilen farblich hervorgehoben; hierfür sollten Sie den Tbody-Selektor td:nth-child(even) verwenden.

Ränder innerhalb der Zellen

Der Rand ist der Abstand zwischen dem Zellrand und seinem Inhalt. Ohne Ränder „klebt“ der Text in der Tabelle am Rahmen und beeinträchtigt dadurch seine Wahrnehmung. Durch das Hinzufügen von Rändern wird jedoch die Lesbarkeit des Textes verbessert. Hierzu wird die Eigenschaft padding style verwendet, die mit dem td- oder th-Selektor arbeitet, wie oben in den Beispielen 3 und 4 gezeigt. Typischerweise wird ein einzelner Wert angegeben, der dann den Leerraum um den Inhalt der Zelle angibt alle Seiten gleichzeitig. Wenn Sie verschiedene Felder vertikal (erster Wert) und horizontal (zweiter Wert) festlegen müssen, werden zwei Werte geschrieben.

Abstand zwischen Zellen

Zwischen den Zellen befindet sich ein kleiner leerer Raum, der erst sichtbar ist, wenn Sie einen Rahmen für die Zellen festlegen oder Hintergrundfarbe. Dieser Abstand beträgt zunächst 2 Pixel und kann mithilfe der Eigenschaft „border-spacing“ geändert werden, indem Sie sie zur Tabellenauswahl hinzufügen (Beispiel 5).

Beispiel 5: Verwendung von Randabständen

Tabelle ( border-spacing: 3px; /* Abstand zwischen den Zellen */ ) thead th ( Hintergrund: #e08156; /* Hintergrundfarbe der Kopfzeile */ Farbe: #333; /* Textfarbe */ ) td, th ( Innenabstand: 5px ; /* Felder in Zellen */ Hintergrund: #4c715b; /* Hintergrundfarbe der Zellen */ Farbe: #f5e8d0; /* Textfarbe */ )

Wenn wir diesen Stil zu einer beliebigen Tabelle hinzufügen, erhalten wir das in Abb. gezeigte Ergebnis. 3.

Reis. 3. Tabellenansicht mit Abstand zwischen den Zellen

Wenn der Tabelle die Eigenschaft border-collapse mit dem Wert collapse hinzugefügt wird, dann wird border-spacing ignoriert, da zwischen den Zellen kein Abstand mehr besteht.

Ränder und Rahmen

Um den Inhalt einer Zelle klar von einer anderen zu trennen, werden den Zellen Rahmen hinzugefügt. Sie werden durch die Eigenschaft „Rahmenstil“ erstellt, die auf Elemente angewendet wird ( oder ). Allerdings erwarten uns hier Fallstricke. Da für jede Zelle ein Rahmen erstellt wird, entsteht dort, wo sich die Zellen berühren, ein Rand doppelter Dicke. Es gibt mehrere Möglichkeiten, diese Funktion zu beseitigen. Am einfachsten ist es, die Eigenschaft „border-collapse“ mit dem Wert „collapse“ zu verwenden. Seine Aufgabe besteht darin, den Kontakt von Linien zu verfolgen und statt einer doppelten Umrandung eine einzelne darzustellen. Sie müssen diese Eigenschaft nur zum Tabellenselektor hinzufügen, und dann erledigt es alles von selbst (Beispiel 6).

Beispiel 6: Verwendung der Eigenschaft border-collapse beim Erstellen von Tabellenrändern

Der Unterschied zwischen Tabellenrändern mit und ohne die Eigenschaft border-collapse ist in Abb. dargestellt. 4.

Reis. 4. Tabellenansicht bei Verwendung von border-collapse

In Abb. Abbildung 4a zeigt den Standard-Tischrahmen. Bitte beachten Sie, dass innerhalb der Tabelle alle Linien doppelte Stärke haben. Durch das Hinzufügen von border-collapse wird diese Funktion entfernt und die Dicke aller Linien wird gleich (Abb. 4b).

Linien müssen sich nicht auf allen Seiten der Zellen befinden, sondern können so gestaltet werden, dass sie eine Zeile oder Spalte von einer anderen trennen. Dazu verwenden wir die Eigenschaften border-bottom , border-left und andere ähnliche Eigenschaften. Wenden Sie Ränder auf Elemente an , , Und Dies ist nicht möglich, daher fügen wir sie der Tabelle und dem TD-Selektor hinzu (Beispiel 7).

Beispiel 7. Zeilen zwischen Zeilen

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 5.

Reis. 5. Tabelle mit horizontalen Linien

Standardmäßig ist Text in einer Tabellenzelle linksbündig und zentriert ausgerichtet. Die Ausnahme ist das Element definiert es eine Kopfzelle, in der die Ausrichtung zentriert ist. Um die Ausrichtungsmethode zu ändern, verwenden Sie die Stileigenschaft text-align (Beispiel 8).

Beispiel 8: Zelleninhalte horizontal ausrichten

In diesem Beispiel der Inhalt ist nach links ausgerichtet und der Inhalt - Im Zentrum. Das Ergebnis des Beispiels ist unten dargestellt (Abb. 6).

Reis. 6. Text in Zellen ausrichten

Sofern nicht anders angegeben, erfolgt die vertikale Ausrichtung in einer Zelle immer zentriert. Dies ist nicht immer praktisch, insbesondere bei Tabellen, deren Zellinhalte in der Höhe variieren. In diesem Fall wird die Ausrichtung mithilfe der Eigenschaft „vertikal-align“ mit dem Wert top auf den oberen Rand der Zelle festgelegt, wie in Beispiel 9 gezeigt.

Beispiel 9. Zellinhalte vertikal ausrichten

In diesem Beispiel wird der Text am oberen Rand ausgerichtet. Das Ergebnis des Beispiels ist in Abb. dargestellt. 7.

Der Zweck der Lektion: Einführung in Tabelleneigenschaften und CSS-Tabellenlayoutprinzipien

Schauen wir uns die grundlegenden CSS-Tabelleneigenschaften an

Grenze

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

• BORDER-STIL
• RAHMENBREITE
• RANDFARBE

Es gibt auch eine allgemeine Regel:

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

Ergebnis:

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

Werte:

Beispiel:

Textausrichtung
(horizontale Ausrichtung)

Werte:

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

vertikal ausrichten
(Vertikale Ausrichtung)

Werte:

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

Beispiel:

Polsterung
(interne Einzüge in der Tabelle)

Hintergrundfarbe (Hintergrund)
Farbe (Textfarbe)

CSS-Tabellenlayout

Aufgrund der Vielzahl an Tabelleneigenschaften und Variationen in ihrer Gestaltung sind Tabellen seit langem ein Standard für das Webseitenlayout. Wenn Sie die Ränder der Tabelle unsichtbar machen, können Sie ihre einzelnen Zellen als separate Blöcke der Seite verwenden: Kopfzeile, Menü, Fußzeile usw.

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

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

Tabellarisches Layout mit zwei Spalten

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

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

Ergebnis:

Beispiel: Satz anderer Hintergrund Zellen (um zwei Spalten voneinander zu trennen) und den Abstand zwischen den Spalten festlegen (Trennzeichen)

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

Alle zusammen:

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

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

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

Alle zusammen:

Ergebnis:

Tabellenlayout mit drei Spalten

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

CSS-Layout korrigiert

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

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

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

Ergebnis:

Gummimodell

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

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

Beispiel:

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

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

Leistung:

Ergebnis:

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

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

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

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

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

Verwendung einer verschachtelten Tabelle in einem fließenden Layout

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

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

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

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

Legen Sie den Hintergrund für die Spalten fest.

Leistung:

1 2 3 Die Tag-Attribute „cellpadding“ und „cellspacing“ sind hier notwendig, um sicherzustellen, dass zwischen den Tabellen keine „Lücke“ entsteht. Ergebnis: Der Zweck der Lektion: Einführung in Tabelleneigenschaften und CSS-Tabellenlayoutprinzipien Schauen wir uns die grundlegenden CSS-Tabelleneigenschaften an Grenze Eine Eigenschaft wird in einem betrachtet und umfasst mehrere Eigenschaften gleichzeitig: BORDER-STIL RAHMENBREITE RANDFARBE Es gibt auch eine allgemeine Regel: table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; ) Ergebnis: Breite und Höhe (Tischhöhe und -breite) Werte: Beispiel: Textausrichtung (horizontale Ausrichtung) Werte: Mitte (Mitte) links (am linken Rand entlang) rechts (rechter Rand) ausrichten (Breite) vertikal ausrichten (Vertikale Ausrichtung) Werte: Grundlinie (entlang der Grundlinie) sub (als Subindex) super (wie superindex) oben (entlang der Oberkante) Mitte (in der Mitte) unten (entlang der Unterkante) % (der Zeilenabstandshöhe) Beispiel: Polsterung (interne Einzüge in der Tabelle) Hintergrundfarbe (Hintergrund) Farbe (Textfarbe) CSS-Tabellenlayout Aufgrund der Vielzahl an Tabelleneigenschaften und Variationen in ihrer Gestaltung sind Tabellen seit langem ein Standard für das Webseitenlayout. Wenn Sie die Ränder der Tabelle unsichtbar machen, können Sie ihre einzelnen Zellen als separate Blöcke der Seite verwenden: Kopfzeile, Menü, Fußzeile usw. Dies ist jedoch nicht ganz richtig, da jedes Tag seinen eigenen Zweck hat und die Tabellen nicht für das Seitenlayout verwendet werden sollten. Das Fehlen einer Alternative veranlasste Designer jedoch, diese spezielle Layoutmethode zu verwenden. Jetzt gibt es einen anderen Weg – die Verwendung von Ebenen, die bei dieser Art von Arbeit mit einer Webseite nach und nach Tabellen ersetzt haben. Doch auch in unserer Zeit nutzen einige Designer erfolgreich das Tabellenlayout. Tabellarisches Layout mit zwei Spalten Eine der gebräuchlichsten Layoutmethoden ist zweispaltig, d.h. Die Seite ist in zwei Teile gegliedert. Typischerweise ist die linke Seite das Menü und zusätzliche Elemente und die rechte Seite ist die Hauptseite für den Hauptinhalt. In diesem Fall wird die Breite des linken Teils auf einen bestimmten Wert eingestellt, d.h. starr, und die rechte Seite nimmt den restlichen Bereich der Seite ein. In diesem Fall müssen Sie die Gesamtbreite der gesamten Tabelle (Tabellen-Tag) in Prozent über die Eigenschaft „Breite“ (100 %) festlegen und für die erste Zelle (Tag „td“) die Breite (auch die Eigenschaft „Breite“) in Pixel festlegen oder Prozentsätze. Beispiel: Legen Sie den Hauptrahmen der Seite aus zwei Spalten fest: die erste – mit einer festen Größe, die zweite – für den verbleibenden Bereich des Browsers. Schließen Sie die Aufgabe mit CSS-Stilen ab () Leistung: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </tr> </Tabelle> ... 1 2 ... Ergebnis: Versuchen wir nun, zwei Spalten der Tabelle optisch voneinander zu trennen. Beispiel: Legen Sie unterschiedliche Zellhintergründe fest (um zwei Spalten voneinander zu trennen) und legen Sie den Abstand zwischen den Spalten fest (Trennzeichen). Leistung: Fügen wir neue Stileigenschaften hinzu: /* für die linke Zelle */ td#left( Breite: 200 Pixel; Hintergrund: #ccc; Rand: 1 Pixel durchgehend schwarz; /* markiert vorübergehend die Ränder */ ) /* für die rechte Zelle */ td#right( Hintergrund: #fc3; border:1px solid black; /* markiert vorübergehend die Ränder */ ) /* für den Teiler */ #razdel( width: 10px; /* Abstand zwischen Spalten */ ) Alle zusammen: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "razdel" > <td id = "right" > 2</td> </tr> </Tabelle> 1 2 Für das Trennzeichen wurde eine neue Zelle hinzugefügt. Ergebnis: Das Trennzeichen zwischen den Spalten kann auch weniger hervorgehoben werden. Dazu verwenden wir Rahmenstile. Beispiel: Erstellen Sie eine Trennlinie zwischen Tabellenspalten, indem Sie eine gepunktete Linie verwenden, die benachbarte Zellen begrenzt Leistung: Fügen wir neue Randeigenschaften für Zellen hinzu: /* für die linke Zelle */ td#left( width:200px; Hintergrund: #ccc; /* Hintergrundfarbe der linken Spalte */ /* neu */ border-right: 1px gestrichelt #000; /* Optionen für den rechten gestrichelten Rand * / ) Alle zusammen: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </tr> </Tabelle> 1 2 Ergebnis: Tabellenlayout mit drei Spalten Es gibt das Konzept eines festen oder „fließenden“ Layouts. CSS-Layout korrigiert Benutzen festes Layout Die Breite der gesamten Tabelle wird in Pixel angegeben, und dann hat die Tabelle unabhängig von der Auflösung des Monitors und des Browserfensters immer die gleiche Breite. In diesem Fall Auch die Breite der übrigen Spalten sollte festgelegt werden. Sie können die Breite einer Zelle nicht angeben, diese wird dann automatisch anhand der Größe der übrigen Zellen und der gesamten Tabelle berechnet. Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein festes Tabellenlayout: linke Spalte – 150 Pixel; mittlere Spalte – 400 Pixel; Leistung: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle> 1 2 3 Ergebnis: Gummimodell Tischbreite bei Verwendung der „Gummi“-Ausführung Wird als % der Breite des Browserfensters festgelegt. Das. Wenn sich das Browserfenster ändert, ändert sich auch die Tabellengröße. Breite aller Zellen installiert werden kann in Prozent. Die zweite Option ist wann Breite einiger Zellen ist installiert in Prozent, A einige - in Pixel. Wichtig: Die Summe der Breiten aller Spalten sollte 100 % betragen, unabhängig von der Breite der Tabelle. Beispiel: linke Spalte - 20 %; mittlere Spalte - 40 %; rechte Spalte – 40 %; Legen Sie einen Hintergrund für die Spalten fest und trennen Sie die Spalten optisch durch einen Rahmen. Leistung: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle> 1 2 3 Ergebnis: Betrachten wir die zweite Option, bei der die Breite der zentralen Spalte automatisch vom Browser ausgewählt wird; Ein Beispiel ist das folgende Bild: Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein flüssiges Tabellenlayout: linke Spalte – 150 Pixel; mittlere Spalte - 40 %; rechte Spalte – 200 Pixel; Legen Sie einen Hintergrund für die Spalten fest und trennen Sie die Spalten optisch durch einen Rahmen. Leistung: </Kopf> <Körper > <Tabellen-ID = „maket“ Zellenabstand = „0“ > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </tr> </Tabelle> 1 2 3 Ergebnis: Das Ergebnis wird ungefähr das gleiche sein, nur dass es aufgrund der Mittelsäule zu einer „Dehnung“ kommt. Verwendung einer verschachtelten Tabelle in einem fließenden Layout Wenn die Breite von zwei Spalten in Prozent und die der dritten in Pixel angegeben wird, kommt man mit nur einer Tabelle nicht aus. Wenn also die Breite der gesamten Tabelle 100 Prozent beträgt, die erste Spalte 200 Pixel und die übrigen Spalten 20 Prozent, dann ergibt eine einfache Berechnung, dass die Größe der ersten Spalte 60 Prozent beträgt. In diesem Fall wird der angegebene Wert in Pixel vom Browser nicht akzeptiert und die Größe wird in Prozent angegeben. Die ursprüngliche Tabelle wird mit zwei Zellen erstellt. Die Tabellenbreite wird in Prozent eingestellt. Für die linke Zelle(erste Spalte) Breite ist festgelegt in Pixel. Rechte Zellenbreite(Basis für andere Spalten) nicht angegeben. In diese Zelle wird eine zweite Tabelle eingefügt, die ebenfalls aus zwei Zellen besteht. Die Breite verschachtelter Tabellenzellen wird als Prozentsatz festgelegt. Die Breite der inneren Tabelle sollte auf 100 Prozent eingestellt sein sodass diese Tabelle den gesamten freien Platz in der externen Tabelle einnimmt. Die Breite der mittleren und rechten Spalte wird relativ zur Breite der Zelle berechnet, nicht der äußeren Tabelle als Ganzes. Beispiel: Erstellen Sie eine dreispaltige Seitenvorlage. Verwenden Sie ein flüssiges Layout mit einer verschachtelten Tabelle: linke Spalte – 150 Pixel; mittlere Spalte - 60 %; rechte Spalte – 40 %; Legen Sie den Hintergrund für die Spalten fest. Leistung: 1 2 3 Die Tag-Attribute „cellpadding“ und „cellspacing“ sind hier notwendig, um sicherzustellen, dass zwischen den Tabellen keine „Lücke“ entsteht. Ergebnis: In diesem Artikel erfahren Sie, wie Sie es verwenden CSS-Stile Tabellen formatieren. In den Anfängen des Internets verwendeten Designer häufig Tabellen zur Erstellung von Layouts. Mittlerweile sind fast alle Seiten mit gekennzeichnet CSS-Hilfe und Tabellen werden für ihren vorgesehenen Zweck verwendet – zur Anzeige von Daten. Tags für Tabellenlayout Der Tisch kann mit hergestellt werden Folgende Tags: Eine Tabelle kann mit den folgenden Tags erstellt werden: Definiert den Titel (eher eine Signatur) der Tabelle. Definiert eine Spalte in einer Tabelle. Definiert eine Gruppe von Spalten in einer Tabelle. Erstellt eine Tabelle. Definiert eine oder mehrere Zeilen in einer Tabelle. Erstellt eine Zelle in der Tabelle. Definiert die Zeilen, die am Ende der Tabelle angezeigt werden. Definiert einen Titel für jede Tabellenspalte. Entwickelt, um eine oder mehrere Zeilen zu speichern, die oben in der Tabelle angezeigt werden. Erstellt eine Zeile in einer Tabelle. Wie Sie sehen, können in Tabellen je mehr Tags verwendet werden, desto mehr CSS-Stile können wir im Einzelfall verwenden. Im Folgenden wird darauf eingegangen CSS-Eigenschaften, wird zum Formatieren von Tabellen verwendet. Grenzen Zellen erben nicht die im Tabellen-Tag beschriebenen Ränder. Die Ränder von Tabellenzellen können mit der Eigenschaft border beschrieben werden, allerdings entsteht dadurch eine Lücke. Th, td (Rand:2px einfarbig schwarz;) Dieser Leerraum kann mithilfe der CSS-Eigenschaft „border-spacing“ entfernt werden (für IE benötigen Sie das Attribut „cellspacing“ des Tabellen-Tags). Wenn Sie jedoch das Leerzeichen entfernen, verdoppeln sich die Ränder. Tabelle (border-spacing:0;) Um doppelte Ränder und Leerzeichen zu entfernen, verwenden Sie die Eigenschaft „border-collapse“ mit dem Wert „collapse“. Tabelle (border-collapse:collapse;) Einrückungen Einrückungen (in HTML-Attribut cellpadding) werden mithilfe der padding-Eigenschaft definiert. Kann nur auf Zellen angewendet werden ( ) oder in Zellen unter Überschriften ( ) . Th, td (padding:10px 12px 13px 14px;) Ausrichtung text-align-Eigenschaft Die Eigenschaften „text-align“ (Align-Attribut in HTML) und „vertikal-align“ richten den Inhalt innerhalb einer Tabellenzelle aus. Die text-align-Eigenschaft (Werte: left, right, center, justify) richtet den Inhalt horizontal aus. Umfang der Tags: , , . Th, td, Tabelle (text-align:center;) Vertical-Align-Eigenschaft Die Eigenschaft „vertikal ausrichten“ (Werte: top, baseline, bottom, middle) richtet Inhalte vertikal aus. Anwendungsbereich: th, td. Th, td (vertikal-align:bottom;) Formatieren Sie die Spalten Sie können Breiteneigenschaften und Hintergrundgruppeneigenschaften auf col- und colgroup-Tags anwenden. Dies ist praktisch, wenn Sie eine Spalte hervorheben oder auf eine bestimmte Breite festlegen möchten. Klasse und IDs Vergessen Sie beim Formatieren einer bestimmten Zelle oder Tabelle nicht die Klassen, Bezeichner usw. Freunden erzählen Twitter YouTuber sind... So gewinnen Sie Abonnenten auf YouTube: Ich teile kostenpflichtige und kostenlose Methoden, wie berühmte YouTube-Blogger Abonnenten gewinnen Nächster Artikel YouTube-Tochter Yoola VSP Group Lesen Sie auch So fügen Sie Fotos von einem Computer zu Instagram hinzu: Arbeitsmethoden 2023-10-16 00:04:34 So finden Sie das Passwort für VK auf Android heraus – finden Sie alles, was verborgen ist 2023-10-16 00:04:34 Richtige Auswahl von Hashtags auf Instagram 2023-10-16 00:04:34 So laden Sie Videos von Odnoklassniki kostenlos und ohne Registrierung herunter. Wie heißt die Anwendung zum Herunterladen in Odnoklassniki? 2023-10-16 00:04:34