✅ HTML5 - Erweiterte Stile für Tabellen

Inhaltsverzeichnis

Innerhalb der neuen Spezifikationen von HTML5 Ja CSS Es gibt verschiedene Stile, die auf Tabellen angewendet werden können, um ihr Verhalten weiter zu definieren und an unser Konzept anzupassen, um unsere Seiten oder Dokumente zu erstellen. Die Elemente, die wir ändern können, sind die Kanten der Tabellen, die Umgang mit leeren Zellen, einschließlich der Anordnung derselben Tabelle.
Grenzkollaps
Gibt an, wie Rahmen in benachbarten Zellen behandelt werden. Die Werte, die diese Eigenschaft annehmen kann, sind: Zusammenbruch Ja trennen.
Mit dieser Eigenschaft können wir das Verhalten steuern, wie der Browser die Ränder zeichnet. Sehen wir uns dieses Bild an, wie der Browser standardmäßig damit umgeht:

Wir beobachten, dass auf dem Tisch ein Rahmen gezeichnet wird und in jeder Zelle desselben ein anderer Rahmen gezeichnet wird, dies erzeugt einen Doppelrahmeneffekt, sehen wir uns jetzt an, wie mit Grenzkollaps wir können mit diesem Problem umgehen.

 Beispiel 
 Ergebnisse der Obsterhebung 2011 

 
 Rang Süßkartoffel Farbe  Größe & Stimmen 

 

 

 
 Favorit: Äpfel Grün  Mittel 500 

 
 2. Favorit: Orangen Orange  Groß 450 

 

 
  Fruchtdatenunternehmen

Rang	Süßkartoffel	Farbe	Größe & Stimmen
Favorit:	Äpfel	Grün	Mittel	500
2. Favorit:	Orangen	Orange	Groß	450
Fruchtdatenunternehmen

Sehen wir uns an, was dieser Code im Browser generiert, bevor wir mit der Erklärung fortfahren:

Der Wert „collapse“, den wir in der Eigenschaft border-collapse platzieren, sagt uns, dass wir nicht möchten, dass an jedem angrenzenden Element ein Rahmen gezeichnet wird, was den Effekt erzeugt, den wir im vorherigen Bild gesehen haben.
Einstellen der einzelnen Kanten
Wenn statt zu verwenden Zusammenbruch Wir verwenden den separaten Standardwert der border-collapse-Eigenschaft, wir können zusätzliche Eigenschaften verwenden wie Grenzabstand Um den Abstand zwischen den Rändern benachbarter Elemente zu definieren, sehen wir uns das Beispiel an:

 Beispiel 
 Ergebnisse der Obsterhebung 2011 

 
 Rang Süßkartoffel Farbe  Größe & Stimmen 

 

 

 
 Favorit: Äpfel Grün  Mittel 500 

 
 2. Favorit: Orangen Orange   

 

 
 Fruchtdatenunternehmen

Rang	Süßkartoffel	Farbe	Größe & Stimmen
Favorit:	Äpfel	Grün	Mittel	500
2. Favorit:	Orangen	Orange
Fruchtdatenunternehmen

In diesem Beispiel geben wir einfach an, dass der Rahmen für die angrenzenden Elemente einen Abstand von 10 Pixeln hat. Sehen wir uns das Beispiel an, wie dies auf den Browser übertragen wird:

Umgang mit leeren Zellen
Wie wir im vorherigen Bild gesehen haben, weist der Browser auch leeren Zellen ein Leerzeichen mit Rahmen zu, dies möchten wir manchmal nicht in unserer Tabelle, daher können wir die folgende Änderung am vorherigen Code vornehmen, um mit leeren umgehen zu können Zellen.

Sehen wir uns an, wie das im Browser aussieht:

Tatsächlich konnten wir die leeren Zellen loswerden, ohne das Format unserer Tabelle zu verlieren.
Damit beenden wir das Tutorial, da wir sehen können, dass wir viele Änderungen an unseren Tabellen vornehmen können, um sie an das anzupassen, was wir konzeptualisieren und an unsere Bedürfnisse anpassen können.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben