03-HTML5学习笔记-表格标签

三、表格标签(table)

647982-151e7c132c68a833.png

表格标签过去用的多，是一个时代的标志

• http://2004.sina.com.cn

• 定义和用法

• 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

• 作用：以表格的形式将数据表现出来，表格这种展示形式被认为是最清晰的一种展现形式

• 格式：

  
  647982-0e38b6457a7d5fb4.png.jpeg

• table定义表格

• tr定义行

• td定义单元格

<table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
</table>

表格标签的属性

647982-9bfa4696ea3a6d26.jpg.png

属性	描述
border	表格边框的宽度，默认值为0（看不到）
width	表格的宽度，默认是根据内容自动计算出来的
height	表格的高度，默认是根据内容自动计算出来的
cellspacing	外边距，默认单元格之间有2px的间隙
cellpadding	内边距，默认单元格边缘与内容有1px的内边距

|属性|描述|table|tr|td|
|-|-|-|-|
|align|横向对齐方式|整个表格|让当前行内容|让当前单元格内容|
|valign|纵向对齐方式|无效|让当前行内容|让当前单元格内容|
|bgcolor|背景颜色|整个表格|当前行|当前单元格|

• 注意：

• align：表格相对周围元素横向对齐方式，取值有center、left、right

• 不建议使用，css代替，仅用作了解属性

• 如果td、tr同时设置align属性，会按照td中的设置

• valign：表格相对周围元素纵向对齐方式，取值有center、left、right

  • 不建议使用，css代替
  • 如果td、tr同时设置valign属性，会按照td中的设置

• bgcolor：

  • 不建议使用，css代替，仅用作了解属性

表格中的其他标签

• 表单类型

• 标准单元格 - 包含数据（由td元素创建）

• 表头单元格 - 包含表头信息（由th元素创建）

• th标签：设置表头（即标题），表头内容自动加粗、居中

• caption标签：设置表格标题

• 一定要嵌套在table标签内部

• TIY(try it yourself)实例

  
  647982-3753691446b16b0a.jpg.png

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            [站外图片上传中……(5)]
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

表格的结构

• 表格中存储的数据可以分为4类

• 表格的标题(caption)

• 表格的表头信息(thead)

• 表格的主体信息(tbody)

• 表格的页尾信息(tfoot)

• 注意点

• 我们没有编写tbody，系统会自动给我们添加tbody

• thead和tfoot有自己默认的高度，那么在修改整个表格的高度时，不会随着表格的高度变化而变化

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

• 表格结构的意义：
• 主要用于SEO，一般情况下搜索引擎会优先抓取tbody中的内容，便于搜索引擎指定哪部分的内容是需要抓取的重要内容
• 由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

---