Question

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

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;
}

问题例如：

这是thead，th和tbody标签的正确使用吗？
我真的必须对每个td应用class="style1"吗？（如果我只将其应用于TR，则不会正确影响字体。
这是在左上角留一个空格的正确方法吗？
我应该在CSS中定义border="1" cellpadding="0" cellspacing="0"吗？
我希望Table的宽度是固定的，我应该用HTML（像现在这样）或CSS来表示吗？
您建议如何处理Cell的宽度？我应该在每个单元格上指出它们吗？它们在这里没有任何区别（你可以看到总宽度大于整个桌子的宽度）所以我不知道该怎么做。我将在每个单元格中更改文本量。
这是在单元格和表格之间创建红色边框的正确方法吗？（仅定义table的右侧和顶部，td仅左侧和下侧

谢谢！

Answer 1

我的想法/答案

它们似乎正确用于标记

只要您确定了表格，就不必为每个td或tr创建特定的类。例如，您可以：

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

然后在你的CSS中，你可以做类似的事情：

#myUniquelyIdentifiedTable th{
...
}

#myUniquelyIdentifiedTable td{
 ...
}

等

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

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）我不会使用这种方法。我会将表格的背景颜色设置为红色，然后将TH和TD的背景设置为不同。 cellspacing和border设置将为您提供必要的边框颜色。（这是老式的，但有效 - 还有其他方式来设置表格）

这是创建此表的最佳方法吗？（小提琴）

1 个答案:

这是创建此表的最佳方法吗？ （小提琴）

1 个答案:

这是创建此表的最佳方法吗？（小提琴）