Thursday, June 21, 2018

Table and rectangle design in Blog post in Blogger tips

Table and rectangle design in Blog post in Blogger tips

There is process to create table or rectangle design in blog post in Blogger with SKOTechLearn. If you talk about Wordpress, there are many features available in it. But if we talk about Blogger, there are some limited features. So, if you want to create table and rectangle, you have to learn about HTML process or other process for it.
Whenever you start blogging in blogger, you need to design Rectangle for particular sentence or word or code. And some time there is need to show some table format data in blogger. But you cannot find it in.
Blogger Layout design process
Blogger Layout process
So, there is following designing process we will learn.
(1) Rectangle design with different layout.
(2) Create or design Table in different way.

 (1) Rectangle design with different layout:
Suppose, if you want to write something inside rectangle in blog. So, we use DIV for it. We have to consider about some point for designing rectangle.

(a) Border thickness :
 You can adjust border thickness through following style script.
<div style="border: thin solid;">

(b) Border color:
You can set border color through following style script.
<div style="border: thin solid #996633;">

(c) Border Type: 
You can set border type such as (dashed, dotted, double, grove, hidden, inset, none, outset, ridge, solid, inherit) through following style script.
<div style="border: thin dashed #996633;">
The following image describes the above given style process.
Style code in layout design for blog post
Style code in layout for blog post
You can also set height or width and also include scrollbar in DIV rectangle.

For Height and Width adjustment style script:
<div style="border: thin dashed #996633; height: 93px; width: 415px;">

Add Scroll bar in DIV Rectangle style script:
<div style="border: thin dashed #996633; height: 93px; overflow: scroll;">
If you will set script of "overflow: scroll;". This will add scroll bar on DIV like bellow image.
DIV rectangle with scroll bar in blogger
Now, this way you can draw rectangle and add content inside it.

 (2) Create or design Table in different way:
There are following way to designing the content in blogger.com.
(a) Using tableizer
(b) Copy Excel’s selected cells and Paste it in Blogger.
(c) Using MS-Word Created Table paste in Blogger post.

Create Table or rectangle design in Blog Post

(a) Using tableizer :
If you want to show Table in Blogger. You can open tabelizer website and copy Excel sheet cell and paste it on this website.  It will generate HTML code with CSS script. Copy this code and paste it on Blog post.
tabelizer table design code for blog post
When you paste this code in Blog post, it will not show the style view in design time, when you preview your post, then it will show the style or that particular HTML control.
(b) Copy Excel’s selected cells and Paste it in Blogger :
If you want to directly copy your selected cells from Excel and paste it on Blog post. You have to remember that it will present in without border. You have to write code for border. For this process just follow the following image.
Excel table to blog post process
In above given image, just go to HTML tab and set border value from 0 to 1. This will show it with border layout.

When you start working on design content in blogger, you will learn every time something new to give your content with different style.

(c) Using MS-Word Created Table paste in Blogger post:
If you created table on MS- Word and want to paste it on Blog post, you have to remember one thing that it will increase the size of your page. Because it contains more extra style script.

If you will try to reduce or erase some style script, it will take more time and may be possible after reduction process; your table will be completely different from word document’s table.

But, if you will not use more images on your post, then you don’t need to erase any style code from it.
For this process simply create table in MS- Word and copy and paste it on your post like bellow image.
Word table design for Blog Post
Now, In this way you can learn that how to insert or create Table or rectangle design in Blog Post. If you follow these steps which describe above, then you can easily proceed for further process.

0 comments: