Tabellen sind zweifellos das wichtigste Objekt bei der Webseitenerstellung, da Webseiten normalerweise für das Layout und die Organisation verschiedener Elemente auf Tabellen basieren. Sie bestimmen direkt, ob die Webseite schön und die Inhaltsorganisation klar ist. Viele Freunde vernachlässigen jedoch oft das Studium von Tabellen und konzentrieren sich auf andere Ebenen, Bilder, Spezialeffekte usw. Tatsächlich kann die sinnvolle Verwendung von Tabellen Ihre Seite leicht verschönern. Wir hören auch oft, dass Freunde sich darüber beschweren, dass die durch Tabellen erstellte Seite eintönig ist ., rau, mangelnde Abwechslung, und ich höre oft Leute fragen, wie man einen 1-Pixel-Tabellenrand erstellt. Tatsächlich können wir in Dreamweaver Ihre Tabelle ganz bequem verfeinern und so Ihre Webseite schöner und raffinierter machen. Wir stellen Ihnen in den folgenden drei Aspekten vor, wie Sie Ihre Tabelle in Dreamweaver verfeinern können.
1. Verwenden Sie das Eigenschaftenfenster.
Abbildung 1 Zuerst müssen wir die Parameter in den beiden Tabelleneigenschaftsfenstern verstehen: CellPad und CellSpace. Wie in Abbildung 1 dargestellt, bezieht sich CellPad auf den Abstand zwischen zwei Zellen in der Tabelle und CellSpace auf den Abstand zwischen jeder Zelle und dem Inhalt in der Mitte. Durch Ändern dieser beiden Parameter und Anpassen der Hintergrundfarbe können Sie ganz einfach einen 1-Pixel-Tabellenrand erstellen.
1. Verwenden Sie das Bedienfeld „Objekt“, um eine Tabelle einzufügen und die Breite, Höhe, Zeilen und Spalten der Tabelle zu definieren. Beachten Sie, dass die Standardwerte für CellPad, CellSpace und Border der in Dreamweaver eingefügten Tabelle zu diesem Zeitpunkt alle 0 sind. Wie in Abbildung 2 dargestellt;
Abbildung 2
2. Definieren Sie den Rand der Tabelle im Eigenschaftenfenster als 0, CellPad als 5 (dadurch bleiben 5 Pixel zwischen dem Inhalt in der Zelle und dem Rand der Zelle erhalten) (dadurch bleiben 5 Pixel zwischen den Zellen erhalten); ) 1 Elementabstand). Wie in Abbildung 3 dargestellt;
Abbildung 3
3. Stellen Sie die Hintergrundfarbe der Tabelle auf #999999 ein, wie in Abbildung 4 dargestellt.
4. Stellen Sie die Hintergrundfarbe der Zelle auf #FFFFFF ein, wie in Abbildung 5 dargestellt.
Abbildung 5
5. Sehen Sie sich den Effekt im Browser an. Wir können sehen, dass die Tabelle einen Pixelrand hat, wie in Abbildung 6 dargestellt.
Abbildung 62
: Tabellenverschachtelung verwenden.
Immer noch das Hauptprinzip oben: Wir können durch die Verschachtelung von Tabellen weitere Effekte erzielen.
1. Zuerst zeichnen wir eine Tabelle und legen die Werte und Farben von CellPad und CellSpace dieser Tabelle fest, indem wir uns auf das vorherige Beispiel beziehen. Der spezifische Effekt ist in Abbildung 7 dargestellt;
Abbildung 7 2. Zeichnen Sie als Nächstes eine weitere Tabelle mit einer Zeile und einer Spalte und legen Sie CellPad=2 und CellSpace=1 fest. Die spezifischen Parameter sind in Abbildung 8 dargestellt.
Abbildung 8
3. Verschieben Sie die im ersten Schritt erstellte Tabelle in die Tabelle im zweiten Schritt. Die Tabelle sieht nun wie in Abbildung 9 aus.
In Abbildung 9 sehen wir, dass diese Tabelle einen zweizeiligen Außenrahmen und einen einzeiligen Innenrahmen hat.
4. Ändern Sie die Tabelle im zweiten Schritt in eine einzelne Zeile und zwei Spalten und platzieren Sie im ersten Schritt in jeder Zelle eine Tabelle. Die endgültige Tabelle sieht wie in Abbildung 10 aus.
Definieren Sie
Abbildung 10
neu. Definieren Sie einen .tdstyle-Stil separat. Die spezifischen Parameter sind in Abbildung 13 dargestellt.
Beachten Sie hier, dass wir die obere und untere Randbreite auf 1 Pixel und die linke und rechte Randbreite auf 0 definieren.
4. Der Final-Table-Effekt ist in Abbildung 14 dargestellt;
(Bild 15)
Zu diesem Zeitpunkt präsentiert der Tisch einen dreidimensionalen Effekt.
6. Die obige Tabelle fühlt sich nicht perfekt an. Es gibt keine Ränder am rechten und unteren Rand der gesamten Tabelle. Wir können eine andere style.table1 definieren, die vier Seiten dieses Stils auf 1 Pixel festlegen und anhängen
