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 betweeh the sides of the cell and the writing that you put in it!
cellpadding="2" cellspacing="2">


Have at it, and have fun!!

No comments:

Post a Comment