table表格的thead、tbody和tfoot應用程式碼例項

admin發表於2017-02-17

可能很多朋友對於table標籤的使用比較熟悉，但是對於thead、tbody和tfoot不夠熟悉，因為不使用這三個標籤基本上不影響使用，其實如果能夠合理的使用這三個標籤，可以是對錶格的操作或者美化更為輕鬆便捷，下面就是一段使用上述三個標籤的程式碼例項和大家分享一下，希望能夠給需要的朋友帶來一定的幫助，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.table{
  width:300px;
  height:100px;
  border:1px solid #ccc;
  border-collapse:collapse;
}
.table td, .table th{
  border:1px solid #ccc;
  padding:5px;
}
.table tfoot{color:red}
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>考試科目</th>
      <th>相關分數</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>計算機數學</td>
      <td>80</td>
    </tr>
    <tr>
      <td>作業系統</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>總分數</td>
      <td>165</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

上面的程式碼演示了三個標籤的的用法，用三個標籤將table表格的三個功能區域分隔，非常便於對於相關內容進行設定樣式和進行其他不同的操作，更多內容可以參閱相關閱讀。

相關閱讀:

1.thead標籤可以參閱HTML <thead>一章節。

相關文章