Cell Padding

This is the space between the cell border and the content within that cell, expressed in pixels. This can be used to adjust the layout with respect to the content space adjustment. These kinds of setting are minute and affect a lot on the overall appearance of the web page.

We need to remember that the cell padding is added while setting the table properties hence, once the cell padding is added in terms of pixels to the particular table it is added to every cell within that table. Cell padding can not be changed individually for a single cell.

Let us say you have a cell within which you are inserting a picture. For the ease of understanding we are taking the example of the picture otherwise same is applied for the text too. Initially we will add no padding to the cell. So we will create a table with no cell padding.

For this, we will create a small picture first to insert in the cell. We have created a small image of 100 X 100 for this lesson.

Now let us add this small picture inside the cell. Since there is no cell padding, it will stick to the left side of the border of the cell by default.

You can see this properly if the first cell is stretched a bit.

Now let us change the cell padding in the table properties to 7. Please remember that to change the table properties, you need to select the table first.

You can observe that there is a distance between the picture and the cell border. This distance is 7 pixels as we added in the table properties. The same is applied for the text as mentioned earlier.