Come creare una tabella utilizzando solo tag e CSS

” tag al suo interno.

---

---

Esempio
Considera il seguente esempio di codice HTML per creare una tabella:

< div classe = 'tabella div' >
< div classe = 'riga di intestazione' >
< div classe = 'divCell' >< B > ID < / B >< / div >
< div classe = 'divCell' >< B > Nome < / B >< / div >
< div classe = 'divCell' >< B > Età < / B >< / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 001 < / div >
< div classe = 'divCell' > fabbro < / div >
< div classe = 'divCell' > 25 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 002 < / div >
< div classe = 'divCell' > John < / div >
< div classe = 'divCell' > 31 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 003 < / div >
< div classe = 'divCell' > Carlo < / div >
< div classe = 'divCell' > 28 < / div >
< / div >
< / div >

Nello snippet di codice sopra:

• UN '
  ” tag viene aggiunto con la classe denominata “ divTable ”.
• Dentro il ' div ” elemento contenitore, aggiungine un altro “ div ” elemento contenitore con la classe dichiarata come “ riga di intestazione ”.
• Di nuovo, aggiungi tre ' div ” elementi che hanno le classi denominate “ divRow ” con tre sottocontenitori con il “ divCell ' classe.
• Quindi, aggiungi tre elementi div aggiungi ' ID ”, “ Nome ' E ' Età ” nella riga di intestazione della tabella.
• Successivamente, specifica i valori per 'ID', 'Nome' e 'Età' per ciascun elemento div.

Questo era tutto su come usare il ' div ” per creare una tabella. Ora, applichiamo le proprietà CSS ad esso:

---

---

.divTable
{
display: tavolo;
larghezza :auto;
sfondo- colore :#eee;
confine :1px solido # 666666 ;
spaziatura del bordo: 5px;
}
.divRow
{
larghezza :auto;
display: riga della tabella;
}
.divCell
{
larghezza :150px;
galleggiante:sinistra;
display: colonna della tabella;
sfondo- colore : RGB ( 212 , 209 , 209 ) ;
}

Nell'elemento di stile CSS sopra:

• Aggiungere un selettore che fa riferimento a ' divTable ” (che contiene tutti i valori della tabella) e definire le proprietà CSS desiderate (ad esempio, “ Schermo ”, “ larghezza ”, “ colore di sfondo ”, “ confine ' E ' spaziatura dei bordi ”) per il contenuto della tabella.
• Successivamente, aggiungi un selettore di classe che seleziona gli elementi del ' divRow ” classe per aggiungere il CSS “ larghezza ' E ' Schermo ” proprietà agli elementi.
• Infine, aggiungi le proprietà di stile CSS agli elementi nel ' .divCell ” selettore di classe.

Questo creerà una tabella nell'output e visualizzerà i seguenti risultati:

Si trattava di creare una tabella in HTML utilizzando solo tag