How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 2)

Tables with colored cells

All of the suggested online HTML table code generators in the last post can generate only simple tables. Those that have the option for generating tables with colored cells, can produce an HTML code for a table with all of it's cell colored with the same color.

For creating tables like these two, there is another free online HTML generator which, among many other options, can be used for generating HTML code for tables like these two. 

Table with header row

List A	List B	List C	List D
Item A1	Item B1	Item C1	Item D1
Item A2	Item B2	Item C2	Item D2
Item A3	Item B3	Item C3	Item D3
Item A4	Item B4	Item C4	Item D4

COLOR TONE	LIGHTER SHADES	DARKER SHADES
#F11F0D	#F5665A	#b71709
#FB8518	#FCA758	#DC7515
#EDD711	#EFDD37	#D0BD0E
#88EA14	#B2F168	#5C9F0D
#1BE3B3	#6DEDCE	#13A380
#1852E6	#7497F0	#10379C
#B530CE	#C969DB	#822294

It's the Multitoolbox's WYSIWYG editor (WYSIWYG = What You See Is What You Get).

All the table editing buttons will become active after you've created a table and positioned the cursor inside any cell.

Explore the rest this editor capabilities. You will be pleasantly surprised.

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 1)

The latest visual Blogger's post editor is still lacking the "Insert Table" option. Adding this option (for example, like the one available in the Google Sites's editor of the page content) would be quite useful for the users, especially those how are unfamiliar with HTML coding. Until this option is added (if ever), the only way to insert a table in a Blogger post is trough the HTML Editor. But, writing manually an appropriate HTML code for a table, can be a tedious, time consuming task, even for simple tables like these:

Tables with borders

1x4 table					7x1 table
3x4 table

Tables without borders

1x4 table					6x1 table
3x4 table

Using Tables for Arranging  Images

Adding two or more images in a Blogger post that are nicely aligned, using only the "Insert Image" option, can be quite frustrating. The solution is: create an appropriate table which will serve as a placeholder for those images.

First of all, make sure that the outer width the of desired arrangement will not exceed the width of the post text (as in Figure 1).

post text width
	outer width of the arrangement
	image 1		image 6	image 8
	image 2	image 3
	image 4	image 5	image 7
Figure 1

If the outer width of the arrangement approximately equals the post text width, which is the same for every post, or if you don't mind if the whole group of images is aligned at left, then you may skip the Step 1.

Step #1: Adding the initial code in the HTML editor in the Blogger's post editor

---

If the outer width of the arrangement is less then the post text width, then it would be nice if the whole group of images is centered. Open the HTML editor, add a few empty lines below the text where you what to place the a group of images and, copy and paste the following code:

<table style="text-align: center; width: 99%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">
INNER TABLE
<br>
</td>
</tr>
</tbody>
</table>  

The visible result after Step #1:

INNER TABLE

Tip #1: Replace, if necessary

• the value 99 in 99% with a smaller one (or replace 99% with, for example, 500px, 650px - the values expressed in % do not function well in some browsers); for the basic example that follows, this value is 90%
• the value 0 in border="0" with 1, 2 or more if you want a visible outer border for the whole group of images
• top with middle or bottom

Step #2: Generating the code for the INNER TABLE

---

The Basic Example

Here is a group of six images, all with same width and height, arranged in 2 rows and 3 columns.

Note: Each image is placed in cell of a table with 2 rows and 3 columns. A tiny, light-grey colored border with a shadow should be visible around every image in the above group. But these borders are not borders of any of the used tables. They are automatically added around every image in all off the posts in this blog. If you are using a Blogger template, go to: Blogger's Template Designer  >> Advanced >> Images to see these settings.

In this step, still working in the HTML editor, the text INNER TABLE was replaced with the following code:

<table style="text-align: center; margin-left: auto; margin-right: auto;">
<tr>
 <td>IMAGE 1</td>
 <td>IMAGE 2</td>
 <td>IMAGE 3</td>
</tr>
<tr>
 <td>IMAGE 4</td>
 <td>IMAGE 5</td>
 <td>IMAGE 6</td>
</tr>
</table>

The visible result after Step #2:

IMAGE1 IMAGE2 IMAGE3 IMAGE4 IMAGE5 IMAGE6

The above code, with the exception of description style="text-align: center; margin-left: auto; margin-right: auto;" , was generated with one of the simplest online HTML code generators: Multitoolbox's Table generator and editor.

 Of course, instead IMAGE1, IMAGE2, etc, you can enter any text.


Step #3: Adding the images

---

The Basic Example - continued

Now, working inside the visual editor or inside the HTML editor, select IMAGE1 and click on the "Insert Image" icon to add the image that you want to appear instead of IMAGE1. Repeat this for IMAGE2, IMAGE3, etc. If you haven't used this option before, follow this elementary tutorial.


Other simple online HTML table code generators

• Kotatsu
• HTML Table Maker
• Online HTML Table Generator
• HTML Table Generator

Here is an example of a group of four images arranged in one row.

The Code for INNER TABLE:

<table>
<tr>
 <td>IMAGE1</td>
 <td>IMAGE2</td>
 <td>IMAGE3</td>
 <td>IMAGE4</td>
</tr>
</table>

Creating Patterns and Backgrounds with PatternCooler (Part 2)

PatternCooler has another pattern and background editor, named Pattern Spread App, with far more advanced features. Follow this link to directly access this editor.

The Welcome Screen of the Pattern Spread App    

Here is list of some of the options available in the advanced editor:

