Question

简单的问题，我想知道，2011年是什么方法来确定html表的大小？（当然，包含表格数据！）

以下是否还有可行的方法？

<tr>
    <th width="45%">Name</th>
    <th width="10%">Author</th>
    <th width="20%">Description</th>
    <th width="10%">Rating</th>
    <th width="15%">Download</th>
</tr>

或者为每列提供一个ID（或类）并用CSS设置其宽度会更好吗？

感谢您的投入！

Answer 1

您可以使用col或colgroup来实现此目的。

<table>
  <col class="x"/>
  <col class="y"/>
  <col class="z"/>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

...并将样式应用于类：

col.x {
   ...
}

Answer 2

2011年？从大约2000年开始，使用class更好的方法 - 名称和CSS样式为表格单元格提供宽度。

除非它们的宽度都相同，否则只需使用：

th /* or td */ {
    width: 20%;
}

可以想象，您也可以使用nth-child：

tr th:nth-child(1) {
    /* styles the first th of the tr */
}

JS Fiddle demo, using nth-child() css

Answer 3

我已经开始使用colgroup和col标签，如下所示：

<table>
    <colgroup>
        <col width="45%"></col>
        <col width="10%"></col>
        <col width="20%"></col>
        <col width="10%"></col>
        <col width="15%"></col>
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Author</th>
            <th>Description</th>
            <th>Rating</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 4

我个人的偏好是在列标签上使用width属性。

<table>
    <col width="15%"></col>
    <col width="20%"></col>
    ...etc...

可以说，它使演示文稿部分不在表格内容之内。

调整html列的正确方法是什么？

4 个答案: