Schöne Rahmen für HTML-Tabelle. Ändern Sie den Linienhintergrund beim Schweben

- 4,7 von 5 basierend auf 6 Stimmen

Beim Erstellen von Webseiten ist es sehr häufig erforderlich, Seiteninhalte in Form von Tabellen darzustellen.

Manchmal werden Tabellen verwendet, um eine Seitenstruktur zu erstellen. Dieser Ansatz ist nicht ganz korrekt, da Tabellen ursprünglich nicht zum Positionieren von Seitenelementen entworfen wurden.

Verwenden Sie zu diesem Zweck am besten CSS. In einigen Fällen sind Tabellen jedoch unersetzlich und praktisch für die Bereitstellung von Informationen.

Das Tag ist für die Erstellung von Tabellen in HTML verantwortlich.

und das schließende Tag
... Aber Sie wissen wahrscheinlich bereits, dass Tabellen aus Zeilen und Zellen bestehen. Um eine Tabelle zu erstellen, benötigen wir daher zwei weitere Tags: Dies ist ein Tag welches für das Erstellen von Strings verantwortlich ist, und das Tag, verantwortlich für die Erstellung von Zellen.

Um zu sehen, wie alles in der Praxis funktioniert, erstellen wir eine Tabelle, die aus zwei Zeilen und vier Zellen besteht. Unser Tabellencode lautet wie folgt:

1 - Zelle 2 - Zelle
3 - Zelle 4 - Zelle

Um zu sehen, was daraus wird, erstellen Sie eine HTML-Seite mit dem folgenden Code. Wenn Sie nicht wissen, wie Sie eine HTML-Seite erstellen, lesen Sie das Tutorial.

Tabelle

1 - Zelle 2 - Zelle
3 - Zelle 4 - Zelle

Sie sollten so etwas haben:

Wie Sie sehen können, sieht unser Tisch überhaupt nicht wie ein Tisch aus. Das liegt alles an unseren Tags

und Es gibt viele Attribute, die angegeben werden müssen, damit unsere Tabelle einen Rahmen, Hintergrund, Abmessungen usw. hat.

Zunächst werden wir uns die Attribute ansehen, die Tags inhärent sind

... Um zu sehen, wie sich unsere Tabelle ändert, können Sie diese Attribute Tags hinzufügen
Beobachten Sie beim Aktualisieren der Seite, wie die Tabelle im Browser aussehen wird. Der Einfachheit halber werde ich nicht den gesamten Code der Seite bereitstellen, sondern nur den Code, der sich auf das Tag bezieht das ist, was wir ändern werden.

Und so das Etikett

hat die folgenden Attribute:

border - Legt die Breite des Tabellenrahmens in Pixel fest, die wie folgt geschrieben sind:

.

bordercolor - Die Farbe des Tabellenrahmens. Dieses Attribut wird nicht von allen Browsern unterstützt, sodass möglicherweise die angegebene Rahmenfarbe nicht angezeigt wird:

Wir setzen die Rahmenbreite auf 2 Pixel, blau, die Tabelle sieht folgendermaßen aus:

width - Legt die Breite der Tabelle in Pixel oder Prozent fest:

höhe - Die Höhe der Tabelle in Pixel oder Prozent:

Die Tabelle wird 250 Pixel breit und 150 Pixel hoch sein. Die Tabelle sieht folgendermaßen aus:

ausrichten - Tabellenausrichtung;

align \u003d left - Tabellen werden nach links ausgerichtet.

align \u003d right - Die Tabelle wird rechtsbündig ausgerichtet:

Unser Tisch sollte rechtsbündig sein.

bgcolor - Hintergrundfarbe der Tabelle, bgcolor \u003d # FFC000 - Hintergrundfarbe der Tabelle ist gelb:

Die Tabelle sieht folgendermaßen aus:

hintergrund - Mit diesem Attribut können Sie ein Bild festlegen, das als Hintergrund für die Tabelle dient.

