Headlines News :
Home » » Add Table in Your blog posts

Add Table in Your blog posts

Written By BlogKing on Saturday, February 11, 2012 | 3:03 AM

In this posts i will tell you how you can add tavle in your blog posts by using html
to create table we use Tag <table>and we end this tag by </table>

we know that in table there is row and column lets we know each one by one two insert row in table we simply use <tr> tag and this and with </tr> inside table tag 
here example

<table>
<tr></tr>
></table>

now to add column in table we use tag <td> and end this with </td>  this will inside <tr> tag
here example
<
<table><tbody> <tr><td></td></tr> </tbody></table>

you can chack this just by using notepad

let we add more row and column 

Table Header Table Header Table Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

for this we need this code
<table >
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>



now we see how we can add color in table and border in table


<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

example:=

Table Header Table Header Table Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

if you want alternet color in table than use this code

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
see example

Table Header Table Header Table Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Share this article :

No comments:

Post a Comment

 
Support : Creating Website | Adult Dating | | Johny Portal | Magazine Templates | Mp3 Sonhs Download |
Copyright © 2011. Blogger Free Tricks - All Rights Reserved
Template Modify by Myblogtriks Inspired Wordpress Hack
Proudly powered by My Blog Tricks