HTML@5表格标签

作者 Jackie Anxis 日期 2016-08-08
HTML@5表格标签

常用标签

表格标签

表格标签最重要的这几个标签都基本包含在这个代码中,

<table border="1px">
<caption>表格标题</caption>
<thead>
<tr><th>列标题1</th><th>列标题2</th></tr>
</thead>
<tbody>
<tr><th>行1列1</th><td>行1列2</td></tr>
<tr><th>行2列1</th><td>行2列2</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">……</td></tr>
<!--colspan可以用来合并列,rowspan可以用来合并行-->
</tfoot>
</table>

效果大概是:

可以看到:

  • <table>标签包裹在最外层,表示这是一个表格。它有一些必要的属性,比如控制边框粗细,边框和内容之间的空白宽度等,具体见:HTML table标签
  • <caption>,这是一个表格的标题
  • <thead>表示的是表格的标题栏,具体见:HTML thead标签
  • <tbody>表示的是表格的主题部分,具体见:HTML tbody标签
  • <tr>表示一行,table row的意思,具体见:HTML tr标签
  • <th>表示一个单元格,而且这个单元格是一个表头,带有加粗的效果,具体见:HTML th标签
  • <td>表示一个普通单元格,它也具有一些属性,比较重要的有colspan/rowspan属性(其实<th>也有这个属性),这个属性的值,表示这个单元格占几格,比如上面这个Example中,最底下的单元格就占了两列。其他属性可见:HTML td标签
  • <tfoot>表示表格的页脚(脚注或者标记)。特别需要注意的是,thead, tbody, tfoot需要一起配合使用,一旦用了其中一个,其他两个也要一起使用,其属性也和其他两者类似,可以参考:HTML tfoot标签