Html 列组和标题

Question

要实现与 http://reference.sitepoint.com/css/tableformatting#tableformatting__tbl_table-objects-display-values 中的第一个表相同的结果，html 标记是什么？

我正在寻找他们如何指定列组以及如何设置标题(女性、男性)。另外，如何在 css 中定位特定的列组。

谢谢，bsr.

Answer 1

好问题。我坐下来反射(reflection)上次我解决表格格式问题的时间，然后导航到以下链接:

• > http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4
• > http://www.w3.org/TR/CSS2/tables.html

冥想喝水后，写了一些代码供大家引用:

body {
  background: #e4e4e4; 
  font-family: sans-serif;
}
th {
  background: #d5d6d6;
}
td {
  background: #fff;
}
table {
  border-collapse: separate;
  border-spacing: 1em 0.5em;
  background-color: #ddd;
}
th, td {
  border: 1px solid #000;
  padding: 4px;
}
tfoot {
  font-weight: bold;
}

<table>
   <thead>
    <tr><th rowspan="2">Question</th><th colspan="2">Women</th><th colspan="2">Men</th></tr>
    <tr><th>Yes</th><th>No</th><th>Yes</th><th>No</th></tr>
   </thead>   
   <tbody>
    <tr><th>Question1</th><td>42%</td><td>58%</td><td>61%</td><td>39%</td></tr>
    <tr><th>Question2</th><td>53%</td><td>47%</td><td>69%</td><td>31%</td></tr>
    <tr><th>Question3</th><td>26%</td><td>74%</td><td>51%</td><td>49%</td></tr>
   </tbody>
   <tfoot>
    <tr><th>Average</th><td>40%</td><td>60%</td><td>60%</td><td>40%</td></tr>
   </tfoot>
</table>

大多数情况下，当我尝试查看此类布局时，我会尝试计算最终 html 中需要多少行和多少列。这有助于正确构建 html。

然后 CSS 就简单地变成了那些带有类或元素的元素的选择。对于你的问题，我选择了元素。

喂!

@gsvolt