Speichern Sie beispielsweise das kleine Bild, das Sie in Klammern () sehen, in dem Ordner, in dem sich die Seite mit der Tabelle befindet, und im Tag

add background \u003d "fon.gif" den gesamten Code:

Die Tabelle sieht folgendermaßen aus:

zellenauffüllung ist ein Attribut, das die linke, rechte, obere und untere Auffüllung innerhalb einer Zelle festlegt. Zum Beispiel, wenn unser Tag

Wenn Sie cellpadding \u003d 10 hinzufügen, wird der in die Zellen geschriebene Text eingerückt.

zellenabstand - Legt den Abstand zwischen Tabellenzellen fest.

Wenn Sie sich unsere Tabelle genauer ansehen, werden Sie feststellen, dass zwischen den Zellenrahmen ein kleiner Abstand besteht. Dies ist der Einzug zwischen den Zellen. Er ist standardmäßig festgelegt. Um es zu entfernen, reicht es im Tag aus

Zellabstand vorschreiben \u003d 0. Alle Code:

Infolgedessen wurden unsere Zellen zusammengedrückt und der Text in den Zellen eingerückt:

hspace - Legt die Lücke von der Tabelle nach links und rechts in Pixel fest, die wie folgt geschrieben wird: hspace \u003d 20

nowrap - Verbietet Zeilenumbruch in einer Zelle, nur nowrap wird geschrieben

Die letzten beiden Attribute werden selten verwendet, daher zeige ich keinen Beispielcode mit ihnen.

Schauen wir uns nun die Attribute des Tags an

Einige von ihnen sind mit Tag-Attributen identisch

width - Die Breite der Zelle in Pixel oder Prozent.

höhe - Die Höhe der Zelle in Pixel oder Prozent.

Stellen Sie beispielsweise die Breite der ersten Zelle in der ersten Zeile auf 30% - width \u003d 30% und die Höhe der ersten Zelle in der zweiten Zeile auf 100px ein. Der Code sieht folgendermaßen aus:

1 - Zelle 2 - Zelle
3 - Zelle 4 - Zelle

Beachten Sie, dass es ausreicht, eine Zellenhöhe oder -breite festzulegen, und alle Zellen in dieser Zeile oder Spalte dieselbe Größe haben. Wenn Sie beispielsweise eine bestimmte Zellenhöhe festlegen müssen, reicht es aus, diesen Parameter für eine Zelle anzugeben, und alle anderen Zellen in der Zeile werden gleich.

align - richtet den Inhalt von Zellen aus und hat folgende Werte:

align \u003d "lef" - Der Inhalt der Zelle wird nach links ausgerichtet.

align \u003d "right" - Der Inhalt wird rechtsbündig ausgerichtet.

align \u003d "center" - Der Inhalt wird an der Mitte der Zelle ausgerichtet.

Fügen Sie diese Attribute und Werte zu unserem Code hinzu und richten Sie den Inhalt der 1. Zelle links aus (der Inhalt ist standardmäßig linksbündig, in einigen Fällen ist dieses Attribut jedoch erforderlich), der Inhalt der 2. Zelle ist rechtsbündig und der 4 .. Im Zentrum.

1 - Zelle 2 - Zelle
3 - Zelle 4 - Zelle

bgcolor - Mit diesem Attribut können Sie die Farbe der Zelle festlegen.

hintergrund - Legt das Bild als Hintergrund der Zelle fest.

Wir haben diese Attribute bereits unter Berücksichtigung der Attribute des Tags kennengelernt

... Sie funktionieren genauso, nur in diesem Fall legen sie den Hintergrund der Zelle fest. Lassen Sie uns beispielsweise die Hintergrundfarbe der 2. Zelle auf Gelb setzen und das folgende Bild () als Hintergrund für die 4. Zelle festlegen.

Fügen Sie dazu unserem Code die erforderlichen Attribute für unsere Zellen bgcolor \u003d "# FFFF00" für die 2. Zelle und background \u003d "fon.jpg" für die 4. Zelle hinzu. Infolgedessen sieht unsere Tabelle folgendermaßen aus:

