I web designer possono personalizzare i layout di pagina utilizzando tabelle nidificate progettando tabelle sempre più piccole con varie dimensioni delle celle in modo che ognuno mostri testo, grafica o entrambi. Più in particolare, i layout colonnari abilitati da tabelle nidificate su pagine Web senza l'uso di cornici fastidiose.
Questo post indicherà:
Come creare/creare una tabella in HTML?
Come creare una tabella nidificata in HTML?
Come creare/creare una tabella in HTML?
Per progettare un tavolo in HTML, il “
"Il tag viene utilizzato. Quindi, prova le istruzioni dichiarate.
Passaggio 1: crea un contenitore di div
Inizialmente, crea un contenitore div distribuendo il ""Elemento e aggiungi un attributo ID con un nome specifico in base alla tua scelta.
Passaggio 2: aggiungi l'intestazione
Successivamente, usa il tag di intestazione da "" A ""Per aggiungere un'intestazione all'interno del contenitore Div. A tale scopo, abbiamo usato il "H1"Tag di intestazione e testo incorporato all'interno del tag di apertura e chiusura di" H1 ".
Passaggio 3: Crea tabella
Per creare una tabella in HTML, inserire un “
"Tag e aggiungi una classe all'interno del tag della tabella con un nome specifico. Quindi, aggiungi gli elementi sotto l'elenco tra i tag della tabella:
"
"È utilizzato per definire le righe nella tabella.
"
"L'elemento viene utilizzato per aggiungere i dati all'interno della tabella.
Per fare ciò, incorporare i dati di testo in mezzo
:
Sito di tutorial di Linuxhint
Prima organizzazione
Seconda organizzazione
Terza organizzazione
Quarta organizzazione
Di conseguenza, è stata creata una semplice tabella nell'HTML:
Passaggio 4: modella il contenitore di div
Per modellare il contenitore Div, accederlo prima con l'aiuto di "#contenuto principale"E applica lo stile CSS in base alla tua preferenza:
#contenuto principale imbottitura: 20px 30px; Margine: 40px 140px; Border: 3px punteggiato di verde;
Per fare ciò, abbiamo applicato le proprietà sotto l'elenco:
"imbottitura"Determina lo spazio vuoto attorno all'elemento all'interno del confine definito.
"margine"Viene utilizzato per specificare lo spazio all'esterno del bordo.
"confine"È utilizzato per definire un limite attorno all'elemento definito.
Produzione
Passaggio 5: applicare lo stile sulla tabella
Accedi al tavolo con l'aiuto della classe del tavolo e applica lo stile con l'aiuto di CSS Proprietà:
.Table principale Bordo: 4px Ridge Blue; imbottitura: 20px 30px; Background-color: RGB (135, 197, 247);
In questo caso, abbiamo applicato il "confine","imbottitura", E "colore di sfondo" proprietà. IL "colore di sfondo"La proprietà determina il colore sul retro dell'elemento definito.
Passaggio 6: applicare lo stile su righe della tabella e colonne
Accedi al "tavolo", Insieme alle file"tr"E dati"td":
Tabella TR TD bordo: 3px verde solido;
Quindi, applica il "confine"Proprietà CSS per aggiungere il limite attorno alle righe e alle celle della tabella.
Produzione
Passa verso la sezione successiva se si desidera fare nidificata il tavolo.
Come creare/creare una tabella nidificata in HTML?
Per creare una tabella nidificata in HTML, prima crea una tabella con "
"Elemento e definire le righe all'interno della tabella. Quindi, aggiungi il "
"Elemento per aggiungere i dati all'interno dei dati. Dentro il "
"Tag di apertura e chiusura, inserisci"
"Per creare una tabella nidificata all'interno della tabella.
Per implicazioni pratiche, è necessario provare le istruzioni indicate di seguito.
Passaggio 1: creare contenitore "div"
Innanzitutto, crea un contenitore usando ""Con un attributo di classe all'interno del tag DIV.
Passaggio 2: inserire l'intestazione
Successivamente, aggiungi una voce utilizzando il ""Tag e incorporare il testo tra il tag.
Passaggio 3: fare il tavolo
Crea una tabella con l'aiuto di "
Tag e aggiungi "
" E "
".Per aggiungere il testo all'interno della tabella.
Passaggio 4: crea una tabella nidificata
Dentro il "
"Elemento, definisci un altro"
"Elemento per creare una tabella nidificata all'interno della tabella principale. Successivamente, aggiungi dati in base alla tua necessità:
Sito di tutorial di Linuxhint
Prima organizzazione
Seconda organizzazione
Dipendente 1
Dipendente 2
Dipendente 3
Dipendente 4
Terza organizzazione
Quarta organizzazione
Dipendente 1
Dipendente 2
Dipendente 3
Dipendente 4
Nota: Gli utenti possono aggiungere quante più tabelle possibile all'interno del
elemento del tavolo principale.
Si può vedere nel seguente output che la tabella nidificata è stata creata con successo:
Passaggio 4: tavolo nidificato in stile
Accedi alla tabella nidificata utilizzando l'ID con il selettore. Nel nostro caso, per accedere alla tabella utilizzando il "#Tabella nidificata"E applica lo stile con l'aiuto delle proprietà CSS:
Abbiamo applicato il “confine","colore", E "colore di sfondo"Proprietà e imposta il valore in base al desiderio sulla tabella nidificata.
Produzione
Si trattava di creare un tavolo nidificato in HTML.
Conclusione
Per fare una tabella nidificata in HTML, prima, creare una tabella utilizzando il “
"Tag. Quindi, definisci le file con l'aiuto di "
"Tag e aggiungi dati utilizzando"
". Dopodiché, all'interno del "
"Tag, crea un'altra tabella provando lo stesso metodo. Gli utenti possono anche applicare le proprietà CSS per lo styling della tabella e della tabella nidificata. Questo post ha dimostrato il metodo per la creazione della tabella nidificata in HTML.
