Wie füge ich Platz zwischen Spalten hinzu, ohne die Zeilen in einer HTML-Tabelle zu beeinträchtigen?
Die Eigenschaften „padding left“ und „right“ werden verwendet, um den Abstand zwischen den Spalten zu vergrößern, ohne das Gesamtlayout der Tabelle zu beeinträchtigen. Mit dieser Eigenschaft können Entwickler zusätzliche Abstände hinzufügen. Dieser Abstand wirkt sich nicht auf Zeilen aus.
Befolgen Sie die folgenden Schritte:
Schritt 1: Erstellen Sie eine Tabellenstruktur
Nehmen wir an, dass die HTML-Datei eine Tabelle enthält, die vier Zeilen und drei Spalten enthält:
< Tisch >
< tr >
< Th > Name < / Th >
< Th > Klasse < / Th >
< Th > Stadt < / Th >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > London < / td >
< / tr >
< tr >
< td > Alexander < / td >
< td > BS Mathematik < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / Tisch >
Nach der Ausführung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe bestätigt, dass eine Tabellenstruktur erstellt wurde.
Schritt 2: Anbringen der horizontalen Polsterung
Um den Abstand zwischen den Spalten auf der linken Seite hinzuzufügen, verwenden Sie die Option „ Polsterung links ” CSS-Eigenschaft. Nach Anwendung dieser Eigenschaft sehen die Daten wie die richtige Ausrichtung aus. Der Grund liegt darin, dass die Polsterung nur von der linken Seite erfolgt.
Wählen Sie nun das „td“-Element im CSS-Teil der Stile aus, die mit der Inline-Methode angewendet werden können. Fügen Sie dann die Auffüllung „ hinzu 50px ” um Abstände hinzuzufügen und eine Rahmeneigenschaft für bessere Visualisierungszwecke hinzuzufügen:
td {padding-left: 50px;
Grenze : 2px durchgehend rot;
}
Nach der Ausführung des Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe zeigt an, dass der Abstand zwischen den Spalten der Tabelle hinzugefügt wird.
Um nun die Polsterung von der rechten Seite einzustellen, muss „ Polsterung-rechts „Eigentum wird genutzt.“ Auf die gleiche Weise, aber jetzt sehen die Zelldaten so aus: linksbündig “. Der Code lautet:
td {padding-left: 50px;
Grenze : 2px durchgehend rot;
}
Nach der Ausführung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe bestätigt, dass der Abstand zwischen den Spalten durch Anwenden von Auffüllungen auf der rechten Seite vergrößert wird.
Schritt 3: Kombination der Polsterung links und rechts
Wie im obigen Schritt sind die Daten in beiden Fällen nicht zentriert, was die Daten unprofessionell macht. Um es hervorzuheben, ohne den Designsinn zu beeinträchtigen. Beide Eigenschaften können wie folgt gleichzeitig genutzt werden:
td {padding-right: 60px;
padding-left: 60px;
Grenze : 2px durchgehend rot;
}
Nach der Ausführung des obigen Codes sieht die Webseite folgendermaßen aus:
Die Ausgabe bestätigt, dass der Abstand zwischen den Spalten hinzugefügt wird und die Daten ebenfalls zentriert sind.
Abschluss
Der Abstand zwischen den Tabellenspalten kann mithilfe der Padding-Eigenschaften links und rechts hinzugefügt werden. Diese Eigenschaften fügen der Zelle zusätzlichen Platz von rechts und links hinzu. Beide Eigenschaften können gleichzeitig oder getrennt genutzt werden. In diesem Artikel wurde erfolgreich gezeigt, wie der Abstand zwischen den Tabellenspalten hinzugefügt werden kann, ohne dass dies Auswirkungen auf die Zeilen hat.