Di solito, una tabella in HTML viene creata tramite "
"Tag. Tuttavia, la maggior parte degli sviluppatori Web per principianti pensa che questo sia l'unico modo per creare una tabella in HTML. Ma è anche possibile creare una tabella usando solo il ""Tag in HTML e applicazione delle proprietà in stile CSS sul contenuto Div.
Questo post fornirà una soluzione completa su come creare una tabella usando solo il ""Proprietà tag e CSS.
Come creare tabella tramite tag e CSS?
Gli sviluppatori possono creare una tabella in HTML aggiungendo un principale ""Tag per creare una tabella e poi multiplo""Tag al suo interno.
Esempio Considera il seguente esempio di codice HTML per creare una tabella:
ID Nome Età
001 fabbro 25
002 John 31
003 Charles 28
Nel frammento di codice sopra:
UN ""Il tag viene aggiunto con la classe denominata"Divtable".
Dentro il "div"Elemento contenitore, aggiungi un altro"div"Elemento contenitore con la classe dichiarata come"riga di intestazione".
Ancora una volta, aggiungi tre "div"Elementi che hanno le lezioni chiamate"Divrown"Con tre sottocampioni con il"Divcell" classe.
Quindi, aggiungi tre elementi Div Aggiungi "ID","Nome" E "Età"Nella riga di testa del tavolo.
Successivamente, specificare i valori per "id", "nome" e "età" per ogni elemento div.
Questo era tutto su come usare il "div"Elemento per creare una tabella. Ora applichiamo le proprietà CSS ad esso:
.Divtable
Visualizza: tabella; larghezza: auto; Background-color: #EEE; bordo: 1px solido #666666; Spazio di confine: 5px;
.Divrown
larghezza: auto; Display: Table-ROW;
.Divcell
larghezza: 150px; Float: a sinistra; display: colonna da tavolo; Background-color: RGB (212, 209, 209);
Nell'elemento in stile CSS sopra:
Aggiungi un selettore che si riferisce al "Divtable"(Che contiene tutti i valori della tabella) e definisce le proprietà CSS desiderate (i.e., "Schermo","larghezza","colore di sfondo","confine" E "spaziatura del confine") Per il contenuto della tabella.
Successivamente, aggiungi un selettore di classe che seleziona gli elementi di "Divrown"Classe per aggiungere il CSS"larghezza" E "Schermo"Proprietà agli elementi.
Infine, aggiungi le proprietà in stile CSS agli elementi in ".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 e proprietà CSS.
Conclusione
Una tabella in HTML può anche essere creata solo attraverso il tag DIV e le proprietà in stile CSS. Per fare ciò, creare un elemento di contenitore div separato per creare la tabella e alcuni elementi del contenitore div separati all'interno di quello per creare le righe della tabella. Ogni elemento del contenitore di div avrà le rispettive ID o classi. Inoltre, i selettori di classe vengono utilizzati per selezionare gli elementi Div e per applicare le proprietà CSS ad essi. Questo post ha guidato sulla creazione di una tabella solo usando il tag Div e CSS.
