html-表格的理解和使用
2017-06-28 本文已影响29人
Coder东
1.0.0 表格标签也是用来给一堆数据添加语义
表格是一种数据表现形式，当数据量非常大的时候，表格这种展现形式被认为是最清晰的一张展现形式。
表格的格式：
<table>
<tr>
<td></td>
</tr>
</table>
其实表格标签中的table就是代表表格，也就是一对table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据
也就是说一对tr标签代表表格中的一行
其实表格标签中的td标签就是表格中一行中的一个单元格
也就是一对td标签就是一行中的一个单元格
1.0.1 表格标签有边框属性：默认情况下这个属性的值为0，当属性值为0的时候是不会显示的。
表格标签和列表标签一样，他也是一个组合table 和tr/td 一起出现的，不会单个出现
1.0.2 宽度和高度的使用：
可以给table标签和td标签使用
表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width和height属性的方式来手动指定表格的宽度和高度
1.0.3 如果给td标签设置width和height属性，会修改当前的单元格的宽度和高度，不会影响整个表格的宽度和高度
1.0.4 水平对齐和垂直对齐属性
其中水平对齐可以给table标签 和 td/tr 标签使用
垂直对齐只能给tr标签和td标签使用
1.0.5 给table标签设置align属性，可以控制表格在水平方向的对其方式
1.0.6 给tr标签设置align属性，可以控制当前行中所有的单元格的对齐属性
给td设置align属性，可以控制当前单元格的对齐方式
注意点：
如果tr和td都设置的话，按照td的设置为准
1.0.7 给tr设置了valign属性，可以控制当前行中所有的单元格的内容的，在垂直方向的对齐方式
1.0.8 给td设置了valign属性，可以控制当前单元格中的内容在垂直方向的对其方式
注意点：
如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容就会按照td中设置的来对齐
2.0.0
外边距和内边距：
外边距：就是单元格和单元格之间的距离，只能给table使用,默认情况下单元格之间的距离为2px
内边距： 就是单元格的边框和文字之间的间隙,默认为1px；
注意：
以上仅为了解，以后所有的样式都是css实现
2.0.1 细线表格的设置方式：
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = “1px”；
注意点：table标签和tr标签以及td标签都支持bgcolor属性，但是以上内容仅仅作为了解，因为样式都是要通过css来控制
caption标签的注意点：专门用来设置表格的标题，设置完成就会自定居中
caption标签一定要卸载table标签中，否则无效，一定要紧跟在table标签后面
标题单元格标签：
在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签就做th标签，只要将当前的标题存储在这个标签中，就会自动居中+加粗文字
到此为止我们发现，其实表格中有两种单元格，一种是td，一种是th，td专门用来存储数据的，th是专门用来存储当前列的标题的
3.0.0
单元格的合并问题：
水平方向的单元格的合并：可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待
例如： <td colspan = "2"></td>含义：当前单元格当做两个单元格来看待
注意点：
1. 由于把某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示
2. 一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并
3.0.1
垂直方向的单元格的合并
可以给td标签设置一个rowspan属性，来指定把某一个单元格当做多个单元格来看待（垂直方向）
例如：
<td rowspan = "2"></td>
含义：把当前单元格当做两个单元格来看待
快速移动选中的代码的上下移动：
往上：control + shift + 方向键上
往下： control + shift + 方向键下
快速合并和展开代码（合并展开的是某一标签）
合并：control + -
展开： control + +
快速合并和展开代码（合并和展开选中的所有标签）
合并： control + shift + -
展开： control + shift + +
<body>
<!--
1.默认情况下文字和输入框没有关联关系的,
也就是说点击文字输入框不会聚焦,如果想点击文字时
让对应的输入框聚焦,那么就需要让文字和输入框进行
绑定
2. 要想让输入框和文字绑定在一起,那么我们可以使用
label标签
3. 绑定 的格式
3。1 将文字利用label标签包裹起来
3。2 给输入框添加一个id属性
3。3 在label标签中通过for属性和输入框中的id进行绑定即可
-->
<form>
<label for="account">账号:</label><input type="text" id="account"> <br>
<label for="pwd">密码:</label><input type="password" id="pwd">
</form>
</body>
<body>
<!--
1.datalist标签
作用:给输入框绑定带选项
如何绑定带选型呢:
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4,给输入框添加一个list属性,将datalist的
id对应的值赋给list属性即可。
-->
请输入你的车型:<input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
</datalist>
