Come aggiungere le tabelle in HTML su Tumblr

May 25

Come aggiungere le tabelle in HTML su Tumblr


L'aggiunta di una tabella HTML a un blog Tumblr prende un po 'di lavoro che semplicemente digitando alcune parole in editor di testo di Tumblr. Tavoli, che consistono di colonne e cellule, forniscono un ottimo modo per visualizzare i dati utili in formato tabulare. Dopo aver identificato le informazioni che si desidera includere nella tabella, utilizzare editor HTML di Tumblr per aggiungere la tabella al tuo blog Tumblr.

istruzione

1 Aprire il browser Web e passare alla Tumblr. Fare clic sull'icona "Impostazioni" in alto a destra della pagina, quindi fare clic sul pulsante "Personalizza il tuo blog". Fai clic su "Tema" per visualizzare il codice HTML il layout del tuo blog.

2 Premere il tasto "Ctrl" e "F" Il browser apre una casella di ricerca. Tipo "<body>" nella casella di ricerca e premere "Invio". Il tuo browser individua il tag "<body>" all'interno del codice.

3 Incollare il seguente codice dopo il tag:

<Table style = "text-align: center; float: left; border =" 1 "cellspacing =" 10 ">
<Tr>
<Td> Riga 1 Articolo 1 </ td>
<Td> Riga 1 Articolo 2 </ td>
</ Tr>

Questo codice definisce una tabella. Il tag "tavolo" crea la tabella; i tag "TR" definiscono una riga della tabella; tag "TD" definiscono le cellule all'interno della riga - la riga nell'esempio precedente contiene due celle. L'attributo text-align allinea il contenuto di ogni cella al centro di ogni cella. Sostituire "centro" con "sinistra" o "destra", se si desidera che i contenuti di ciascuna cella di apparire in una di quelle posizioni all'interno della cellula. proprietà border del tavolo è "1" Questo crea un bordo intorno al tavolo e mostra griglia all'interno della tabella. Se non si desidera quelli a comparire, il cambiamento "1" a "0" L'attributo "cellspacing" determina il numero di pixel visualizzati tra ogni cella. Tale valore è "10" in questo esempio. Fare quel numero più grande per aumentare la spaziatura tra le celle o più piccolo per diminuirlo.

4 Incollare il seguente codice sotto il codice mostrato nel passaggio precedente:

<Tr>
<Td> Riga 2 Articolo 1 </ td>
<Td> Riga 2 Articolo 2 </ td>
</ Tr>

Questo codice crea un'altra riga nella tabella. Questa riga contiene anche due celle che contengono diversi valori di testo: "Row 2 Voce 1" e "Row 2 Prodotto 2."

5 Aggiungi il tag HTML finale sotto il codice nel passaggio precedente:

</ Table>

Questo è tag di chiusura del tavolo, e termina la tabella.

6 Fai clic su "Anteprima Aggiornamento", quindi fare clic sul pulsante "Salva e chiudi" per tornare alla pagina Dashboard. Fare clic sull'icona del profilo in alto a sinistra della pagina per visualizzare il tuo blog. Il vostro tavolo appare nella parte superiore del blog.

Consigli e avvertenze

  • Il codice di esempio tabella completa si presenta così:
  • <Table style = "text-align: center; float: left; border =" 1 "cellspacing =" 10 ">
  • <Tr>
  • <Td> Riga 1 Articolo 1 </ td>
  • <Td> Riga 1 Articolo 2 </ td>
  • </ Tr>
  • <Tr>
  • <Td> Riga 2 Articolo 1 </ td>
  • <Td> Riga 2 Articolo 2 </ td>
  • </ Tr>
  • </ Table>
  • Aggiungere righe e colonne aggiuntivi a un tavolo con l'aggiunta di ulteriori blocchi di tag "tr". In questo esempio si pone il tavolo sul lato sinistro del blog. Per farlo apparire sulla destra, aggiornare il tag table e sostituire "float: left" con "float:. A destra" Modificare i contenuti di ciascuna cella per qualcosa che ti piace - è possibile aggiungere altri elementi come immagini e link alle celle di tabella.