Html, testo e tabelle

Se pur colorata quanto volete, una tabella deve racchiudere qualcosa altrimenti non avrebbe scopo di esistere. Vediamo allora come combinare e formattare a dovere una tabella in modo che accolga al suo interno del testo.

Programmazione HTMLProgrammazione HTML

Allineamento del testo Vediamo, una volta inserito del testo, come allineare il testo all’interno della tabella con il comando align. Prima di tutto realizziamo la tabella.

 

 

Ecco la tabella:

Inseriamo del testo:

 

Ecco la mia tabella

 

Ecco come si presenta la tabella con il testo:

Ecco la mia tabella

Perfetto! Ora se volessimo allineare il testo al centro in questo modo:

Ecco la mia tabella

il codice sarà:

 

Ecco la mia tabella

 

Ebbene sì, rientrano in ballo i paragrafi. Con l’attributo p identifichiamo un paragrafo e con align lo allineamo a nostro piacimento, nel nostro esempio, al centro. Chiaramente per l’allineamento potete utilizzare i parametri left e a vostra scelta. I margini Se il testo risulta essere attaccato troppo al bordo della tabella, è possibile aumentare lo spazio tra questi due elementi utilizzando l’attributo cellpadding che ci consente di creare spazio espresso in pixel. Facciamo il confronto tra due tabelle, una senza cellpadding e una con cellpadding: Senza cellpadding:

Ecco la mia tabella

Con cellpadding impostato a 3pxl:

Ecco la mia tabella

Ecco il codice con cellpadding:

 

cellpadding=”3″ width=”400″>

Ecco la mia tabella

 

La spaziatura Ora vediamo come è possibile regolare la spaziatura del testo dentro la tabella. Riprendiamo il nostro esempio aggiungendo una riga di testo:

Ecco la mia tabella

Ecco la mia tabella

Vediamo ora come eliminare lo spazio creato tra i due paragrafi di testo per poter avere questo risultato:

Ecco la mia tabella

Ecco la mia tabella

 

style=”margin-top: 0; margin-bottom: 0″>Ecco la mia tabella

“margin-top: 0; margin-bottom: 0”>Ecco la mia tabella

 

Per eliminare lo spazio abbiamo utilizzato il tag style. Con margin-top per la spaziatura superiore e margin-bottom per quella inferiore,possiamo impostare a zero pixel questi due margini, ovvero, essendo ogni riga di paragrafo, una riga a sè, ad ognuna di esse abbiamo impostato i margini, uno superiore e uno inferiore, eliminandolo completamente. Proviamo a impostare il margine superiore a entrambi i paragrafi, a 5 pixel:

 

“margin-top: 5; margin-bottom: 0”>Ecco la mia tabella

“margin-top: 5; margin-bottom: 0”>Ecco la mia tabella

 

Ecco la mia tabella

Ecco la mia tabella

Come potete vedere tra il primo paragrafo e il secondo, nella parte superiore, viene creato uno spazio di 5pxl. Ora se imposto anche il margine inferiore a 5 pxl otterremo quanto segue:

Ecco la mia tabella

Ecco la mia tabella

Esercitatevi a dare varie misure ai margini provando così le varie combinazioni. Questa lezione appena vista è molto determinante ai fini dell’impostazione grafica del testo.

Pubblicato in

Se vuoi rimanere aggiornato su Html, testo e tabelle iscriviti alla nostra newsletter settimanale

Commenta per primo

Lascia un commento

L'indirizzo email non sarà pubblicato.


*