Question

与http://reference.sitepoint.com/css/tableformatting#tableformatting__tbl_table-objects-display-values

中第一个表格相同的html标记是什么？

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

感谢， BSR。

Answer 1

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

经过一些冥想和饮用水后，写了一些代码供你参考：

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>

Html列组和标题

4 个答案: