CSS -Zellabstand

In diesem Artikel werden wir zahlreiche stilistische Optionen durchlaufen, mit denen Tabellenkomponenten wie Tabellenheader und Tabellendatenzellen einen gewissen Abstand erhalten. Das am häufigsten verwendete CSS -Attribut unter diesen Umständen ist die Randabstandseigenschaft, die in diesem Tutorial unter Verwendung des Notizblocks ++ IDE untersucht und implementiert wird. Um diesen Begriff in einer HTML -Datei anzuwenden, werden viele stilistische Optionen wie Inline -CSS und die Style Tag CSS -Methode verwendet.

Beispiel 01: Verwenden des CSS -Style -Tag -Ansatzes, um den Tabellenzellen in einer HTML -Datei den Abstand zu verleihen

In diesem Beispiel werden wir die Tabellenzellen mithilfe der Randabstandseigenschaft abhalten. In diesem Beispiel wird die Style Tag CSS -Methode verwendet, um den Tabellenkomponenten stilistische Funktionen hinzuzufügen. Die Notizblocke ++ IDE wird verwendet, um die HTML -Datei zu bearbeiten.

Im obigen Skript beginnen wir mit dem Header der Datei, in dem wir das Style -Tag öffnen werden. In diesem Tag geben wir allen Elementen zwei Styling -Eigenschaften, indem wir die Elemente verallgemeinern und separate Klassen für sie erstellen. Zunächst definieren wir das Styling für die gesamte Tabelle, in der wir die Eigenschaft zur Grenzabstand definieren, die dann einen bestimmten Platz zwischen dem Inhalt einer Zelle und ihrer Rand zuweist.

Dann werden wir eine andere Styling -Klasse erstellen. In dieser Klasse geben wir dem Tabellenheader, den Tabellendaten und der Tabelle selbst ein Styling, indem wir die Randlänge, Form und Farbe definieren. Dann schließen wir den Stil und das Kopfetikett und öffnen das Body -Tag. Im Körper Tag erstellen wir eine Tabelle mit zwei Zeilen. In der ersten Zeile geben wir den Spalten der Tabelle drei mit dem Tag „Th“, das den Tischkopf definiert. In der zweiten Zeile werden wir den Inhalt in die Spalten der Tabelle mit dem Tag "TD" einfügen. Dann schließen wir das Tischetikett und das Body -Tag. Speichern dieses Skript in der “.Das HTML -Format ermöglicht es uns, es in unserem Browser zu öffnen und die folgende Ausgabe zu erhalten:

Wir können im obigen Ergebnis sehen, dass die verschiedenen Zellen der Tabelle einen regelmäßigen Abstand zwischen sich haben, der im Randabstandsattribut innerhalb des Style -Tags bestimmt wurde.

Beispiel 02: Verwenden des Inline -Ansatzes im CSS -Stil, um den Tabellenzellen in einer HTML -Datei den Abstand zu verleihen

In diesem Beispiel werden wir die Randabstandseigenschaft und einen gewissen Stil verwenden, um Tabellenkomponenten wie die Tabellenheader- und Tabellendaten einiger Abstand zu ermöglichen. Der Inline -CSS -Ansatz wird in diesem Beispiel verwendet, um Stilmerkmale auf die Tabellenkomponenten anzuwenden.

Im obigen Skript beginnen wir mit dem Körper der Datei, in dem wir das Stil -Tag in jedem Element einzeln öffnen werden. Zunächst öffnen wir das Tabellen -Tag und weisen CSS über das Style -Keyword zu. Wir werden die Tabelle mit einem Rand der „1px“ -Rew, feste Form und der schwarzen Farbe zusammen mit der Randabstandseigenschaft zuweisen. Dann öffnen wir unsere erste Tabellenzeile, in der wir die Spaltennamen mit dem Tag "Th" definieren, in dem wir auch Inline -CSS verwenden, um dem Element Styling -Eigenschaften zu verleihen. Danach werden wir eine weitere Zeile hinzufügen, in der wir die Tabellendaten mit dem TD -Tag „TD“ definieren und Inline -CSS verwenden, um den Daten auch einen Rand zu geben. Dann schließen wir den Tisch und den Körpermarke. Wir speichern diese Datei und öffnen sie in unserem Browser, um das Ergebnis dieses Skripts auf der Seite unseres Browsers zu erhalten.

Im obigen Snippet können wir feststellen, dass beide Reihen der Tabelle einige Räume dazwischen haben, die in den Tags durch Inline -CSS definiert wurden.

