day5-表格标签
2016-11-16 本文已影响24人
喵鸢
上一部分主要介绍关于列表标签，列表标签分为无序、有序、定义，各自特点和属性及应用场景
地址：http://www.jianshu.com/p/e8e5e011177b
今天要介绍关于表格标签及其属性宽度高度、对齐方式、内边距外边距（属性部分为了解内容，在以后的开发中样式均由CSS编写）、表格标签的其他属性caption、th等、表格的结构tbody（开发中不会主动使用，系统会自动添加）等、表格的合并
如果有什么笔记中有什么错漏，或者提问技术问题都可以留言，大家进行经验分享 ---- 喵
表格标签
-
历史转折点：过去几年的网站大部分都是使用表格标签制作的，现在被div+css取代了
以前的网站.png
-
作用：给一堆数据添加表格语义
- 表格：一种数据的展现形式，当数据量非常大的时候，表格被认为是最清晰的一种展现形式
-
格式：
<table>
<tr>
<td></td>
</tr>
</table> -
属性
- tr：表格中的一行数据
- td：一行数据中的某个单元格
-
练习：表格2行3列
表格基本使用.png
- 注意点：
- 1️⃣表格标签有一个边框属性，默认是0，要看到边框必须设置该属性
- 2️⃣table和tr td是一个整体，不会打单独出现
表格标签的属性
1. 高度宽度
- 可作用在table标签、tr标签和td标签上
- 注意点：
- 1️⃣高度和宽度默认是按照内容尺寸来调整，也可以给table标签width和height属性手动设置---设置height时候会报警告
- 2️⃣给td标签设置width和height属性，不会影响整个表格的宽度和高度
2. 水平对齐和垂直对齐
- 1）水平对齐align：可作用在table标签、tr标签和td标签上
- 注意点
- 1️⃣table标签设置align属性，可以设置表格水平方向的对齐方式：left（默认）、center、right
- 2️⃣tr标签设置align属性，可以设置该行所有单元格内容水平方向的对齐方式：left（默认）、center、right
- 3️⃣td标签设置align属性，可以设置该单元格内容水平方向的对齐方式：left（默认）、center、right-----同时设置td和tr的水平对齐方式会按照td设置方式显示
- 2）垂直对齐valign：只能给tr标签和td标签
- 注意点：
- 1️⃣table标签设置valign属性，无效
- 2️⃣tr标签设置align属性，可以设置该行所有单元格内容垂直方向的对齐方式：top、center（默认）、bottom
- 3️⃣td标签设置align属性，可以设置该单元格内容垂直方向的对齐方式：top、center（默认）、bottom-----同时设置td和tr的垂直对齐方式会按照td设置方式显示
3. 外边距和内边距
- 只能给table标签使用
- 外边距cellspacing：单元格与单元格之间的距离，默认是2px
- 内边距：内容和单元格边框之间的距离，默认是1px
练习代码
<body>
<!--table标签设置height有警告-->
<table border="1" width="500px" height="300px" align="center" valign="center" cellspacing="10" cellpadding="20">
<tr valign="top">
<td height="100">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr align="right">
<td align="left">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
</body>
细线表格
实现方式
- 1.取消外边距cellspacing="0"，无法达到效果，只是把边框和外边距合成了一条线
- 2.设置背景颜色，再设置外边距
- 注意点：
- table标签、tr标签、td标签都可以设置bgcolor
- 仅作了解，设置样式使用CS
- 代码
<body>
<table bgcolor="black" cellspacing="1" >
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td bgcolor="red">2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
表格标签的其他标签
- 1）表格标题caption，可以自动相对于整个表格宽度居中
- 注意点：
- 1️⃣一定要写在table标签里面才有效
- 2️⃣一定要紧跟着table标签后面
- 2）每一列标题th标签（通常在第一行），设置之后会自动加粗并且居中显示
- 小结：
- 表格中有两种单元格
- th：用来存储当前列的标题
- td：用来存储数据
- 表格中有两种单元格
练习
<body>
<!--7行6列表格-->
<table bgcolor="black" cellspacing="1" width="800px">
<caption>
<!--标题需要根据表格位置居中显示,则需要表格标题属性-->
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9" >
<!--th标签是列单元格标题,自动加粗居中-->
<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>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
练习表格图
表格的结构（了解）
- 以上内容的表格标签内容并不完整，若在浏览器中打开网页，里面的table标签后面会自动添加tbody标签等；但是在开发中不需要写完整的，因为浏览器会自动帮我们添加这些tbody这些标签
- 为了提升表格的语义，对表格中存储的数据进行了分类，可以分为四类
- 1.表格标题caption
- 2.表头信息（每列标题）thead中有tr th
- 3.主题信息（单元格数据）td
- 4.页尾信息（根据数据计算出来的信息）tfoot中有tr td
- 注意点：
- 1️⃣如果我们没有编写tbody系统会自动添加tbody
- 2️⃣如果指定了thead和tfoot，在修改表格高度的时候，thead和tfoot有默认的高度，不会随之改变
练习
<body>
<table border="1" width="200" height="200">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td>
<td>25</td>
</tr>
</tfoot>
</table>
</body>
练习-表格的结构
单元格合并
- 1.水平方向的单元格合并
- td标签添加一个colspan属性，把某一单元格当做多个单元格
- 2.垂直方向的单元格合并
- td标签添加一个rowspan属性，把某一单元格当做多个单元格
- 注意点：
- 1️⃣被合并的单元格不需要再写标签td
- 2️⃣单元格合并永远是向后和向下！！
练习1
<table bgcolor="black" width="500" height="300" align="center">
<tr bgcolor="white">
<!--该单元格当中两个单元格-->
<td colspan="2" bgcolor="aqua"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td rowspan="2" bgcolor="#7fffd4"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
单元格合并
练习2
<table bgcolor="black" cellspacing="1" width="200" height="200" align="center">
<caption></caption>
<tr bgcolor="white">
<td></td>
<td rowspan="2" colspan="2"></td>
<!--<td rowspan="2" colspan="2"></td>-->
</tr>
<tr bgcolor="white">
<!--<td colspan="3"></td>-->
<!--<td></td>-->
<td></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
快捷键
- 移动代码块：command + shift + 上下方向键
- 快速合并展开代码：command + 加号/减号 ---光标位置---单个标签
- 快速合并展开代码：command + shift +加号/减号 ---光标选中多个标签
- 快速新启一行：shift + 回车
