HTML金字塔形表

昨天一个朋友给我看了一个他在课堂上遇到的奇怪问题。他无法制作金字塔形的表格（如下面我的JSFIDLE链接所示）。
我从来没有真正处理过很多html表，但我认为这只是因为他们使用的程序很愚蠢。但当我试着自己为它编写html时，我发现它不仅仅是这样

这就是我所尝试的：

A.
B
C
D
E
F
G
H
我
J
K
L

如您所见，该表与您所期望的完全不同（除非您已经知道这一点）。
因此，在进行了一些web搜索之后，我提出了以下内容，这些内容很好（使用一行css）：

A.
B
C
D
E
F
G
H
我
J
K
L

但我想知道，有没有更好的方法来编写代码？ 我的意思是，那些空的col元素看起来很傻，对吗？

---

因此，如果有人能启发我，我将不胜感激。

目前没有更简单的方法。这是一个很好的例子，说明实际需要

col

元素（用于预期的样式）。原因是，否则就无法引用CSS中的第3列和第4列，因为没有表单元格在这样的列中只占用一个槽

从理论上讲，

：nth-column（）

伪类允许我们在不使用

col

元素的情况下进行样式设计，但这确实是正在进行的工作，正在计划中（）。

这个“金字塔”看起来真的很难看：

当您查看无边框表格时，尤其明显：

最好的折衷办法是添加必要的空（

）单元格，以便间距正确吗？我将所有列的宽度设置为20px，如果需要，您可以使用css来实现这一点，而无需在下面的示例中使用

col

最后一个比较：

---

我明白了。无论如何，谢谢你。我只是觉得从colspans中可以明显看出应该有6列，所以这些似乎是不必要的…是的，浏览器可以计算出有6列。但是没有引用列的CSS选择器，除非您有

col

元素。

<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>

<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>