Loading...

Have you tried adding a border to a td style rule yet? Notice anything odd?

If you add a border property to the <table> tag, you only get a border around the outside perimeter of the whole table. So if you want borders around each individual table cell, you need to target the <td> tag. However, if you’ve added borders, or background coloring, with td as your selector, look what happens:

<style>
td {
border:solid 2px #000000;
background-color:#8888AA;
color:#FFFFFF;

padding:10px;
}
</style>


<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

By default, tables have a tiny bit of spacing between the cells. You’ll see white or the color of your table or webpage background. Until you add color or borders to your cells, this isn’t obvious. So how do you get rid of this problem? CSS has another border property called border-collapse.

You need to set this property on the <table> tag. It commands the table to collapse the spaces and redundant borders between the cells, so that you get a nice, uniform line weight around all of your borders. Set the border-collapse property to a value of “collapse”.

<style>

table {
border-collapse:collapse;
}

td {
border:solid 2px #000000;
background-color:#8888AA;
color:#FFFFFF;

padding:10px;
}
</style>


<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6