Html列组和标题

Question

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

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

谢谢，bsr。

Answer 1

好问题。我坐下来反思上次我解决表格格式问题，然后导航到以下链接：

• 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简单地成为具有类或元素的那些元素的选择。对于你的问题，我选择了元素。

HTH！

@gsvolt

Answer 2

要使<th>跨越一组行，请为其指定rowspan属性。对于collumns，colspan属性。

然后以<th>元素为目标，使用常规的CSS选择器方法，如.class，#id，tag等。

Answer 3

你可以使用<colgroup>和<col class="men">

请参阅：http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ 5.垂直斑马风格

Answer 4

我只是写了你在链接中提到的同一个表。我希望它会帮助你。谢谢

thead th,
tbody tr td:first-child {
  background-color: #ccc;
}

<table border="1" style="border-collapse: collapse;">
  <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>
        <td>Question 1</td>
        <td>42%</td>
        <td>58%</td>
        <td>61%</td>
        <td>39%</td>
    </tr>
    <tr>
        <td>Question 2</td>
        <td>53%</td>
        <td>47%</td>
        <td>69%</td>
        <td>31%</td>
    </tr>
    <tr>
        <td>Question 3</td>
        <td>26%</td>
        <td>74%</td>
        <td>51%</td>
        <td>49%</td>
    </tr>
    <tr>
        <td>Average</td>
        <td>40%</td>
        <td>60%</td>
        <td>60%</td>
        <td>40%</td>
    </tr>
  </tbody>
</table>