How to Create a table in html?-customization of blogger

customization of blogger design is the most important factor in attracting visitors for your blog.in this Blogger Designing posts i want to go through so of the important elements that will help you in make your blogger blog and posts more attractive.a part of this in this post i'm going to explain you how to create a table in html.befor going to main part you need to know some important tags that we to use in creat a table in html.

<table> -starting tag of a table
<tbody> represents starting of table body
<tr> represents table row
</tr>represents ending tag of a row  in  a table
<th> represents table header. this must end with </th> 
<td> represents table discription  this must end with </td>
</tbody></table> ending tags of a table

Now i'm going to show you basic strecture of table and its html code

<table><tbody>
<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>


the above code will look like below

Header1	Header 2
Deseription 1	Description2

Now i'm going to explain you how to design your stylishly. for that tags you need to know some tags
1)border tag 2) width tag 3)style tag 4) border radius tag
now i'm going to use these tags

<table border ="3" width="250px" style="background:red;border-radius:2px; color:white;"><tbody>

<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>
the above code will look like

Header1	Header 2
Deseription 1	description2

you can change that width, colors, as you like.you can also use custom back grounds like images etc.
Example:

<table border ="3" width="250px" style="background:#F4F3F3 url(http://www.labnol.org/wp/wp-content/themes/baba/F2F1ED.png);border-radius:5px; color: #F00000  ;"><tbody>

<tr><th> Header1 </th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
</tbody></table>


in this example i'm using image as background this will look like

Header1	Header 2	Header 3	Header 4
Deseription 1	description2	description2	description2
Deseription 1	description2	description2	description2
Deseription 1	description2	description2	description2

You can also use "border-color:  ; " to change border color      reference for colors
                          "font-family:    ;" to  change your table font  reference for fonts
                           "font-weight:   ;" to  change your font style
                         how this post will help in your blogger posts designing

Tweet