CSS border-collapse

Standard HTML tables tend to look a bit dated. Adding a border to a table results in something that looks more like a waffle than anything else! I always use CSS to create a variety of formatting styles for tables. I almost always start with border-collapse.

HTML

The following HTML-only code:

<table border="1" cellpadding="4">
	<tr>
		<th>Oranges</th>
		<th>Lemons</th>
		<th>Bells of St Clement's</th>
	</tr>
	<tr>
		<td>Orange</td>
		<td>Yellow</td>
		<td>Yellow</td>
	</tr>
</table>

Will result in:

References:

1. HTML Table Borders. (2022). Retrieved 8 October 2022, from https://www.w3schools.com/html/html_table_borders.asp
2. CSS border-collapse property. (2022). Retrieved 8 October 2022, from https://www.w3schools.com/cssref/pr_border-collapse.asp