Top Web Designing : Cell Spacing
Home | About Us | Contact Us | FREE Training | Newsletter | Get our Android App
Adobe Photoshop : Tools | Retouching | Image Effects | Web Buttons | Textures | Animation
CorelDRAW : Tools | Basic Effects | Artistic Effects
Adobe Animate : Tools | Text Effects | Special Effects
Miscellaneous : Layout Designing | Web Designing | Articles | Interviews

Home : Web Designing : Cell Spacing 

CELL SPACING

When you wish to work with tables in dreamweaver, you need to understand every single detail of it. We already know about the cell padding. Now we will discuss in detail about the cell spacing.

As a name suggest cell spacing means the space between two adjacent cells. Though the meaning is simple we need to understand to use this property carefully. Cell spacing can decorate the table if its used properly. It can be used to accommodate and cover the require distance to balance the design. Please make a note that since cell is a part of a table you have to select the table to apply cell spacing and once you apply cell spacing it is applied to all the cells in the table and not the single cell.

Lets insert a table on the page and apply cell spacing to it. We will try to find the possible ways to manipulate the table design using cell spacing. It is always interesting to know particularly in web page designing that how a simple command can make so much of a difference. You can insert the table using Insert menu and selecting Table or you can directly insert it from the tool box using common tab. You will get the following box. Try to input the same numbers while you do this in dreamweaver.

table cell spacing

These table settings will insert the following table with 3 rows 3 columns with no border and no cell padding and no cell spacing as well. Since there is no border, you won't see this table on the web page. The image you are watching is offline figure of the table what you will get while designing.

table cell spacing

Now we will keep the same settings and add same colors in the cell.

table cell spacing

The same image you will see in the browser without those lines separating the cells and hence you will get just a green rectangle though the table is made up of 3 rows and 3 columns.

table cell spacing

Lets change cell spacing to 3 and find the difference. Try to carefully watch the width of the table after adding the cell spacing. First we will see the offline image that we get in dreamweaver while we insert the table.

table cell spacing

And now lets preview the same table in the browser.

table cell spacing

Now we will add 10 for cell spacing and get the preview in the browser.

table cell spacing

You may think that the width of the table is decreased with the increase in the number of cell spacing but its not the case. Actually the table width remains the same and the cell spacing is adjusted within the length of the table that we have already given as 400 pixels. You will understand this by the following image taken from the offline dreamweaver document.

table cell spacing

Cell spacing can be used for anything where you need to add some space between the cells. You can use different colors for the cells. With the help of the cell spacing you can separate the text columns. You can adjust the distance between the images or any data you want to insert in the table.

 
Copyrights © 2003 - 2017 Inside Graphics | Disclaimer | Privacy Policy