March 5, 2011

Making tables in Blogger

You might wonder why you want to do this. I like to use tables because they allow me to have lots of websites and information on my classroom blog...without making my students have to scroll down tons of page.


With tables, you can place a number of images or text side by side, creating all kinds of new ways to present information!


I use image links for all of my websites in the content areas for my students and their families...I like the visual better than a list of links for my students. My actual link list is pretty small, as you can see (in the right sidebar in this picture).



I knew how to make tables in Dreamweaver, but wasn't sure about them in Blogger. Then, I found this really cool site that generates tables: 2 Create a Website. This website lets you customize your table completely and generates the code for you to enter it in your blog/website. Here are the steps:

1. Head over to 2 Create a Website. You will see the same screen shown to the left.


2. Fill out the form. When using images, I generally create 2 or 3 columns. I keep the border size at 0, since I don't like the look of the borders on my class blog. You can set it at a different value, however, and select a color for the border as well. I entered #FFFFFF for the Border Color and Background Color, to keep everything white, but you can look up hex color charts and experiment with different colors. There's a ton of color charts online. For the width of the table, you might have to play around with it and try different sizes to fit your blog page nicely. I generally use anywhere between 620 to 720 pixels.

3. Once you are finished customizing your table, click the button that says "Generate Your Table". Now you will see your lovely code!








4. Next, highlight all of this code and copy it.






5. Head into Blogger. In the post box (or page box) click on the "Edit Html" tab.

Then, paste your table code in.








6. When you click on the "Compose" tab again, you will see your table all set up for you to enter your text or pictures.




7. Highlight the cell you would like to edit first. Then, just upload a picture or type some text!






Like so:








It's pretty simple once you get started and tables open up a lot of new ways to set up your blog page.

This is a snapshot of my spelling page for my students. I used a table with 2 columns and 4 rows...first row for the pictures and subsequent rows for the different spelling links.

Would you try this? I would love to see it if you decide to try it out!

3 comments:

  1. You a are a wealth of information! Thank you so much.

    ReplyDelete
  2. Do you know if this would also work with Shutterfly? I am planning a technology presentation and having this visual format would be so helpful to many of our parents since their primary langauge is not English.
    I can't seem to be able to get my link to work with the image. Any guesses what I'm doing wrong?
    Thanks for your help!

    ReplyDelete
  3. I was trying to figure out a way to organize all my links. I'm going to play around with this and let you know how it works. Thanks for the info.

    ReplyDelete