• creating images with arbitrary width and height
• each image can be created from one or more layers of patterns (one pattern per layer)
• adding or removing patterns (upon adding you can even select groups of patterns)
• adding amazing multicolored linear, circular or elliptical gradients to each layer (the background layer or the pattern layer) 
• each of the selected/added patterns, even when added as a group, can be individually scaled almost arbitrarily (have in mind that the editor is still in its beta version and the smaller sizes are not so arbitrarily)
• downloading the created images in SVG, PDF, PNG or JPG file (the SVG file format is recommended for those who have some experience with Inkscape or Adobe Illustrator).

Here is an example of an image I have created with Pattern Spread App:

Get inspired by visiting the Gallery!

Creating Patterns and Backgrounds with PatternCooler (Part 1)

PatternCooler, developed by Harvey Rayner, is another great free online pattern and background generator to start with. The basic editor

PatternCooler's Basic Editor

offers

• 207 different predefined patterns (each with same and equal width and height)
• 5 different sizes for each pattern (you can choose between 25%, 50%, 100%, 150% and 200% of the original size) 
• hundreds of color variations for most of the predefined patterns, the number of color variations depends on the chosen pattern and, for some off them, this number rises up to several thousands color variations (one of the largest number of color variations I've stumbled upon was 5351)    
• each color variation is a set of 2, 3, 4, 5 or 6 different colors and each of these colors can be individually customized with a color picker.

An example of color variations for randomly selected pattern

After selecting the desired pattern, to access all color variations click on the "Show color variations as thumbs" button. The selected pattern will then be surrounded with all or the first 106 color variations, if the number of all color variations for the selected pattern is greater the 106. You can get the next (or previous) set by clicking on the arrow buttons in the lower right corner of the editor.

Below the selected pattern there are few (2 to 6) rectangles, usually colored with different colors. They represent the selected color variation which can be modified by clicking on each of these rectangle and picking a color from the color palette in the middle (or editing the hex code in the upper right corner).

It only remains to choose the size of the created pattern and it's ready to be downloaded.

Enjoy!     

Creating Patterns and Backgrounds with BgPatterns

Another, simple to use, free online pattern generator is BgPatterns. Although it has a limited number of features in comparison with bgMaker, you can still create beautiful repeatable patterns.

When you open the editor in your browser, the first thing that you'll see is a small gallery of images that are to be used in the creating process.

BgPatterns Editor (click to enlarge)

Choose an image, set the image opacity, the image location on the canvas and the image size. To preview your initial setting, click on the eye icon. Then navigate to the color palette under "Colors".

The Color Editor (click to enlarge)

You can pick any color that you like as a foreground (i.e. the color of the image that you have previously chosen) or as a background color (i.e. the color of the canvas).

Under the "Canvas" tab you have an option to choose from five different canvases. You can also re-size the canvas. By default, the canvas sizes (both width and height) are equal, measured in pixels, and if you want a canvas that has different width and height, first click on the small lock icon right above the dimensions, and then put any number for the width and height. You also have an option for setting the texture opacity (measured in %).

The Canvas Editor (click to enlarge)

Finally, under the "Rotation" tab, you have the option for rotating the image (not the canvas), by dragging the rounded button along the bigger circle in clockwise or counterclockwise direction.

Rotating The Image  (click to enlarge)   

After creating the background pattern, click the download button and the pattern will be downloaded in PNG format.

Have fun!

Creating Patterns and Backgrounds with bgMaker

If don’t you have experience with some kind of image editing software and you want to make some simple, eye-catching backgrounds, then bgMaker is an ideal tool to start with. This free online pattern/background generator works like a pixel editor with an instant preview of your design. You can create stunning backgrounds in few minutes.

Overview of the bgMaker Editor (click to enlarge)

The editor is quite simple. By default, you will see 12x12 grid. Each square in the grid represents a pixel. You can add an extra row of pixels by clicking on the plus sign on the left side of the grid. To remove a row of pixels, click on the minus sign on the left side of the grid. To add or remove a column of pixels click on the corresponding sign above the grid. Be aware that the editor adds rows at bottom and columns on the right side of the grid. The same goes for removing rows and columns. You can create a pattern with up to 99 rows or columns of pixels. Instead of clicking on the plus or minus signs, you can click between the signs and replace the number 12 with any number between 1 and 99.

Creating a Pattern/Background - Simple Example

Pick a color from the color palette in the left corner (to start, just click on the any color). Alternatively, you can edit the hexadecimal code for the desired color. Use the “Fill” button to fill the whole area with a single color. Below is the fill result for color with hex code DB99CD for 9x9 pixels pattern.

(click to enlarge)

Let’s pick a darker shade of the same color by clicking on the rectangle right next to the color palette (notice that both the hex code and the numbers for rgb percent have automatically changed). Then click on each square in the grid along the diagonal, starting from the upper left to the lower right. You should have a result like this one:

(click to enlarge)

If you repeat this with the opposite diagonal, you will get this result:

(click to enlarge)

Now, suppose that you want to use some of the colors that you've used before but you don’t know which shade (or the hexadecimal code) you've used. Never mind, bgMaker has a feature similar to a color picker. To do this, click on the area that indicates the selected color and move over the editor. The small hand should change in cross-shaped pointer. Click on the square that’s colored with the desired shade and once again you can work with a color that’s already used

After creating the final version of your pattern click on the “Save” button. The pattern you’ve created will be downloaded to your computer. This pattern will also be saved in the bgMaker’s Gallery. You can access the Gallery, which contains more than 244500 user created patterns, via the “Gallery” button. You can view, edit and download (in PNG format) any pattern in the Gallery.