html - 这是创建此表的最佳方法吗？ ( fiddle )

Question

我想创建一个表that would look like this fiddle

我想知道当前代码是否是创建这种外观的最佳方式？

HTML:

<div id="wrapper">
 <div id="margin">
   <table width="720" border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th width="95" valign="top" class="style1"></th>
          <th width="321" valign="top" class="style1">Column A</th>
          <th width="369" valign="top" class="style1">Column B</th>
          <th width="331" valign="top" class="style1">Column C</th>
         </tr>
       </thead>
       <tbody>
        <tr>
          <td width="95" valign="top"><p>Row A</p></td>
          <td width="321" valign="top"><p>Content</p></td>
          <td width="369" valign="top"><p>Content</p></td>
          <td width="331" valign="top"><p>Content</p></td>
        </tr>
        <tr>
          <td width="95" valign="top"><p>Row B</p></td>
          <td width="321" valign="top"><p>Content</p></td>
          <td width="369" valign="top"><p>Content</p></td>
          <td width="331" valign="top"><p>Content</p></td>
        </tr>
       </tbody>
  </table>
 </div>     
</div>

CSS:

p, em, font, table, tr, th, td, thead, tbody, tfoot
{
    font-size: 100%;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

table   { 
table-layout: auto; border-collapse: separate; border-spacing: 0; empty-cells: show;
}

body
{
    font-family: 'Alef', serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#wrapper {
    border: 1px solid #000;
    width: 940px;
    background-color: #FFC;
    min-height: 632px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    overflow: hidden;
}
.style1 {
    background-color: #03C;
    padding-bottom: 14px;
    color: #FFFFFF;
    font-weight: 400;
    font-family: 'Open Sans';
    vertical-align: middle;
}
#margin {
    margin-bottom: 40px;
    margin-left: 30px;
    margin-right: 250px;
    margin-top: 40px;

}

td,th {
    color: #678197;
    border-bottom: 1px solid #903;
    border-left: 1px solid #903;
    padding: .3em 1em 2em 1em;
    text-align:left;
}

tr:nth-child(even) {
    background-color:#CCC;
}

table {
    border-top: 1px solid #903;
    border-right: 1px solid #903;
    background-color: #F4F2F3;
}

问题举例:

1. thead、th 和 tbody 标签的使用是否正确？

2. 我真的必须对每个 td 应用 class="style1" 吗？ (如果我只将它应用于 TR，它不会正确影响字体。

3. 这是在左上角留一个空白单元格的正确方法吗？

4. 我应该改为在 CSS 中定义 border="1"cellpadding="0"cellspacing="0" 吗？

5. 我希望表格的宽度是固定的，我应该用 HTML(就像现在)还是 CSS 来指示它？

6. 您建议如何处理单元格的宽度？我应该在每个单元格上指明它们吗？无论如何它们在这里没有什么区别(你可以看到总宽度大于整个表格的宽度)所以我不确定在这里做什么。我将改变每个单元格中的文本数量。

7. 这是在单元格和表格之间创建红色边框的正确方法吗？ (table 只定义 right 和 top，td 只定义 left 和 bottom)

谢谢!

Answer 1

我的想法/答案

1. 它们似乎是标签的正确用法

2. 您实际上不必为每个 td 或 tr 创建特定的类，只要您确定您的表即可。例如，您可以:

   <table id="myUniquelyIdentiedTable">
      <tr>
         <th>Column A</th>
         <th>Column B</th>
      <tr>
   ....
   </table>
   

然后在您的 CSS 中，您可以执行如下操作:

#myUniquelyIdentifiedTable th{
...
}

#myUniquelyIdentifiedTable td{
 ...
}

等等

3) 我倾向于实际指定一个空白  对于某些跨浏览器兼容性，但在语义上，它没有任何问题。

4) 你可以做到；我不记得他们这样做太难了，但这不是直接的(1 对 1)转换。

5) 限制宽度你可以用容器包裹表格，并限制容器的宽度。即

<div class="tableWrapper">
  <!-- your table here -->
</div>

// in your CSS
.tableWrapper{
   width: 400px;
}

.tableWrapper table{
   width: 100%;
}

6) 对于单元格的宽度，我通常只在 TH 上设置它，而不是在所有 TD 上设置。如果可能，您可以为相关的 TH 命名(即 <th class="single-width"> )，然后使用 CSS .single-width{ width: 100px; } 设置宽度样式。

7) 我不会使用那种方法。我会将表格的背景颜色设置为红色，然后将 THs 和 TDs 的背景设置为不同的。单元格间距和边框设置将为您提供必要的边框颜色。 (这是老式的，但有效——还有其他方式来设置表格样式)