This is the second post based on the HTML codes for blogger and website owners.This post explains you to create a simple contents table for your blog/website in order to categorize the contents for the ease of your viewers.This kind of table increases the number of visitors to your wide range of contents, which your blog was dealing about.Here also we have used HTML & CSS for the implementation of this table.The code for the table was given below.
EXPLANATION:
- <html>
- <body>
- <style type="text/css">
- td.sections{
- background-color:#008Fd5;
- text-align:center;
- border:2px solid black;
- font-family:arial;
- font-size:0.9em;
- }
- td.contents{
- text-align:justified;
- border:2px solid black;
- background-color:#C0C0C0;
- font-family:arial;
- font-size:0.9em;
- }
- </style>
- <table cellspacing="0" cellpadding="7" width="700" style="border:3px solid black;">
- <tr><td class="sections"><th1>SECTIONS</th1></td>
- <td width="450" class="sections"><th2>CONTENTS</th2></td></tr>
- <tr><td class="sections">WHATS IN THIS BLOG</td>
- <td class="contents">
- <ol>
- <li><a href="http://gadgetronicx.blogspot.in">CODES IN GADGETRONICX</a></li>
- <li><a href="http://gadgetronicx.blogspot.in/p/electronics-section.html">SEE THE TABLE HERE</a></li>
- </ol></td></tr>
- <tr>
- <td class="sections">GADGETS</td>
- <td class="contents"><ol>
- <li><a href="http://gadgetronicx.blogspot.in/search/label/apple">YOUR CONTENTS</a></li>
- <li><a href="http://gadgetronicx.blogspot.in/search/label/smartphones">SMARTPHONES</a></li>
- </ol></td></tr>
- </table>
- </body>
- </html>
- The above code was very simple to implement on your blog or website.Just copy&paste the above codes, then you have to modify some codes for placing the contents of your blog and change the style of the table.
- The table have been categorized into to columns one for the Section name and other for the contents belonging to the section.So we have defined two classes one is "Sections" and other one is "contents"
- CSS for the both the columns are given with different background colors to show differentiation.You can change the Background color of the cells by modifying the codes in the line 5 and 14.
- Assign the width of the table in line 19.Then split the width to your desire by modifying the width size in the line 21.The total width will result in 700 automatically after splitting.
- Now the rest is simple with placing the links as list with respective to the sections named in the first column.Above in this code you can see i have assigned two sections and placed the respective links as list for easy access.See the table on my blog here
- You can add n number of sections to your table by adding multiple rows and columns.But assigning the class was very important to apply CSS style properties to your table.
- I hope this code will be useful for bloggers.Best advice is to create a page and insert this code in that simplifying the contents.
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
