Come creare una tabella con un bordo in HTML?
Esistono diversi tipi di bordi del tavolo disponibili in HTML. Puoi usare questi confini in base alla tua scelta. Tuttavia, nei tre esempi elencati di seguito, condivideremo con te i metodi per creare tre dei bordi della tabella più comunemente usati in HTML.
Esempio 1: creazione di un bordo della tabella crollata
Un bordo del tavolo crollato è quello in cui i bordi di tutte le cellule di un tavolo collassano e si fondono in un singolo bordo solido. In questo esempio, ti mostreremo come è possibile creare un bordo della tabella collassato in HTML utilizzando il seguente script HTML:
In questo esempio, abbiamo creato una tabella in HTML con l'aiuto del tag della tabella. Abbiamo selezionato un bordo "1 pixel solido" per questo tavolo e abbiamo anche scelto questo bordo per essere crollato, i.e., Tutte le celle del tavolo avranno lo stesso bordo. Quindi, volevamo che questa tabella avesse due colonne diverse, vale a dire "dipendente" e "designazione" e volevamo avere i registri di due diversi dipendenti in questa tabella. Pertanto, abbiamo menzionato i nomi di quei dipendenti e le rispettive designazioni all'interno di tag separati "TR" e "TD" di HTML.
Quando abbiamo eseguito lo script HTML sopra menzionato, la nostra tabella con bordo collassato è apparsa sulla pagina Web, come mostrato nell'immagine seguente:
Esempio 2: creazione di un bordo della tabella invisibile
Un bordo della tabella invisibile è quello in cui scegliamo un colore di sfondo per tutte le celle del nostro tavolo pur mantenendo il colore del bordo del tavolo come "bianco" a causa del quale sembra che il nostro tavolo sia senza confini. Per creare una tale tabella in HTML, dovrai utilizzare il seguente script HTML:
In questa sceneggiatura, abbiamo impostato il colore del bordo del tavolo come bianco in modo che possa apparire invisibile. Quindi, abbiamo scelto il colore di sfondo casuale per tutte le celle della nostra tabella. Successivamente, abbiamo usato le stesse voci della tabella che abbiamo usato nel nostro primo esempio.
Ora, quando abbiamo eseguito questo script HTML, la nostra tabella con un bordo invisibile è apparsa sulla pagina Web, come mostrato nell'immagine seguente:
Esempio 3: creazione di un bordo della tabella tratteggiata
Come dice il nome, un bordo del tavolo tratteggiato è quello il cui confine è nella forma di punti piuttosto che essere solido. Per creare una tale tabella in HTML, dovrai fare riferimento al seguente script:
In questo script di esempio, abbiamo scelto lo stile bordo tratteggiato per il nostro tavolo. Successivamente, il resto delle voci del tavolo è esattamente uguale a quelle che abbiamo usato nei nostri primi due esempi.
Al momento dell'esecuzione, questo script HTML ha reso una tabella con un bordo tratteggiato sulla pagina Web, come mostrato nell'immagine seguente:
Conclusione
Questo tutorial è stato creato per dimostrare l'uso e la creazione di bordi del tavolo in HTML. Per spiegarti in dettaglio, abbiamo parlato di tre diversi tipi di bordi del tavolo in HTML. Puoi vedere chiaramente l'impatto del cambiamento dello stile di frontiera sull'aspetto generale della tua tabella dagli esempi mostrati sopra. Pertanto, ora, puoi scegliere comodamente il bordo del tavolo che ti piace di più e crearlo in pochi secondi. Inoltre, puoi anche esplorare altri bordi della tabella disponibili in HTML da solo.