| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
Simple Trick For Creating A Table In Your Blog Post
Do you know that creating a table in a blog post is as easy as spelling your surname? You don't have to be a techy or web savvy before you can successfully create a table in a blog post.As a matter of fact,even your grandma can do it too... As a blogger,at some points the need to create a table in your blog post will arise.Table is required for conveying message to your readers effectively,especially when you want to rank things,compare organizations,talk about the differences and similarities of objects or subjects... Without bugging you with too much reasons why you need to learn how to create a table on your blog post before the need arises,I want to hit the nail on the head. Are you ready? #OMG! I almost forgot to tender my apologies to all the readers of Hubtain Blog(my great friends) about the drift...My initial reason for creating this blog was to compile quality content sites so as to help people narrow down their search on a given subject to the links recommended by me(sort of reference),few days ago I was convinced to dive into what I really love and have flair for, which is teaching people what I know about a given subject.Well,I have choosen my niche(tutorial for non-techy bloggers),and I will remain here by God's grace.I hope my apologies are accepted? Now that you've pardoned me,lets get started.How to Add A Table In Your Blog Post
We are going to start with some simple HTML tips,from there we'll advance to CSS styling of your table.Steps for Adding a Table to your Blog Post
1. After you've login to your blogger,open the post where you want to add the table or create a new post.2. Click on HTML at the top,close to your post title.
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| CELL 1 | CELL 2 | CELL 3 |
| CELL 4 | CELL 5 | CELL 6 |
3.To add the above table to your blog post,Copy the following HTML code and paste it exactly where you want the table to appear.
<table border="2" cellpadding="5" cellspacing="2" width:="50%">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
</tr>
<tr>
<td>CELL 4</td>
<td>CELL 5</td>
<td>CELL 6</td>
</tr></table>
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| CELL 1 | CELL 2 | CELL 3 |
| CELL 4 | CELL 5 | CELL 6 |
4. To make Changes like text colour,background colour,(to look like the one above),edit the above HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%">
<tr style="color: blue;">
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
</tr>
<tr>
<td>CELL 4</td>
<td>CELL 5</td>
<td>CELL 6</td>
</tr>
</table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
5. To add more rows and cells,edit the above HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%">
<tr style="color: blue;">
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
<th>Table Header 4</th>
</tr>
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
<tr>
<td>CELL 5</td>
<td>CELL 6</td>
<td>CELL 7</td>
<td>CELL 8</td>
</tr>
</table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
6. To centre your data like the above table,edit the copied HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%">
<tr style="color: blue;">
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
<th>Table Header 4</th>
</tr>
<tr align="CENTER">
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
<tr align="CENTER">
<td>CELL 5</td>
<td>CELL 6</td>
<td>CELL 7</td>
<td>CELL 8</td>
</tr></table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
7. To add caption to your table,edit the initial HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%"><caption><h3>
MTN STAFF LIST</h3>
</caption>
<tr style="color: blue;">
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
<th>Table Header 4</th>
</tr>
<tr align="CENTER">
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
<tr align="CENTER">
<td>CELL 5</td>
<td>CELL 6</td>
<td>CELL 7</td>
<td>CELL 8</td>
</tr>
</table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
8. To change the colour of rows of your table,edit the initial HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%"><caption><h3>
MTN STAFF LIST</h3>
</caption>
<tr style="background-color: yellow; color: blue;">
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
<th>Table Header 4</th>
</tr>
<tr align="CENTER" style="background-color: maroon; color: white;">
<td>CELL 1</td>
<td>CELL 2</td>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
<tr align="CENTER" style="background-color: purple; color: white;">
<td>CELL 5</td>
<td>CELL 6</td>
<td>CELL 7</td>
<td>CELL 8</td>
</tr>
</table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 |
|---|---|---|---|
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
| CELL 5 | CELL 6 | CELL 7 | CELL 8 |
9. To beautify your table with awesome colours,edit the above HTML code to look like this:
<table border="2" cellpadding="5" cellspacing="2" style="background-color: lime;" width:="50%"><caption><h3>
MTN STAFF LIST</h3>
</caption>
<tr style="background-color: yellow; color: blue;">
<th style="background-color: purple; color: white;">Table Header 1</th>
<th style="background-color: green; color: white;">Table Header 2</th>
<th style="background-color: white; color: black;">Table Header 3</th>
<th>Table Header 4</th>
</tr>
<tr align="CENTER" style="background-color: maroon; color: white;">
<td style="background-color: grey; color: white;">CELL 1</td>
<td style="background-color: blue; color: white;">CELL 2</td>
<td style="background-color: red; color: white;">CELL 3</td>
<td style="background-color: black; color: white;">CELL 4</td>
</tr>
<tr align="CENTER" style="background-color: purple; color: white;">
<td style="background-color: pink; color: white;">CELL 5</td>
<td style="background-color: silver; color: white;">CELL 6</td>
<td>CELL 7</td>
<td style="background-color: orange; color: white;">CELL 8</td>
</tr>
</table>
Important points to take note of:
- Table tags: <table> </table>
- Row tags: <tr> </tr>
- Cell tags: <td> </td>
Your data or labels should be between the above open and close HTML tags.
For example: <td> CELL 1</td>
Today,I've by God's grace shown you how to spice up your blog post with a beautiful looking table.You have also learnt how to manipulate your table like a web savvy.Feel free to explore these tricks to suit yourself.
Please,if you find this post interesting and helpful,kindly share it with your friends on social media.
One more thing,I need you to do me a favour by leaving your feedback on the comment box,I really want to hear from you,my awesome friends.
No comments:
Post a Comment