Hvordan legge til tabeller i HTML på Tumblr

May 7

Legge til en HTML-tabell til en Tumblr blogg tar litt mer arbeid enn bare å skrive noen ord til Tumblr tekst editor. Bord, som består av kolonner og celler, gir en utmerket måte å vise nyttige data i tabellformat. Etter å identifisere den informasjonen som du ønsker å inkludere i tabellen, bruker Tumblr HTML editor for å legge på bordet til Tumblr blogg.

Bruksanvisning

1 Åpne nettleseren og gå til Tumblr. Klikk på "Settings" ikonet i sidens øvre høyre hjørne, klikk på "Tilpass bloggen" -knappen. Klikk "Theme" for å se bloggen din HTML-layout-kode.

2 Trykk "Ctrl" og "F." Nettleseren din åpner et søkefelt. Type "<body>" i søkefeltet og trykk "Enter". Nettleseren din lokaliserer "<body>" tag i koden.

3 Lim inn følgende kode etter at tag:

Denne koden definerer et bord. Den "tabellen" tag skaper bordet; de "tr" tags definere en rad i tabellen; de "td" tags definere cellene i raden - raden i eksempelet ovenfor inneholder to celler. Den text-align attributt justerer hver innholdet i cellen i midten av hver celle. Erstatt "sentrum" med "venstre" eller "riktig" hvis du vil at innholdet i hver celle skal vises i en av disse stedene i cellen. Tabellen grense eiendom er "1" Dette skaper en ramme rundt bordet og viser rutenett i tabellen. Hvis du ikke vil at de skal vises, endre "1" til "0" Den "cellspacing" attributtet bestemmer hvor mange piksler vises mellom hver celle. Som verdi er "10" i dette eksempelet. Gjøre det nummeret større for å øke celleavstand eller mindre for å redusere den.

4 Lim inn følgende kode under koden vist i forrige trinn:

Denne koden skaper en annen rad i tabellen. Denne raden inneholder også to celler som inneholder forskjellige tekst verdier: "Row 2 punkt 1" og "Row 2 Sak 2."

5 Legg denne endelige HTML-koden under koden i forrige trinn:

</ Table>

Dette er tabellens avsluttende koden, og ender på bordet.

6 Klikk "Preview Update," klikk "Save & Close" -knappen for å gå tilbake til oversiktssiden. Klikk på profilikonet i sidens øvre venstre hjørne for å se bloggen din. Tabellen vises på toppen av bloggen.

Hint

Den komplette eksempel tabellen koden ser slik ut:
<Table style = "text-align: center; float: left; border =" 1 "cellspacing =" 10 ">
<Tr>
<Td> Rad 1 Sak 1 </ td>
<Td> Rad 1 Sak 2 </ td>
</ Tr>
<Tr>
<Td> Row 2 Sak 1 </ td>
<Td> Row 2 Sak 2 </ td>
</ Tr>
</ Table>
Legg til flere rader og kolonner i en tabell ved å legge mer "Tr" tag blokker. Dette eksemplet plasserer tabellen på venstre side av bloggen. For å gjøre det vises til høyre, oppdatere tabellen tag og erstatte "float: left" med "float:. Right" Endre innholdet i hver celle til noe du liker - kan du legge til andre elementer som bilder og linker til tabellceller.