Wie Sie sehen können, wird trotz der Tatsache, dass wir den Hintergrund der Tabelle selbst festlegen, der Hintergrund, den wir für die Zellen festgelegt haben, angezeigt, wenn wir den Hintergrund der Tabellenzellen festlegen.

bordercolor - Legt die Farbe des Zellrahmens fest.

Wir haben dieses Attribut auch bei der Betrachtung der Attribute des Tags erfüllt

... Ich möchte Sie daran erinnern, dass dies nicht in allen Browsern funktioniert. Beachten Sie, dass das Tag

In diesem Beispiel werden verschachtelte Tabellen verwendet, dh eine Tabelle in einer anderen. In der Reihe 1 Wir öffnen die erste Tabelle und füllen sie mit einer dunklen Farbe, in diesem Fall schwarz (# 00 00 00). Einer der Parameter der äußeren Tabelle ist zellabstandoder Cellpadding - sollte 0 sein und die andere 1. In Linie 4 Wir öffnen eine neue Tabelle mit weißem Hintergrund (# FF FF FF). Ein wichtiger Parameter der verschachtelten Tabelle ist ihre Breite - width \u003d "100%"... Tabellen sollten in umgekehrter Reihenfolge geschlossen werden - zuerst verschachtelt, dann außen.

Die obige Option kann verwendet werden, um einen Rahmen für die gesamte Seite zu erstellen. Es ist jedoch zu beachten, dass er nicht für Seiten mit einer großen Menge an Informationen geeignet ist, da der Browser ihn bis zum Ende lesen muss, bevor der Inhalt der Tabelle angezeigt wird. Somit sieht der Besucher einige Sekunden lang einen leeren Bildschirm.

Kasten 2

In diesem Beispiel handelt es sich um eine Tabelle. Um einen Rahmen zu erstellen, wird hier ein speziell entworfener Parameter verwendet rand, Dem wird der Wert 1 zugewiesen. Gleichzeitig der Parameter zellabstandgleich 0, sonst sieht der Rahmen folgendermaßen aus:

Es gibt kein Rahmenattribut, das den Zellenrand angibt. Setzen wir dazu die Rahmenfarbe der 2. Zelle auf Rot und fügen der zweiten Zelle das Attribut bordercolor \u003d "# FF0000" hinzu

Es gibt noch ein Attribut, mit dem der Inhalt von Zellen ausgerichtet werden kann:

valign - Richtet den Inhalt der Zellen vertikal aus.

Hat folgende Bedeutung:

valign \u003d "top" - richtet den Inhalt der Zelle nach oben aus;

valign \u003d "bottom" - Ausrichtung des Inhalts der Zelle nach unten;

valign \u003d "Mitte" - Ausrichtung in der Mitte der Zelle;

valign \u003d "Grundlinie" - Ausrichtung des Zellinhalts zur Grundlinie.

Fügen wir diese Attribute jeder unserer 4 Zellen hinzu.

1 - Zelle 2 - Zelle
3 - Zelle 4 - Zelle

Unser Tisch wird so aussehen:

Das Letzte, was wir in diesem Tutorial berücksichtigen müssen, ist die Verkettung von Tabellenzellen. Um mehrere Zellen in einer Zeichenfolge zu kombinieren, gibt es ein Attribut colspan \u003d "", wobei die Anführungszeichen die Anzahl der zu kombinierenden Zellen angeben.

Findest du einen schwarz-weißen Tisch nicht langweilig? Also denken wir so! In diesem Tutorial wird daher erläutert, wie Sie die Farbe einer Tabelle in HTML ändern können. Es gibt drei Möglichkeiten, Farbe hinzuzufügen, von denen jede ihre eigene Eigenschaft hat.

  1. Gibt die Hintergrundfarbe der Zellen an. Fertig mit der Eigenschaft hintergrundfarbe.
  2. Gibt die Farbe des Texts in Zellen an. Fertig mit der Eigenschaft farbe.
  3. Gibt die Farbe der Zellränder an. Fertig mit der Eigenschaft randfarbe.

Zuvor wurde eine präzisere Form der Rahmenbeschreibung verwendet, um die Farbe zu ändern. Sie sah so aus:

Rand: 1px festes Hellgrau

Und der letzte Teil war hier für die Farbe verantwortlich - lightrgay.

Es gibt verschiedene Möglichkeiten, die Bedeutung von Farben festzulegen CSS... Wir zeigen Ihnen, wie die Beschreibung der Farbe anhand von Attributen erfolgt.

So ändern Sie die Zellenfarbe

Mal sehen, wie der Code in aussieht CSSin dem die Farbe für die Zelle eingestellt ist.

Td (Hintergrundfarbe: Hintergrundfarbe;)

Natürlich können Sie auch die Farben ändern tabelleund bei tdund bei th... Versuchen wir, unserer Multiplikationstabelle ein solideres Aussehen zu verleihen.

Fügen Sie mit dem Tag Stile für die Kopfzellen hinzu thsowie für Zellen entlang der Diagonale, in denen sich die Zahlenquadrate befinden:

Multiplikationstabelle

Multiplikationstabelle
* 2 3
2 4 6
3 6 9

Ergebnis im Browser:

So ändern Sie die Rahmenfarbe in einer Tabelle

Wie Sie bereits im obigen Beispiel bemerkt haben, haben wir in der Tabelle die Rahmenfarbe geändert. Dafür haben wir die Eigenschaft border verwendet. Es setzt die Parameter in der unten aufgeführten Reihenfolge:

  1. linientyp, in unserem Fall fest
  2. linienbreite, in unserem Fall 1px
  3. linienfarbe, in unserem Fall blau

Erinnern wir uns noch einmal daran, wie das Festlegen der Rahmenfarbe für eine Zelle aussieht:

Td (Rand: 1px durchgehend blau;)

So ändern Sie die Farbe einer Zeile in einer Tabelle

Sie und ich haben also gelernt, wie Sie die Farben von Zellen sowie von Kopfzellen mithilfe der Funktionen von CSS ändern können. Wenn wir Stile für Tags wie bereitstellen th oder tdDann müssen Sie verstehen, dass die Stile für den Rest der Tags gelten.

Es gibt jedoch Situationen, in denen Sie die Farbe einer bestimmten Zelle oder mehrerer Zellen oder der gesamten Zeile ändern müssen. Was ist in diesem Fall zu tun? Hier sollten Klassen verwendet und ihre Stile angewendet werden. In der Praxis sieht es so aus:

RowGreen (Hintergrundfarbe: grün;)

Um die Farbe mit dieser Klasse zu ändern, müssen bestimmte Linien Folgendes tun:

Tabelle mit wechselnden 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 Farbe von Text in einer Tabelle

Verwenden Sie die Eigenschaft, um die Farbe des Textes in der Tabelle zu ändern farbe... Es kann auf eine Vielzahl von Elementen angewendet werden: table, tr, th, td. Abhängig davon wird die Farbe im ausgewählten Element geändert. Stellen Sie beispielsweise die Schriftfarbe für die gesamte Tabelle auf Grün ein:

Tabelle (Farbe: grün; ...)

Ebenso können Sie die Farbe für einzelne Zellen ändern. Und damit ist diese Lektion beendet. Vergessen Sie nicht, Ihre Hausaufgaben zu machen. Tschüss zusammen!

Mit Tabellen können Sie sehr interessante visuelle Effekte erzielen und gleichzeitig dünne Rahmen erstellen, die von allen Browsern fast gleich interpretiert werden. Schauen wir uns dazu einige Beispiele an.

Kasten 1

parameter zellabstand= 1

parameter zellabstand= 2

parameter zellabstand= 3

Diese Option ist einfacher als die erste, wird jedoch von Internet Explorer und Netscape leider nicht auf die gleiche Weise interpretiert.

Kasten 3
















<table border \u003d "0" cellspacing \u003d "0" cellpadding \u003d "0"\u003e










So sieht es aus









Wenn die beiden vorherigen Optionen Frames in unterschiedlichen Browsern anzeigen, wenn auch nur minimal, aber unterschiedlich dick, wird das dritte Beispiel von den gängigen Browsern Internet Explorer 4.x / 5.x / 6, Netscape 4.x / 6.x und Opera 6 interpretiert. x ist hinsichtlich der Randdicke gleich. Ich finde es angebracht zu erwähnen, dass Netscape 4.x für einen Webdesigner am problematischsten ist.
Aber schauen wir uns die dritte Option genauer an. Es basiert auf einer Tabelle mit 9 Zellen, die unten dargestellt ist:

1

2

3

4

6

7

8

9

Alle Zellen außer der fünften sind schwarz übermalt, die fünfte weiß. Der Hintergrund der Tabelle selbst ist in diesem Fall nicht wichtig. Dann wird der Parameter zu den Zellen 1-3 und 7-9 hinzugefügt höhe \u003d "1". Dementsprechend werden die Zellen 1, 3, 4, 6, 7, 9 um ein Pixel breit gemacht ( width \u003d "1"). Die mittleren Zellen 2, 5, 8 sind so breit wie möglich ( width \u003d "100%"). Der Trick besteht darin, dass den Zellen das sogenannte "modifizierte Malewitsch-Quadrat" hinzugefügt wird, das schmal oder dünn oder beides sein sollte - eine transparente GIF-Datei mit einer Größe von 1 x 1, da sonst der gewünschte Effekt nicht erzielt wird.

Diese Option ist zweifellos zu komplex und umständlich, um einen dünnen Rand um eine Tabelle mit einer Zelle zu erstellen, obwohl sie mit vielen Browsern kompatibel ist. Es wird hauptsächlich für das Seitenlayout mit dünnen Linien verwendet. Sie können auch Stylesheets verwenden, um Rahmen zu erstellen, aber mehr dazu in einem der folgenden Workshops.

Nächster Workshop

\u003e\u003e Vorbereitung zur Veröffentlichung

Vorheriger Workshop

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 äußeren Rand von 1px grau 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 Außenrand 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.

MitarbeiterGehaltBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin tan$150-Annie
Joyce ming$200$35Andy
James A. Pentel$175$25Annie
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 durchgehend transparent; 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 fest # 9baff1; Farbe: # 039; Polsterung: 8px;) td (Hintergrund: # e8edff; Rand rechts: 1px fest #aabcfe; Rand links: 1px fest #aabcfe; Farbe: # 669; Polsterung: 8px ;)

4. Horizontales Zebra

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

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

5. Zeitungsstil

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

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

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

Tabelle (Rand: 1px durchgehend # 6cf;) th (Schriftgröße: normal; Schriftgröße: 13px; Farbe: # 039; Texttransformation: Großbuchstaben; Rand rechts: 1px durchgehend # 0865c2; Rand oben: 1px durchgehend; # 0865c2; Rand links: 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); )

Um den Inhalt einer Zelle klar von einer anderen zu trennen, werden den Zellen Ränder hinzugefügt. Der Rahmenparameter des Tags ist für deren Erstellung verantwortlich.

Dies bestimmt die Dicke des Rahmens.

Beispiel 1 zeigt, wie Sie einen Rahmen um Zellen erstellen.

Beispiel 1. Hinzufügen eines Rahmens zu einer Tabelle





Randdicke







Cheburashka Krokodil Gena Shapoklyak


Auf diese Weise erstellte Frames unterscheiden sich geringfügig in ihrem Erscheinungsbild in verschiedenen Browsern.

Zahl: 1. Der mit dem Rahmenparameter erhaltene Rahmen

Um einen Rahmen des gleichen Typs zu erhalten, wird empfohlen, das Rahmenstil-Tag auf die Tabellenzellen anzuwenden (die oder ). Aber auch hier gibt es Fallstricke. Da für jede Zelle ein Rahmen erstellt wird, wird an den Kontaktpunkten der Zellen ein Rand mit doppelter Dicke erhalten. Es gibt verschiedene Möglichkeiten, um diese Funktion zu lösen. Am einfachsten ist es, die zum Reduzieren festgelegte Eigenschaft "Rahmen reduzieren" zu verwenden. Seine Aufgabe ist es, den Kontakt von Linien zu verfolgen und anstelle einer doppelten Grenze eine einzelne darzustellen. Wir fügen dieses Attribut des Datatkov zum Tag hinzu

und dann wird er alles selbst machen (Beispiel 2).

Beispiel 2. Verwenden von Rahmenkollaps zum Erstellen von Tabellenrahmen





Rahmenerstellung






0X.X.
00X.
X.X.0


Der Unterschied zwischen den Tabellenrändern beim Hinzufügen des Randkollaps-Parameters sowie ohne diesen ist in Abb. 1 dargestellt. 2.

ein

b

Zahl: 2. Tabellenansicht bei Verwendung des Border-Collapase-Attributs

In Abb. 2a zeigt den Standardtabellenrahmen. Beachten Sie, dass in der Tabelle alle Zeilen doppelt so breit sind. Durch Hinzufügen des Randkollaps-Parameters wird dieses Merkmal entfernt und die Dicke aller Linien wird gleich (Abb. 2b).

Um Linien des gleichen Typs in der Tabelle zu entwickeln, können Sie den anderen Weg gehen. Sollte für den Selektor hinzugefügt werden Rahmen, aber brechen Sie die rechte und untere Zeile ab, indem Sie die entsprechenden Attribute auf none setzen. Wenn die Zellen dann verbunden werden, überlappen sich ihre Ränder nicht miteinander, da nur eine Zeile vorhanden ist. Bei dieser Methode zum Bilden von Rahmen befinden sich jedoch keine Linien unterhalb und rechts von der Tabelle. Hinzufügen von Border-Right- und Border-Bottom-Parametern zum Selektor

Wir erhalten den gewünschten Frame (Beispiel 3). Aus Gründen der Konsistenz sollte in jedem Fall darauf geachtet werden, dass Stil, Dicke und Farbe des Randes übereinstimmen.

Beispiel 3. Erstellen eines Rahmens für eine Tabelle mit dem Attribut border





Rahmenerstellung






0X.X.
00X.
X.X.0


Diese Methode kann beispielsweise für den Selektor Variationen aufweisen Wir fügen einen Rand nur rechts und unten und bei hinzu

Im Gegenteil, wir fügen ein Rahmenattribut hinzu, entfernen jedoch die Linie rechts und unten. In jedem Fall ist das präsentierte Ergebnis eins.

Ein einfaches und originelles Aussehen der Tabelle erhalten Sie, indem Sie die Rahmenfarbe an die Hintergrundfarbe anpassen. Damit die Linien sichtbar sind, muss der Hintergrund des Tags unbedingt ausgefüllt werden

oder ... Dann werden die Tabellenzellen erhalten, als ob sie von einem Cutter untereinander geschnitten würden (Beispiel 4).

Beispiel 4. Verwenden unsichtbarer Rahmen in einer Tabelle





Grenzen schaffen







0X.X.
00X.
X.X.0


In diesem Beispiel wird die Hintergrundfarbe der Webseite über die Hintergrundeigenschaft eingefügt, die dem BODY-Selektor hinzugefügt wurde. Obwohl Weiß die Standardeinstellung ist, ist es manchmal wünschenswert, es so einzustellen, dass der Benutzer seine Hintergrundfarbe nicht über die Browsereinstellungen angibt. Die Zeilen der Tabelle sollten dieselbe Farbe haben. In diesem Fall werden sie eindeutig nicht angezeigt und teilen nur die Zellen untereinander auf.

Das Ergebnis von Beispiel 4 ist unten gezeigt.

Zahl: 3. Ansicht der Ränder, die der Hintergrundfarbe entsprechen

© 2020 Mobil- und Computer-Gadgets