Hvordan lage tre kolonner i en Blogger Post

May 16

Det er en håndfull grunner til at du kanskje ønsker å opprette tre kolonner i blogginnlegget --- spesielt hvis du sammenligner tre elementer. Men Bloggers teksteditor ikke kommer med et verktøy som lett skaper kolonner; i stedet, må du bruke HTML editor og lage dine kolonner manuelt. Det er to måter å oppnå en tre-kolonne effekt: ved hjelp av en tabell med tre kolonner, eller lage tre div lag stilte opp på rad.

Bruksanvisning

Ved hjelp av en tabell

1 Begynn tabellen. Hvis du vil at tabellen skal fylle bredden på blogginnlegget, endre det som med "<table width =" 100% ">". Du kan også angi avstanden mellom celler med "avstand =" 5 "", dvs. "<table width =" 100% "avstand =" 5 ">".

2 Skriv "<tr>" på neste linje for å opprette en ny tabell rad. Siden du oppretter tre kolonner, trenger du bare én rad.

3 Type "<td>" for å lage den første kolonnen, som er en celle i tabellen. Fyll ut innholdet i cellen, og på slutten av innholdet lukke celle med "</ td>". Hvis kolonnene vil alle ha forskjellige lengder av innhold, vil du ønsker å legge til "valign =" top "" for å sikre at hver kolonne starter på toppen av tabellen, dvs. "<td valign =" top ">". Du kan også angi justering, for eksempel "align =" center "".

4 Start neste kolonnen med den samme koden som den første, og fyll i innholdet. Sørg for at det ender med et "</ td>". Gjenta dette for den tredje kolonne.

5 Lukk raden i tabellen etter slutten av den siste kolonnen / celle med "</ tr>", og deretter ende selve bordet med "</ table>". Du kan fortsatt legge inn innhold enten over eller under bordet, hvis du ønsker det.

Bruke Div Layers

6 Åpne et nytt innlegg på bloggen din og slå redaktøren over til HTML. Lag din første laget med "<div style =" float: left; ">". Du kan endre noen attributter for dette laget i "stil" tag: skrifttypen, farge, justering og størrelse; bredden av laget; og hvor mye plass det er rundt det.

7 Skriv en bredde for ditt lag. Hvor vidt kommer helt an på dine estetikk. Hvis du vil ha tre identiske kolonner for å fylle rommet, ved hjelp av "width: 33%" kan være msot effektiv, selv om det etterlater ingen plass mellom kolonnene. Hvis du vil ha plass mellom søyler, kan du alltid senke den til "width: 30%; padding: 5px;" for å angi en div som er 30% av bredden av innlegget ditt, med 5 px padding på hver side. Åpningen av ditt lag vil nå se ut som "<div style =" float: left; width: 30%; padding: 5px; ">". Finne riktig bredde / plass forholdet kan ta litt prøving og feiling.

8 Fyll ut hva du ønsker i første kolonne. Når du er ferdig, lukker lag med en "</ div>" tag på slutten av teksten.

9 Bruk samme åpningssignal for to andre kolonner, og gjenta prosessen hver gang. Den "Float: left" tag forteller lagene å følge hverandre i kø. Sørg for at alle lag slutter med "</ div>" eller Blogger vil nekte å lagre siden, siterer brutt HTML.

Hint

Du kan style lagene individuelt med mange flere elementer, inkludert bakgrunner, farger og grenser. Se ressurser for en oversikt over grunnleggende div funksjoner.