Adding Extra Columns & Rows to Tumblr

You can edit your Tumblr theme in any way you would like using the Tumblr HTML editor. Tumblr themes use the “<div>” tag to specify sections in the theme. You can add an extra column, such as a sidebar, to your theme using a combination of Cascading Style Sheets -- or CSS code -- and HTML code. Define a table in one of your <div> sections, then add rows using the <tr> tags. Add cells to the rows with <td> tags.

Define a Sidebar Column

Open your Tumblr dashboard, then select the blog to modify in your dashboard.

Click “Customize,” then click “Edit HTML” to open the HTML editor.

Define the column by inserting the following code between the "<style type="text/css">" and “</style>” tags in the CSS section of the theme code. You can style the sidebar, as desired, but the code below provides the base construct for the column:

.sidebar { position: relative; left: 0px; top: 0px; }

Insert the following code between the “<div id="wrapper">” and corresponding “</div>” tags in the body section of the HTML code where you want the column to appear. Replace the text “(Insert Your Sidebar Content Here)” with your own content.

<div class="sidebar"> ...(Insert Your Sidebar Content Here)... </div>

Click “Update Preview,” then click “Save” to save your changes. Click “Exit” to close the Customize menu.

Define a Table with Rows

Open the theme code in the Tumblr HTML editor, then locate the <div> tag that you will use for your table. Create a new “<div>” section, if desired.

Insert the following code to define the new table. Replace “Cell 1,” “Cell 2,” etc. with your content. Use CSS styles to format the table, as desired.

<table> <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr> <tr><td>Row 2, Cell 3</td><td>Row 2, Cell 4</td></tr> </table>

Click “Update Preview,” then click “Save” to save your changes. Click “Exit” to close the Customize menu.