Table contains two properties cellpadding and cellspacing. Padding is always space inside the cell while the cellspacing is the space between two cells. To make the concept of cellpadding and cellspacing more clear. I will describe cellpadding and cellspacing separately then will compare the diffrence.
What is cellpadding in HTML tables
Cellpadding is used to define the distance or space inside the cell. If you have some content inside a cell the cell will leave space on each side top, left, right, bottom that’s cellpadding. Cellpadding is an important feature to format and make table cells good. Default value of cellpadding is zero 0 which you can change by adding attribute cellpadding=”5px” in table tag. What is the cell? Cell is actually <td></td> and for headings its <th></th> while <tr></tr> is a table row which contains the cells. So the cellpadding only works to give space inside the cells.
The General Format of Specifying cellpadding
< table width="100" border="2" cellpadding="5">
In example above we are starting a table in which cellpadding=”5px” attribute tells browser to add 5px spacing inside each cell. Let’s now have a look to complete table’s code below which have 5px cellpadding.
Note: If your CSS defining the table, tr, td styles in which it says td padding should be something else than cellpadding will not work. CSS style for td padding will override the HTML table cellpadding attribute.
<table border="1" cellpadding="5">
<tr>
<th>Some Heading</th>
<th>Some Heading</th>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>In example above we have two rows first row have two table headings with <th> tag. On other hand second row have <td> table data cells. So both headings and data are cells which will have spacing inside. As you have seen we defined cellpadding in table tag.
What is cellspacing in HTML tables
Cellpspacing is another important attribute for table tag in HTML. As cellpadding provides space inside the cells. Oppositely cellspacing provides space outside the cells. For example if in a single row you have two cells and you have given 5px cellspacing to table. Both cells will have spacing top, right, bottom and left 5px which will make 10px spacing between two cells as both have 5px spacing on left and right. Spacing is always good to make something more readable and attention seeker.
The general format to specify cellspacing
When you start a table the cellspacing attribute is also defined in table’s tag similar to cellpadding.
<table border=”1px” cellspacing=”5px” cellpadding=”5px”> In this example we are defining cellspacing and cellpadding while giving 1px border to identify the spacing. Let’s take a look to complete example below.
<table border="1" cellspacing="5" cellpadding="5px">
<tr>
<th>Some text</th>
<th>Some text</th>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>In example above we have two rows in first row we have two headings and in second row we have two table data cells. So cellspacing will produce spacing between cells from top, left, right and bottom while cellpadding will produce spacing inside the cells.
Difference between cellspacing and cellpadding
There is a major difference between cellspacing and cellpadding. As i stated above cellpadding is spacing inside the columns or cells while the cellspacing is spacing outside the columns or cells. Let’s see a demonstration.
- Cellpadding and cellspacing both are related to cells height and width in cellpadding space between 1 cell and cellspacing means space between 2 cells. Or borders of table.
- Think of a cell as a box. Cellspacing is the space between boxes. Cellpadding is the space between the content inside the box and its borders.
- Cell Spacing is used to set space between different table cells. CellPadding is used the space between the edges of the cell and the content of the cell.
- Cellpadding space between Content of cell and Cell Wall while Cellspacing is space between two cells .
I am sure now you have clear understanding about cellpadding and cellspacing. Let’s now try to understand other attributes we use in tables like rowspan, colspan, valign, cellpadding and cellspacing.
Understanding Cellpadding, Cellspacing, Colspan, Rowspan and valign
Tables are really important for format the simple layouts the most and wide use of tables are for forms. While now CSS have advanced a lot that people are using CSS to make the layouts. But tables are still important parts of HTML documents which tells you how to layout html documents.
Cellpadding
Cellpadding is a space inside a cell which we create with <td> and <th>. We give cellpadding in <table so data inside table cells stay our given padding away from cell borders on left, right, top and bottom. We give cellpadding by <table cellpadding=”5px”
Cellspacing
Cellspacing Is space between cells we give it to leave some space around cells so each cell have some space with other cell from all sides top bottom left and right.We give cellpspacing by <table cellspacing=”6px”
Colspan
Colspan is needed when we want a row’s two or more columns become 1 column and on other row they remain same number of columns we give colspan in td which we want to cover more than 1 columns like <td colspan=”5″ this will take space of 5 columns means if in other row there are 5 columns, the above 5 colspan will cover all of them.
Rowspan
Rowspan Similar to colspan row span works with rows means if each column have about 3 rows in it and to first column’s cell you give two row span it would cover two rows of next column. We give row span like <td rowspan=”2″
Valign
Valign Every td or cell in table is always aligned center vertically means if your content height is 20px and your td height is 100px it would leave 40px on top and 40px on bottom if you want it to align on top or bottom you give valign in td like <td valign=”bottom” or valign=”top”
Check the visual below which explain the elements and attributes we defined above. Later we are going to share complete code example.
Please check the code below for the above visual this can explain well how this works.
<table width="400px" cellpadding="5px" cellspacing="5px" border="1px" align="center">
<tr>
<th colspan="4">Students Data Table</th>
</tr>
<tr>
<th>Name</th>
<th width="40px">Roll#</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ateeq</td>
<td>33</td>
<td>Physics</td>
<td>22</td>
</tr>
<tr>
<td valign="top" align="center" height="300px">Ateeq</td>
<td valign="top">33</td>
<td>Physics</td>
<td>22</td>
</tr>
<tr>
<th colspan="4">Students older than 2011 Data Table</th>
</tr>
<tr>
<td>Ateeq</td>
<td>33</td>
<td>Physics</td>
<td>22</td>
</tr>
<tr>
<td>Ateeq</td>
<td>33</td>
<td>Physics</td>
<td>22</td>
</tr>
</table>Article updated on August 30 2019.
