HTML tables can be very tricky to design, as the more complex the table or if you’ve nested tables, the harder it is to add rows with the right amount of cells, change the colspan correctly, or delete cells. In fact, I have been known to switch to WYSIWYG mode just to build a complex table. But with this simple trick you can edit your tables and get them ready to go live and be perfect without having to start over from scratch every time.

Use the Border Attribute on Your Table

<table border="1">

Even if you’re creating a table that will not have borders, turn the border on while you’re editing the table. Then, whenever you have to make a change, you can clearly see where the browser thinks that your table cell edges are.

Once you’re ready to go live, change the border to 0. Don’t remove the attribute, in case you have to edit the table later.

You can also do this with CSS, but it’s a little trickier as there are a few more styles you need to use.

Look at the two images associated with this article - which table is easier to figure out? They are the same table, the only difference is that I turned on the borders on the outer table to make it easier to read.