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> </p>
for spacing. Is there a better way to do this?
:empty
selector.