HOW CAN I DO THAT?

Followers

Monday, September 28, 2009

Working with Tables

by Bonnie Calhoun

Hi guys and gals! It's been a while since I had something new to teach you! But I just helped a gentleman with this last night so I thought I'd pass on the info.

What we're going to learn today is how to customize a table to work in Blogger, and all the cool things you can do with it.

This particular table that I'm going to show you how to make has three columns (that go across) and five rows (that go down) on the page.



Day Food Child
Monday Hot Dogs Mike
Tuesday Chicken Mary
Wednesday Hamburger Paul



That is what it will look like, and this is the code that you copy to create it!


<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table style="text-align: left; width: 460px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>Day</td>
<td>Food</td>
<td>Child</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Monday</td>
<td>Hot Dogs</td>
<td>Mike</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Chicken</td>
<td>Mary</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Hamburger</td>
<td>Paul</td>
</tr>
</tbody>
</table>
</div>


Now! What you can do to add customization:

If you want more columns(across) across the table, add more table data units, like this. Note: You must add the same amount to each row!

<tr>
<td></td>
<td></td>
<td></td>
<td></td> .....notice extra td unit!
</tr>


If you want more rows (going down the page. Add more table rows (tr).

<tr>....this is the beginning of a tr unit
<td></td>
<td></td>
<td></td>
<td></td>
</tr>.....this is the end of a tr unit


If you want the table to be wider or narrower, change the pixel number in the width unit:
width: 460px


If you don't want a border, turn the border number to zero:
border="0"

Note: the higher the border number, the thicker the border.

And the cellspacing numbers tell you how many pixels between the cells of the table, while the cellpadding tells you how many pixels between the sides of the cell and the writing that you put in it!
cellpadding="2" cellspacing="2">


Have at it, and have fun!!

Sig

30 Comments:

  1. Annuity said...
    Thank you for sharing the tables. I used to do them in School in IT, but I could never do them properly.
    sunaath said...
    Hi,
    Thanks a lot!
    I wanted to put some tables in my blog; did not know how to do that.
    Battery said...
    you made it so easy for us to understand, gonna put some tables too to my blog!
    Movies said...
    Working with tables can be fun, hard to start with, but once you get used to them they are pretty simple.
    Anonymous said...
    Thanks ... I spent all week-end trying to figure out how to get tables in my blog- your site had the easiest directions!
    james said...
    Learning tables is really very important thing in html. I have learnt it in my school, but i didnt give any importantce to it that time. Now I learnt it well.
    Good and Well explained.
    james marnley said...
    Thanks for giving the tables, my blog will be updated with this soon. you have been a great help
    RickFinney said...
    I learned about this in our computer/HTML class. It was really cool when I first done it. Thanks! :]
    Anita Johnson said...
    I found your blog after spending an entire day (seriously)trying to get comments on my blog to work. Followed your advice about widgets from a 2007 post and I'm finally up and running...thank you, thank you!
    Bonnie Calhoun said...
    LOL...you're welcome Anita!
    Caffeinated Content said...
    I had no idea that you could create custom html on Blogger which is why I hadn't used it to much; but thanks to this article, I will most definitely be setting up a lot more blogger blogs. Thanks for the great info!
    Digicats said...
    I still get this huge amount of white space between the top of the post and the start of the table. What am I doing wrong?
    Bonnie Calhoun said...
    Where do you have it posted? I'll take a look.
    Seguros said...
    I appreciate it very much, at least I know from it someone is reading the contents I have here.
    Werner Cohn said...
    I think that my way is easier, at least on the Apple OS. (I don't know about Windows -- never look through them.)
    I do my tables in MS Word, which has very good facilities for them -- no need to know code.
    Next, I use the Grab facility on my Apple, and take a picture of the table. After that, I load it into Photoshop Elements, in order to save the table in jpg format. After that, I just upload it as a picture.
    (If you don't have Photoshop, you may be able to use one of the other photo programs to save as jpg.)
    HTH
    Bonnie Calhoun said...
    LOL...Werner...I don't mean to laugh...but how do you edit the input elements on a picture?
    Werner Cohn said...
    LOL to you too, and thanks for not laughing at me.
    No, you don't edit on the picture. What you need is a) the original document in MS Word (which you edit to your heart's content), and THEN you grab it & make b) a picture. If you change the original document, you just make a new picture.
    Happy 2010.
    Bonnie Calhoun said...
    Oy Vey...that's too much work for me...but then again I don't use an Apple either. Once you set up the table you just open it and edit the elements.
    Werner Cohn said...
    My system works really well for me, especially since I don't like to fool with HTLM code. But hey, different folks different strokes. You can take a look at a table I posted today here:
    http://www.ibegtodisagree.com/
    After I did the original, I did have to edit it because I had made some mistakes in my arithmetic. It took three seconds (approx.) to make the corrections, grab the new picture, and re-upload the picture.
    Again: Happy New Year to you and yours
    Bonnie Calhoun said...
    LOL...not bad, but not as crisp as i would like the lettering to be. I an webmaster for 5 websites, including a 50 page online magazine, so I eat, sleep and breath HTML :-)

    Blessings.
    Werner Cohn said...
    OK -- touché. But for those who eat real food (not HTLM), sleep with their spouses (not with HTLM), and breath fresh air (instead of HTLM), in other words for the amateurs and not the professionals, my system is a lot easier.

    Werner
    Bonnie Calhoun said...
    LOL...unless you have someone like me that is willing to teach you! Old dogs CAN learn new tricks, and what you use...you don't lose :-)
    catalog printing said...
    Thanks for this. I always get confused with tables because I forget about whether the tr or the td is for columns so I just guess and if it looks wrong I switch them. It usually works out in the end but wastes a lot of time, especially when I'm trying to make nested tables! -Mike
    Bonnie Calhoun said...
    Just remember that tr is a table row, and td is the table data...in that row! :-)
    Cosmo Graham said...
    Thank you for this - and I had naively thought you could just cut and paste from Word!
    Cindi said...
    AHH would you do something similar to this to turn a 2 column blog into a 3 column? :)
    Bonnie Calhoun said...
    Cindi....absolutely NOT! A three column blog is a shole other animal. In the right sidebar of the post there is a list of Blogger helps. The top couple list some sites with very nice three column templates.
    cathi said...
    Hello
    Thanks very much for all this very important information, I wish more success to this very interesting blog
    http://01-business.blogspot.com
    Loyalty Program said...
    Nice info! Good information.
    Loyalty Program said...
    It's good post and people should impressed here.

Post a Comment