HTML Table Spacing

If you don’t know how to add space between rows and columns in an HTML table then this article is for you.

Cell padding

<!-- cell padding-->
<table border="3" height="50%" width="50%"
bordercolor="blue" align=center cellpadding ="10" >

<tr><th>Product name</th>
<th>Price</th> </tr> 

<tr> <td>Mobile</td>
<td>20,000</td></tr> 

<tr><td>Computer</td> 
<td>50,000</td></tr>

 Result:

  This table has three rows and two columns and a table tag within the table tag. I writing HTML table spacing I.e. cell padding and cell spacing. This two attribute because these two attributes are the attributes of the table tag. Border attributes help height with border color and the table alignment is the center of the webpage is written. Now cell padding is the attribute it specifies the space between the cell edge and the content. I am using 10 value of self adding cell padding value always in pixel, {cellpadding =”10″}.

   So you have to give the integer value in cell padding and cell spacing. After specifying a value of cell padding the change is the space between the cell edge and the content or data. For example, the first column mobile is the content of this cell. When we give the large value the space will be increased by using the large value but if we give the small value that time it decreases the space between the edge and the data.

Cell spacing

<!-- cell spacing--> 
<table border="3" height="50%" width="50%"
 bordercolor="blue" align=center cellspacing ="10" > 

<tr><th>ID</th> 
<th>Name</th></tr> 

<tr><td>1</td> 
<td>Rajesh</td></tr> 

<tr><td>2</td> 
<td>Ram</td></tr>

Result:

  It specifies the space between the cells which means between two cells the space. Using a large value it will be increased using a small value it will be decreased. By using these attributes you can also space between rows and columns. I am specifying the value 10 so now you can run and see the space between these two cell around the cell has been increased. Suppose I increase it by 15 you can run and see this cell spacing the space around the cell or we stay between two cells is the cell spacing.

Difference between Cell spacing and cell padding

 Table spacing between  Rows only

<table border="3" height="50%" width="50%" bordercolor="blue"
align="center" style="border-spacing: 0 10px;">

If you want to add space to rows only, you can use the CSS Border-spacing property.  Give the first value to 0 and the second value to the amount of space you want to add to the rows.

Table spacing  between columns only

<table border="3" height="50%" width="50%" align="center"
 style="border-spacing: 10px 0;">

If you want to add space to Columns only, you can use the CSS Border-spacing property. Give the second value to the amount of space you want to add to the columns and the first value to 0.