Wie geben Sie Tabellenpolster in CSS an

Ahmed Stöckert
Wie geben Sie Tabellenpolster in CSS an
Tabelle ist ein wichtiges Element von HTML, das zum Organisieren und Verwalten der Daten in Form von Zeilen und Spalten verwendet wird. Es folgt einem kartenähnlichen Fluss und kann Bilder, Statistiken und personenbezogene Daten speichern. Darüber hinaus können Benutzer das stylen “Element durch Anwenden mehrerer CSS -Eigenschaften. Zum Beispiel die Polsterung in die Tabellenzellen und vieles mehr festlegen.

Dieser Beitrag wird demonstrieren:

  • Wie man eine Tabelle in HTML erstellt?
  • So geben Sie eine Tabellenpolsterung in CSS an?

Wie man eine Tabelle in HTML erstellt?

Probieren Sie die angegebene Prozedur aus, um eine Tabelle in HTML zu erstellen/zu erstellen.

Schritt 1: Erstellen Sie den Container „Div“
Erstellen Sie zuerst eine “divContainer mit Hilfe der “Tag und zuweisen Sie es mit einem bestimmten Namen ein Klassenattribut.

Schritt 2: Tabelle machen
Als nächstes verwenden Sie die “

”Element zusammen mit dem“InhaltKlasse, um eine Tabelle im Div zu erstellen.

Schritt 3: Tabellenreihen hinzufügen
Fügen Sie nun das folgende Element dazwischen ein

Tag, um Tabellenzellen zu erstellen und Daten einzubetten:

  • “
Das Tag wird verwendet, um die Zeilen in der Tabelle anzugeben.
  • Danach fügen Sie die "hinzu"
    • Tags, um eine Header -Zelle zu definieren.
  • “
    • "Tag dazwischen" Tag "
    ”Wird verwendet, um die Datenzellen in der Tabelle hinzuzufügen:










    Name Grafschaft
    Hafsi Vereinigtes Königreich
    Edward Indien
    Bella USA
    Hase Pakistan
    Jack Afrika
    Heiraten Bangladesch
    Jazzy Singapur
    Jenny Iran

    Es kann beobachtet werden, dass die Tabelle erfolgreich erstellt wurde:

    So geben Sie eine Tabellenpolsterung in CSS an?

    Um die Tabellenpolsterung oder den Abstand anzugeben, können Sie verschiedene CSS -Eigenschaften verwenden, einschließlich “Grenzabstand","Zellenabstand", Und "Zellpadding”. Dies sind gültige Methoden zur Herstellung des Raums.

    Befolgen Sie die angegebenen Anweisungen, um eine Tabellenpolsterung in CSS anzugeben.

    Schritt 1: Stil "Div" Element
    Erstens zu "auf die" zu "div"Container mit Hilfe des zugewiesenen Klassenattributs".Main-div”. Wenden Sie dann die folgenden CSS-Eigenschaften an:

    .Main-div
    Rand: 20px 150px;
    Hintergrundfarbe: Bisque;
    Grenze: 4px gepunktet blau;

    Hier:

    • “Rand”Wird verwendet, um den leeren Raum außerhalb der Elementgrenze anzugeben.
    • “Hintergrundfarbe”Wird verwendet, um die Hintergrundfarbe des Elements festzulegen.
    • “Grenze”Definiert eine Grenze um das Element.

    Ausgang

    Schritt 2: Tischpolsterung einstellen
    Um die Tabellenpolsterung einzustellen, greifen Sie auf die “zu"Tisch.Inhalt" Klasse. Wenden Sie danach die folgenden codierten CSS -Eigenschaften an:

    Tisch.Inhalt
    Grenze: 5px fester RGB (228, 15, 15);
    Grenzabteilung: 12px;
    Rand: 50px 150px;
    Hintergrundfarbe: RGB (247, 209, 139);

    Hier das "GrenzabstandDie Eigenschaft wird verwendet, um den Abstand oder den Raum zwischen den Grenzen und angrenzenden Zellen in der Tabelle festzulegen.

    Wie Sie sehen können, wurde die Tabellenpolsterung hinzugefügt:

    Schritt 3: Style -Tabellen -Datenzellen
    Um CSS auf ein bestimmtes Element der Tabelle anzuwenden, greifen Sie zunächst mit der Tabellenklasse als “darauf zuTisch.Inhalt"Und Element -Tag -Name wie"td”:

    Tisch.Inhalt TD
    Grenze: Solid RGB (233, 36, 10) 1PX;

    Nach dem angegebenen Code -Snippet haben wir das angewendetGrenzeEigenschaft auf Datenzellen:

    Das ging nur darum, Tabellenpolster in CSS anzugeben.

    Abschluss

    Um die Tabellenpolsterung anzugeben, erstellen Sie zunächst eine Tabelle mit Hilfe des “

    " Schild. Greifen Sie dann mit dem Tag -Namen und der zugewiesenen Klasse auf die Tabelle in CSS zu. Danach anwenden Sie die “GrenzabstandEigenschaft auf der Tabelle, um den Raum zwischen den Grenzen benachbarter Zellen anzupassen. Dieser Beitrag hat das Verfahren zur Angabe der Tabellenpolsterung in CSS erläutert.

    AWS
    Warum sollte ich AWS -Organisationen verwenden??
    AWS -Organisationen können viele Konten in der Cloud verwalten, um Unternehmen zu helfen, die sich s...
    Mohamed Flore
    Docker
    Wie unterscheidet sich Docker vom Docker -Desktop??
    Docker ist eine Plattform, die CLI zum Verwalten von Containern bietet. Während Docker Desktop eine ...
    Lars Daub
    AWS
    Was ist eine Instanz und wie man sie in EC2 verwendet??
    Eine Instanz ist eine virtuelle Maschine auf der Cloud, die für die Verwendung kosten kann. Der EC2 ...
    Fr. Chris Frisch