Tavolo centrale CSS

“In questo articolo, esamineremo numerosi diversi modi in cui gli attributi in stile CSS potrebbero essere usati per allineare centralmente una tabella nel linguaggio di markup ipertestuale. La proprietà del margine è la proprietà più comune utilizzata per allineare una tabella. Questa proprietà può essere utilizzata con diversi valori e funzioni come la funzione automatica. Discuteremo diversi esempi relativi a questa proprietà e implementeremo anche in questo articolo."

Esempio 01: Creazione di una tabella al centro della pagina Web utilizzando il tag Style CSS in un file HTML

In questo caso, creeremo una tabella che sarà allineata al centro della pagina web. Il metodo CSS del tag di stile verrà utilizzato in questo caso. La proprietà del margine verrà utilizzata in questo esempio per allineare centralmente una tabella sul nostro browser.

In questo script, apriremo prima il tag Head. Nel tag Head, apriremo il tag in stile CSS. Nel tag di stile, daremo al tavolo e ai suoi elementi alcune proprietà di stile. Prima sarà la dimensione, la forma e il colore del bordo; Quindi, lo daremo un po 'di imbottitura. Alla fine del tag di stile, assegneremo la proprietà "margine" e quindi chiuderemo lo stile e il tag della testa. Dopo questo, apriremo il tag del corpo, in cui creeremo la nostra tabella usando il tag della tabella. All'interno del tag della tabella, gli daremo due set di righe. Nella prima riga verrà utilizzato il tag "Th", che assegnerà l'intestazione della colonna della tabella. Quindi creeremo la seconda riga con il tag "TR" e daremo a questa riga alcuni dati per le colonne utilizzando il tag "TD".

Come possiamo vedere nell'output sopra, la tabella è allineata al centro della pagina a causa della proprietà auto margin che è stata assegnata nell'intestazione del file.

Esempio 02: Utilizzo della tecnica CSS in linea per allineare una tabella al centro di una pagina HTML

In questo esempio, utilizzeremo la proprietà margine con la funzione automatica, che allineerà la tabella al centro della pagina web. L'approccio CSS in linea verrà utilizzato in questo esempio per raggiungere l'obiettivo.

In questo script, inizieremo direttamente dal tag del corpo. Inizieremo con il tag H1 per dare un'intestazione alla pagina. Quindi inizieremo il tag del tavolo in cui chiameremo la chiamata di stile e gli daremo un bordo con la sua forma, dimensione e colore come proprietà. Quindi daremo al tavolo un po 'di imbottitura e la proprietà del margine con la funzione automatica verrà chiamata. Il tag "TR" verrà quindi utilizzato per aggiungere due righe alla tabella. Useremo il tag "Th" per fornire la colonna dei nomi della tabella e il tag "TD" per assegnare i dati alla seconda riga della tabella. La parola chiave in linea CSS in linea verrà applicata ai tag "Th" e "TD" per fornire funzionalità stilistiche ai componenti della tabella in modo indipendente. Le proprietà di stile includono il bordo con forma, dimensioni, colore e imbottitura.

Dopo aver salvato lo script precedente e averlo aperto su qualsiasi browser a tua scelta, otterremo l'output. Come possiamo vedere che abbiamo allineato con successo la tabella con il centro della pagina usando l'approccio CSS in linea.

Esempio 03: Utilizzo delle proprietà CSS a sinistra margine e margine-destra per allineare una tabella al centro della pagina in un file HTML

In questo esempio, verrà utilizzato l'approccio CSS di stile. Qui creeremo una tabella che sarà centrata sulla pagina. La proprietà del margine verrà separata in due pezzi, sinistra e destra, che verrà quindi utilizzata per allineare centralmente una tabella sulla pagina del nostro browser in questo esempio.

Il tag principale verrà aperto per primo in questo script. Il tag in stile CSS verrà aperto nel tag Head. Daremo al tavolo e alle sue parti alcune caratteristiche stilistiche con il tag di stile. La dimensione, la forma e il colore del bordo arriveranno per primi, seguiti da imbottitura. Dopo il tag di stile, assegneremo le proprietà "margine-destra" e "margine-sinistra" e daremo loro valori percentuali prima di chiudere lo stile e le etichette per la testa. Successivamente, apriremo il tag del corpo e inizieremo fornendo alla pagina un'intestazione utilizzando il tag H1. Il tag della tabella verrà quindi utilizzato per costruire la nostra tabella. Gli daremo due set di righe all'interno del tag della tabella.

Il tag "Th" verrà utilizzato nella prima riga per assegnare l'intestazione della colonna della tabella. Quindi, usando il tag "TR", creeremo la seconda riga e useremo il tag "TD" per popolare le colonne con i dati. Successivamente, chiuderemo tutti i tag e salveremo il file per preservare le modifiche che verranno visualizzate sul nostro browser, come mostrato di seguito:

La tabella è allineata al centro della pagina, come mostrato nell'output sopra, a causa delle proprietà di margine-sinistra e margine-destra impostate nell'intestazione del file.

Esempio 04: Utilizzo delle proprietà CSS a sinistra margino e margine-destra con la funzione automatica per allineare una tabella al centro della pagina

In questo esempio, verrà utilizzato l'approccio CSS di stile. Qui, faremo un tavolo che esiste al centro della pagina. La proprietà del margine sarà divisa in due sezioni, a sinistra e a destra, che verranno quindi utilizzate per allineare centralmente una tabella nel nostro esempio utilizzando la funzione automatica nella pagina del nostro browser.

In questo script, il tag principale verrà aperto per primo. Nel tag principale, il tag in stile CSS verrà aperto. Con il tag di stile, daremo al tavolo e ai suoi componenti alcune qualità stilistiche. L'imbottitura arriverà dopo la dimensione del bordo, la forma e il colore. Prima di chiudere lo stile e le etichette della testa, aggiungeremo le proprietà "margine-destra" e "margine-sinistra" dopo il tag di stile e dare loro la funzione automatica come valore. Il tag della tabella verrà utilizzato per costruire il nostro tavolo.

All'interno del tag della tabella, gli daremo due set di righe. Il tag "th" verrà utilizzato nella prima riga per dare l'intestazione della colonna alla tabella. Quindi, usando il tag "TR", costruiremo la seconda riga e il tag "TD" verrà utilizzato per popolare le colonne con i dati. Successivamente, chiuderemo tutti i tag e salveremo il file per preservare le modifiche che saranno visibili nel nostro browser.

Poiché i valori di margine-sinistra e margine-destra nell'intestazione del file sono impostati su Auto, la tabella è allineata al centro della pagina, come mostrato nell'output sopra.

Conclusione

Abbiamo discusso di numerosi metodi che CSS fornisce per allineare una tabella al centro di una pagina web in questo articolo. La proprietà del margine è stata esplorata e implementata nel linguaggio di markup ipertestuale per realizzare questo fenomeno. Abbiamo usato la proprietà margin con diverse proprietà assegnate, come la funzione automatica e i valori percentuali, per allineare la tabella al centro. In questo articolo abbiamo implementato tutti gli esempi sull'IDE Notepad ++.