What's The Best Way To Represent An Empty Th In Html5?

Say I have the given table: +------+------+------+ | Col1 | Col2 | Col3 | +------+------+------+------+ | Row1 | D1.1 | D1.2 | D1.3 | +------+------+------+------+ |

Solution 1:

It's completely acceptable to have an empty <th> element, speaking in terms of either validity or semantics. Nothing in the spec forbids it; in fact, it contains at least one example that makes use of an empty <th> for this very purpose:

The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:

<table><thead><tr><th><th>2008
   <th>2007
   <th>2006
 <tbody><tr><th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
 <!-- snip --></table>

Solution 2:

For a discussion about semantics and empty table elements I would like to refer to this question on StackOverflow

Styling of "empty" cells (like background or borders) can sometimes depend on the absence/presence of "content" that is why people often put a   inside. There is a special CSS tag for styling empty cells you can read about it here on MDN.

table {
    empty-cells: hide;
}

Here you can find another article with some nice background information on this topic.

Solution 3:

Any better way of using empty <th></th>:

Exact code:

<tr><th></th><thcolspan="6"></th></tr>