Ein einfaches Beispiel zum Erstellen einer dünnen Linientabelle in HTML

Wenn Sie wissen möchten, wie Sie diese Tabelle mit dünnen Linien erstellen, erhalten Sie bei einer Suche auf Baidu möglicherweise eine Antwort mit der Aufforderung, die folgenden Werte festzulegen: „set border="0" cellspacing="1" bgcolor="#990033" für die Tabelle und legen Sie auch die Hintergrundfarbe für die einzelnen Zellen fest, zum Beispiel: bgcolor="#fff". Aber eine nähere Erklärung, warum diese Werte gesetzt werden sollen, fehlt wohl!

Heute kam mir plötzlich die Idee, das Prinzip dieser dünnen Linientabelle aufzuzeichnen. Das liegt auch daran, dass ich in diesen Tagen Grundkurse für Studenten unterrichte. Studenten verstehen das Prinzip dieser dünnen Linientabelle nicht ganz. Anfänger werden also wahrscheinlich auf ähnliche Probleme stoßen. Deshalb werde ich hier erklären, warum diese Werte festgelegt sind.

Sehen wir uns zunächst die Auswirkung an, wenn der Rahmenwert der Tabelle auf 1 gesetzt wird. Selbst wenn border="1" und cellspacing="0" ist, sieht die Dicke der Tabelle immer noch grob aus:

Schauen wir uns an, welche Wirkung die Erstellung einer dünnen Linientabelle hat:

Im Vergleich dazu ist die folgende Tabelle verfeinert.

Lassen Sie mich nun die Schritte zum Erstellen einer dünnen Linientabelle zusammenfassen:

Schritte zum Erstellen einer dünnen Linientabelle:

1. Legen Sie die Hintergrundfarbe der Tabelle fest (d. h. die sichtbare Farbe des Tabellenrahmens).
2. Legen Sie die Hintergrundfarbe von td (Zelle) fest (die Gesamtfarbe der gesamten Tabelle optisch).
3. Setzen Sie den Rahmenwert der Tabelle auf 0 (border="0") und den Abstandswert auf 1 (cellspacing="1", sodass die Hintergrundfarbe der Tabelle durch diesen Abstand hindurch sichtbar ist und zu einem optischen Rahmen wird).

Analyse: Die Hintergrundfarbe der Tabelle ist eigentlich die dünne Linie, die die Tabelle optisch darstellt. Da wir den Rahmen auf 0 und den Zellenabstand zwischen den Zellen auf 1 setzen, ist die Hintergrundfarbe der Tabelle die Farbe, die durch die Lücke dieses Pixels erscheint. Das Festlegen der Hintergrundfarbe für die Zelle dient dazu, sie von der Hintergrundfarbe der Tabelle zu unterscheiden. Zum besseren Verständnis möchte ich es anhand von Bildern analysieren:

1. Angenommen, die folgende Tabelle hat den Wert border="1", dann wird sie wie folgt angezeigt:

2. Wenn cellspacing="0" gesetzt ist, lassen zwei 1-Pixel-Ränder nebeneinander den Rand sehr dick erscheinen:

Daher können Sie border="1" nicht verwenden, um den dünnen Linieneffekt einzustellen

Anschließend verwenden wir die Dünndrahtmethode und machen das Prinzip wie folgt:

Wenn dieser Artikel für Sie hilfreich ist, denken Sie bitte daran, ihn weiterzuempfehlen

Original-URL: http://www.cnblogs.com/xcaocao/p/5643351.html