Followers
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!!
Subscribe to:
Posts (Atom)