Monday, September 28, 2009
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!!
25 Comments:
Subscribe to:
Post Comments (Atom)
Thanks a lot!
I wanted to put some tables in my blog; did not know how to do that.
Good and Well explained.
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
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.
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
Blessings.
Werner