css代码和结构

Question

几乎不好意思问，因为我之前从未需要过多使用过桌面......

现在我有一个需要大量有组织的桌子的项目，如图所示。

假设我有一个这样的表：

<table border="1px" style="width:300px">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>        
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>      
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>      
      <td>80</td>
    </tr>
  </tbody>
</table>

首先，根据我的阅读，<thead>和<tbody>似乎是可选的分组目的，但这个基本设置是否正确？

在浏览器中显示它看起来很好，但我想知道我的代码是否真正在DOM中正确构造元素？ I.E. DOM是否正确地将<th>First Name</th>与包含名字数据的<td>相关联？我问，因为我将需要依赖它来使用javascript对表进行排序。

如果这是一个非常简单的问题，我道歉。如果引用了正确的表结构＆＃34;文章，我也会接受。

Answer 1

您的HTML标记很好，除非您应该使用CSS类而不是内联样式，border属性通常更适合作为样式。

如果您对有效标记感到好奇，可以使用验证工具进行检查。这里有一个，由W3C提供：http://validator.w3.org/

HTML是一个表示性标记。在任何给定元素中都没有隐含的数据关联 - 也就是说，您知道包含名字的td不会以任何方式将其自身与在视觉上标记它的标题相关联。就HTML而言，你没有数据，只有一堆字形，它在屏幕上形状和盒子和移动。

这扩展到javascript - DOM中的标题和表格单元之间没有关联。

也就是说，排序表是一种非常常见的UI模式，您可以找到large number of examples以及现有插件。我强烈建议您考虑一个既定的插件，如果您打算将其用于除学习体验之外的任何其他内容。据推测，插件作者已经考虑了如果你试图制作自己的插件，那么你必须考虑到所有的细节，问题和跨浏览器注意事项。

<强>文档

MDN表格 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables
MDN <table>元素 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
MDN HTMLTableElement - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

Answer 2

最佳html表结构和css概念：

<table cellpadding="0" cellspacing="0" width="100%" class="table">
<thead>
<tr>
 <th>Header1</th>
 <th>Header2</th>
 <th>Header3</th>
</tr>
</thead>
<tfoot>
<tr>
 <th>Footer1</th>
 <th>Footer2</th>
 <th>Footer3</th>
</tr>
</tfoot>
<tbody>
<tr>
 <td>data1</td>
 <td>data2</td>
 <td>data3</td>
</tr>
<tr>
 <td>data1</td>
 <td>data2</td>
 <td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>

</table>

css代码和结构

<style>
html, body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.table{border-collapse:collapse; width:100%}
.table thead th, .table tfoot th{text-align:center; background:#999; color:#FFFFFF;}
.table th, .table td{padding:5px; border:1px solid #ddd;}
.table tr:nth-child(even){background:#eee;}

</style>

适当的HTML表结构？

2 个答案:

css代码和结构