When using tables in HTML the border can be missing from some of the cells. By default a browser will not add borders to an empty cell.
An example of this is the following table, which has an empty cell, and its rendered version below.
<table border="1"> <tr> <td>Day</td> <td>Fruit</td> <td>Veg</td> <tr> <tr> <td>Monday</td> <td>3</td> <td>2</td> </tr> <tr> <td>Tuesday</td> <td>3</td> <td></td> </tr> <tr> <td>Wednesday</td> <td></td> <td></td> </tr> </table>
| Day | Fruit | Veg |
| Monday | 3 | 2 |
| Tuesday | 3 | |
| Wednesday | 2 | 2 |
The missing borders can be achieved either by inserting an empty character code or through CSS styling.
<td>Tuesday</td><td>3</td><td> </td></tr>
The CSS approach is easier to implement, it works across the whole website and doesn’t require the addition of blank characters to populate every empty table cell.
To add a border to every table cell a border is added as a part of the td and th table cell entries in the CSS file. An example is:
td, th {
border: 1px solid #CCCCCC;
padding: 5px;
}
This websites uses the CSS approach for the table cells. For this reason, if you like at the page source you’ll see that I’ve countermanded the site’s CSS styling for the empty table cell using style=”border:0px;”.
