Grafisches Tutorial zur Steuerung der inneren und äußeren Ränder, Farbe und Größe einer Tabelle mit HTML5+CSS

Standardmäßig löscht unser CSS den Rahmen der Tabelle. Teilen Sie uns die CSS-Stile mit, um die inneren und äußeren Ränder, Farben und Größen der Tabelle zu steuern.

Tatsächlich müssten die heutigen Websites Tabellen längst aufgegeben haben, p+CSS muss jetzt die dominierende sein! Allerdings war die Website des Kunden immer mit den Randeffekten beim Hinzufügen von Inhalten unzufrieden: entweder keine oder sehr dick. Es war offensichtlich, dass dieser Kunde ein Perfektionist war.

Standardmäßig löscht unser CSS den Rand der Tabelle. Es gibt keinen Rand. Der Effekt, den Sie sehen, ist dieser.

Randlose Tabelle

Um der Tabelle einen Rand hinzuzufügen, habe ich diesen Satz in CSS geschrieben:

.table{border:solid 1px #add9c0;}

Hey , es scheint, dass ich zu naiv bin. Der Effekt, den ich im Browser sehe, ist wie folgt:

Tabelle nur mit äußeren Rändern

Okay Ich gebe zu, ich habe Table seit einigen Jahren nicht mehr angerührt, aber das liegt überhaupt nicht in meiner Verantwortung, da Table tatsächlich von beliebten Designern aufgegeben wurde. Also habe ich den CSS-Stilsatz gelöscht und ihn wie folgt neu geschrieben:

.td{border:solid 1px #add9c0;}

Aber das Problem ist immer noch aufgetreten. Wie kann jemand mit einer so dünnen Anfrage wie dem Kunden den dicken Innenrand der Tabelle tolerieren? Wollstoff?

Tabelle mit sehr dickem Innenrand

Es gibt keine andere Möglichkeit, als den gerade geschriebenen CSS-Code zu löschen und zu schreiben direkt:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Okay, jetzt traust du dich immer noch, arrogant zu sein? Ist das nicht nur eine Frage der gehorsamen Unterwerfung?

Tisch mit sehr dünnen Rändern

Es ist keine Sünde, intim zu sein, aber wenn Textinhalt und Tischrand so nah beieinander liegen, dass keine Lücke entsteht , es wirkt sich auf das Erscheinungsbild aus, also ändern Sie die beiden Codezeilen jetzt leicht:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Wenn Sie möchten, dass beide Parteien so intim sind, schreiben Sie einfach so:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Okay, werfen wir jetzt einen Blick darauf. Was den Endeffekt betrifft, ist der Kunde zu diesem Zeitpunkt bereits sehr zufrieden, und das ist der Effekt, den er möchte!

Tabelle mit idealer Wirkung

Wenn Sie diese Methode an anderen Stellen verwenden, müssen Sie auf das standardisierte Schreiben von CSS-Code achten:

Empfohlene Schreibmethode: border-width:0px 1px 1px 0px;

Nicht empfohlen: border-width:0 1 1 0;

Abschließend möchte ich alle daran erinnern, dass wenn Sie Wenn Sie Table nicht verwenden können, verwenden Sie es nicht. Schließlich handelt es sich nicht um eine so fortschrittliche Technologie. Sie sollten versuchen, mit p+CSS zu arbeiten.

Das obige ist der detaillierte Inhalt vonGrafisches Tutorial zur Steuerung der inneren und äußeren Ränder, Farbe und Größe einer Tabelle mit HTML5+CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!