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元素只是看起來很傻，對吧？
所以，如果任何人都可以啓發我，那將是非常感激。

Answer 1

目前沒有簡單的方法。這是一個很好的例子，其中col元素真的需要（用於預期的樣式）。原因在於否則無法引用CSS中的第3列和第4列，因爲沒有表格單元格在這樣的列中僅佔用一個槽。

從理論上講，:nth-column()僞類可以讓我們在沒有col元素的情況下進行樣式設計，但它確實在進行中，正在計劃中（CSS Selectors Level 4）。

Answer 2

這種 「金字塔」 長得真醜：

當你看錶無國界尤其明顯：

豈不更好的妥協是添加必要的空格（ ）單元格的間距是否正確？我將所有列設置爲20px的寬度，如果需要，可以在下面的示例中使用css而不使用col。

最後一個比較：