So erstellen Sie eine Tabelle nur mit Tag und CSS

“-Tags darin.

---

---

Beispiel
Betrachten Sie das folgende HTML-Codebeispiel, um eine Tabelle zu erstellen:

< div Klasse = 'divTable' >
< div Klasse = 'Kopfzeile' >
< div Klasse = 'divCell' >< B > AUSWEIS < / B >< / div >
< div Klasse = 'divCell' >< B > Name < / B >< / div >
< div Klasse = 'divCell' >< B > Alter < / B >< / div >
< / div >
< div Klasse = 'divRow' >
< div Klasse = 'divCell' > 001 < / div >
< div Klasse = 'divCell' > Schmied < / div >
< div Klasse = 'divCell' > 25 < / div >
< / div >
< div Klasse = 'divRow' >
< div Klasse = 'divCell' > 002 < / div >
< div Klasse = 'divCell' > John < / div >
< div Klasse = 'divCell' > 31 < / div >
< / div >
< div Klasse = 'divRow' >
< div Klasse = 'divCell' > 003 < / div >
< div Klasse = 'divCell' > Karl < / div >
< div Klasse = 'divCell' > 28 < / div >
< / div >
< / div >

Im obigen Code-Snippet:

• A '
  ”-Tag wird mit der Klasse namens “hinzugefügt divTabelle “.
• Im „ div ” Containerelement, füge ein weiteres hinzu “ div ” Containerelement mit der deklarierten Klasse „ Kopfzeile “.
• Fügen Sie wieder drei „ div ” Elemente, die die Klassen mit dem Namen “ divZeile “ mit drei Untercontainern mit dem „ divCell ' Klasse.
• Fügen Sie dann drei div-Elemente hinzu und fügen Sie „ AUSWEIS “, „ Name ' Und ' Alter “ in der Kopfzeile der Tabelle.
• Legen Sie danach für jedes div-Element die Werte für „ID“, „Name“ und „Alter“ fest.

Hier ging es um die Nutzung des „ div ”-Element, um eine Tabelle zu erstellen. Wenden wir nun die CSS-Eigenschaften darauf an:

---

---

.divTabelle
{
Anzeige: Tabelle;
Breite :Auto;
Hintergrund- Farbe :#eee;
Grenze :1px fest # 666666 ;
Randabstand: 5px;
}
.divZeile
{
Breite :Auto;
display:table-row;
}
.divCell
{
Breite :150px;
Schwimmer:links;
display:table-column;
Hintergrund- Farbe : RGB ( 212 , 209 , 209 ) ;
}

Im obigen CSS-Stilelement:

• Fügen Sie einen Selektor hinzu, der sich auf „ divTabelle “ (das alle Tabellenwerte enthält) und definieren Sie die gewünschten CSS-Eigenschaften (z. B. „ Anzeige “, „ Breite “, „ Hintergrundfarbe “, „ Grenze ' Und ' Grenzabstand “) für den Tabelleninhalt.
• Fügen Sie danach einen Klassenselektor hinzu, der die Elemente des „ divZeile „Klasse zum Hinzufügen des CSS“ Breite ' Und ' Anzeige ” Eigenschaften zu den Elementen.
• Zuletzt fügen Sie die CSS-Stileigenschaften zu den Elementen im „ .divCell „Klassenauswahl.

Dadurch wird eine Tabelle in der Ausgabe erstellt und die folgenden Ergebnisse angezeigt:

Dabei ging es darum, eine Tabelle in HTML nur mit