Beispiel 03: Verwenden Sie die CSS -Technik der zweidimensionen Randabstand für eine Tabelle in einer HTML -Datei

In diesem Beispiel werden wir das Grenzabstandsattribut der doppelten Dimension verwenden, um den Tabellenzellen einen gewissen Abstand zu geben. In diesem Beispiel wird die Style Tag CSS -Technik verwendet, um stilistische Funktionen auf die Tabellenkomponenten anzuwenden.

Im folgenden Skript beginnen wir mit dem Header der Datei, in dem wir das Style -Tag öffnen werden. Indem wir die Komponenten verallgemeinern und jeweils unterschiedliche Klassen festlegen, werden wir allen zwei Stilparametern in diesem Tag zur Verfügung stellen. Erstens werden wir den Stil für die gesamte Tabelle erstellen, einschließlich der Randabstandseigenschaft, die einen definierten Abstand zwischen dem Inhalt einer Zelle und seiner Rand in zwei Dimensionen unabhängig zuweist.

Dann werden wir in einer anderen Style -Klasse das Styling auf den Tabellenheader, die Tabellendaten und die Tabelle selbst anwenden, indem wir die Randlänge, Form und Farbe festlegen. Die Stil- und Kopf -Tags werden dann geschlossen, während das Body -Tag geöffnet wird. Wir werden einen Tisch mit zwei Reihen im Körperetikett machen. Das "Th" -Tag wird in der ersten Zeile verwendet, um den Tabellenheader anzugeben. Und das TD -Tag wird in der zweiten Zeile verwendet, um Daten in die Spalten der Tabelle einzufügen. Dann schließen wir die Tisch- und Körper -Tags, die dieses Skript in “speichern“.HTML ”-Format, damit wir es in unserem Browser ausführen und die folgenden Ergebnisse erzielen können:

In der obigen Ausgabe können wir sehen, dass die einzelnen Zellen der Tabelle zwei verschiedene Lücken horizontal und vertikal dazwischen haben, was in der Randabstandseigenschaft innerhalb des Style -Tags definiert wurde.

Beispiel 04: Verwenden der alternativen Methode, um Platz zwischen Tabellenelementen zuzuweisen

In diesem Beispiel werden wir die Alternative der Grenzabstandseigenschaft nutzen, um Tabellenkomponenten wie den Tabellenheader und Tabellendaten zu stilen. Der Style Tag CSS -Ansatz wird in diesem Beispiel verwendet, um den Tabellenkomponenten stilistische Attribute zuzuweisen.

Im folgenden Skript beginnen wir mit dem Header der Datei und öffnen die Style-by-by-by-by-by-by-by-by-by-by-by-by-boy-by und zuweisen jedem Teil eine einzelne Klasse. Zunächst werden wir den Stil für die gesamte Tabelle entwerfen, einschließlich der Randkollaps -Funktion, die den Rand jedes Elements zusammenfasst, um Platz zwischen ihnen zu erhöhen. Die Tabellenheader, die Tabellendaten und die Tabelle selbst werden dann durch Anpassen der Randlänge, Form und Farbe gestylt. Das Body -Tag wird dann geöffnet, aber die Stil- und Kopf -Tags werden geschlossen.

Im Körper Tag erstellen wir eine Tabelle mit zwei Zeilen. Das "Th" -Tag, das den Tischkopf angibt. Das TD -Tag "TD" wird in der zweiten Zeile verwendet, um Informationen in die Spalten der Tabelle zu setzen. Dann schließen wir die Tisch- und Körper -Tags. Wir werden dieses Skript in “speichern“.HTML ”-Format, damit wir in unserem Browser darauf zugreifen und die folgende Ausgabe empfangen können:

In der obigen Ausgabe ist es sichtbar, dass die Tabellenelemente aufgrund des Rand Collapse -Eigentums einen einzigen Rand mit etwas Platz haben.

Abschluss:

In diesem Artikel haben wir mehrere Styling -Eigenschaften besprochen, die uns dabei geholfen haben, den Tabellenzellen einen gewissen Abstand zu geben. Die Randabstandseigenschaft ist die am häufigsten verwendete Eigenschaft in diesem Szenario, die in diesem Artikel mithilfe der Notepad ++ IDE erörtert und implementiert wurde. Wir haben drei einzigartige Beispiele zusammen mit ihrer Erklärung für jeden Schritt für die Leichtigkeit unserer Benutzer hinzugefügt.