html - HTML 金字塔状表格

Question

昨天一位朋友向我展示了他在课堂上遇到的一个奇怪问题。他无法制作金字塔状的表格（如下面的 jsfiddle 链接所示）。
我从来没有真正处理过 html 表格，但我认为这只是他们使用的程序很愚蠢。但是当我自己尝试为它编写 html 时，我发现它不止于此......

这就是我正在尝试的：http: //jsfiddle.net/5aDkL/

<table border="1">
    <tr>
        <td colspan="1">A</td>
        <td colspan="1">B</td>
        <td colspan="2">C</td>
        <td colspan="1">D</td>
        <td colspan="1">E</td>
    </tr>
    <tr>
        <td colspan="1">F</td>
        <td colspan="2">G</td>
        <td colspan="2">H</td>
        <td colspan="1">I</td>
    </tr>
        <tr>
        <td colspan="2">J</td>
        <td colspan="2">K</td>
        <td colspan="2">L</td>
    </tr>
</table>

如您所见，该表与您预期的完全不同（除非您已经知道这一点）。
因此，经过一些网络搜索，我想出了以下内容，效果很好（只有一行 css）：http: //jsfiddle.net/SzWHX/

<table border="1">
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <tr>
        <td colspan="1">A</td>
        <td colspan="1">B</td>
        <td colspan="2">C</td>
        <td colspan="1">D</td>
        <td colspan="1">E</td>
    </tr>
    <tr>
        <td colspan="1">F</td>
        <td colspan="2">G</td>
        <td colspan="2">H</td>
        <td colspan="1">I</td>
    </tr>
        <tr>
        <td colspan="2">J</td>
        <td colspan="2">K</td>
        <td colspan="2">L</td>
    </tr>
</table>

但我想知道，有没有更好的编码方式？我的意思是，那些空的 col 元素在那里看起来很傻，对吧？
因此，如果有人能启发我，那将不胜感激。