What's the best way to represent an empty TH in HTML5?

Question

Say I have the given table:

       +------+------+------+
       | Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+

And I want to represent it in HTML5. The tricky thing is that tables like this must be semantically important, but the top-left cell is not semantically important, but instead a spacer to line up the more important column headers. What's the best way to do this? My first idea is to do it like this:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>D1.1</td>
            <td>D1.2</td>
            <td>D1.3</td>
        </tr>
        <tr>
            <th>Row2</th>
            <td>D2.1</td>
            <td>D2.2</td>
            <td>D2.3</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>D3.1</td>
            <td>D3.2</td>
            <td>D3.3</td>
        </tr>
    </tbody>
</table>

Though, putting <th></th> in there feels just wrong, like using <p>&nbsp;</p> for spacing. Is there a better way to do this?

Answer 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 the same 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
 <!-- omitted for brevity -->
</table>

Answer 2

There is nothing wrong with an empty element. It is not incorrect syntax, nor is it a bad practice, in fact; it would be much better to use an empty element in this instance as opposed to using other hacks to achieve such a layout.

Aside from that, there is even an :empty selector.

This selector is proof in itself that there is nothing incorrect about an empty element.

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM [DOM-LEVEL-3-CORE] text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.

W3C http://www.w3.org/TR/css3-selectors/#empty-pseudo

Answer 3

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.

Answer 4

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

Exact code:

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