In this example, you will see how to handle table cellpading and cellspacing with css. By default cellspacing and cellpading added in HTML table.
cellspacing:cellspacing will set the space between the cells
cellpadding:cellpadding will set the space between the cell border and the cell content.
Lets’ see the examples.
Example 1
You can remove cellspacing and cellpading from HTML table without using CSS by adding cellspacing and cellpadding attribute to HTML table.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Aamir Hasan
</td>
<td>
www.aspxtutorial.com
</td>
<td>
.NET Articles
</td>
</tr>
</table>
This will look like this:
|
Aamir Hasan
|
www.aspxtutorial.com
|
.NET Articles
|
Example 2
Example2 shows you how to remove cellspacing and cellpadding from HTML table with CSS.
Following CSS will remove cellspacing and cellpadding from the table.
<style type="text/css">
table
{
border-collapse: collapse;
}
th, td
{
padding: 0;
}
</style>
Example3
Example3 shows you how to remove cellpading and cellspacing from a specfic table.
Let us create a css class as shown below.
<style type="text/css">
#table1
{
border-collapse: collapse;
}
#table1 th, #table1 td
{
padding: 0;
}
Apply above css class named "table1" as given below table.
<table class="table1">
<tr>
<td>
Aamir Hasan
</td>
<td>
www.aspxtutorial.com
</td>
<td>
.NET Articles
</td>
</tr>
</table>
I hope you like the article