H5前端开发学习笔记——0x05表格标签

2018-07-09 本文已影响0人夜莺之刃

本节大纲

课时37表格标签基本使用(理解)
课时38表格标签的属性(了解)
课时39细线表格(理解)
课时40表格中的其它标签(理解)
课时41表格的结构(了解)
课时42单元格合并(理解)
课时43表格练习(了解)

表格标签<table>

其实在过去，表格标签用的非常多，绝大多是web都是用它做的

作用

为一对数据添加表格语义，对很大数据时，table将会展示的非常清晰

格式

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

table：一对table标签就是一个表格
tr：行
td：列

ps:默认表格边框宽度为0，是看不见的，需要给table添加border属性

表格标签的属性

水平对齐（table、tr、tb）垂直对齐（tr、td）
- align属性控制水平位置
- valign属性控制垂直位置
内外边距（table）
- 外边距：单元格与单元格之间的距离
  - cellspacing属性控制距离，默认情况下，其间的距离是2
- 内边距：文字距离单元格边框的距离
  - cellpadding属性控制距离，默认情况下，其间的距离是1
宽度高度（table、td）
- 可以使用width/height指定，未指定的将按照内容进行自动适配
- 如果给td修改高宽，不会影响整个表格的高度和宽度

细线表格

使用bgcolor属性来实现

新建表格table
先把table的bgcolor改为黑色
然后把行的bgcolor改为白色
然后把cellspacing改为1px

注意点：

table、tr、td标签都支持bgcolor属性。但以上内容仅作为了解，还是老规矩，css管样式！！

表格中的其他标签

caption标签，表格的专用标题标签
- 要写在table标签中，否则无效
th标签，标题单元格标签，只要将当前列的标题存储在其中，就会自动将文本居中加粗
- 到此，我们知道了两种单元格，一个是td，一个th；td存数据，th放列标题的

表格的结构

表格要是较为复杂，为了便于管理，我们可对表格分类，共分为四类

表格的标题
表格的表头信息
表格的主体信息
表格的页尾信息

表格的完整结构

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

caption 表格标题

thead 表头信息

tbody 主题内容

tfoot 表尾信息