第三十六课 表格标签基本使用
其实在过去表格标签用的非常多，绝大多数网站用的都是表格标签，也就是表格标签是一个时代的代表
表格标签：给一堆数据添加表格语义的
表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式
格式：
<table> 整个表格
<tr> 行
<td> </td> 单元格
<td> </td> 单元格
</tr>
<tr> 行
<td> </td> 单元格
<td> </td> 单元格
</tr>
</table>
注意点：
默认情况下边框属性为0
表格标签是组合标签，table/tr/td是一起出现，要么都不出现
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
第三十七课 表格标签的属性
宽度 高度
可以给 table 和 td 使用
开始表格的宽度和高度按照内容的尺寸来调整的，我们可以调整table 的width和 height 的方式设置
td 的width和height会改变单元格的宽度和高度，不会影响整个表格的高度和宽度
水平对齐和垂直对齐
水平可以给table tr td使用
垂直可以给 tr td使用
水平
table align可以控制整个表格水平对齐方式
tr align 可以控制当前行中所有单元格中的水平对齐方式
td align 可以控制单元格内容在水平对齐方式
注意点：td 和 tr设置align时，以td的为准
垂直 valign 可以控制当前单元格中的内容在垂直方向的对齐方式
注意点：tr 和 td, 以 td 为准
外边距和内边距
只能table使用
外边距cellspacing 单元格与单元格之间的距离，我们称之为外边距 默认是2px
内边距cellpadding 单元格边框和文字之间的间隙
<!-- 表格属性 -->
<table border="1" width="300.0f" height="300.0f" align="right" cellspacing="20px" cellpadding="12px">
<tr align="center" valign="top">
<td align="right">1.1</td>
<td valign="bottom">1.2</td>
</tr>
<tr>
<td width="100px">2.3</td>
<td height="200px">2.4</td>
</tr>
</table>
属性只是了解，因为在公司中所有的都是用CSS控制的样式
第三十八课 细线表格
设置cellspacing 是不靠谱的
方式：
给table 设置bgcolor
给tr 设置bgcolor
设置table cellspacing = "1px"
<!-- 细线表格 -->
<br>
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td bgcolor="red">1.2</td>
<td>1.3</td>
</tr>
</table>
table tr td都支持bgcolor
但是只是了解，之后开发会在 CSS 中设置样式
第三十九课 表格中的其他标签
表格的标题
<caption></caption> 语义问题不是样式问题
只要将标题写在caption中，标题会自动像对表格居中
注意点：
1、caption 只在table中有效
2、caption 必须紧随在table标签后面
标题单元格标签
th 自动居中+加粗 语义问题不是样式问题
<table bgcolor="black" cellspacing="1px" width="800px">
<caption>
<h2>caption table标题</h2>
</caption>
<tr bgcolor="green">
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
</tr>
<tr bgcolor="white" align="center">
<td>num</td>
<td align="left">名字</td>
<td>
</td>
<td>
<a href="#">baidu</a>
<a href="javascript:">百科</a>
</td>
</tr>
</table>
第四十课 表格的结构 （了解）
表格的标题：caption
表格的表头信息：thead
表格的主体信息：tbody
表格的页尾信息：tfoot
注意：
如果没有添加tbody系统会自动添加tbody
thead tfoot，在修改table 的 height 时，会使用自己的默认高度，不会随着表格的高度变化
<!-- 表格的完整格式 -->
<table border="1" width="300" height="500">
<caption>标题</caption>
<thead>
<th>表头</th>
<th>表头2</th>
</thead>
<tbody>
<tr>
<td>lady</td>
<td>woman</td>
</tr>
<tr>
<td>sir</td>
<td>man</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td>
<td>sex</td>
</tr>
</tfoot>
</table>
第四十一课 单元格合并
水平方向
td 的 colspan 属性<td colspan="2"> </td>
方向：向右
去除覆盖的单元格
垂直方向
td 的 rowspan 属性
<td rowspan="2"> </td>
方向：向下
去除覆盖的单元格
<table border="1" width="800" height="500">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
<!--<td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<!--<td></td>-->
<td></td>
</tr>
<tr>
<!--<td></td>-->
<td colspan="2"></td>
<!--<td></td>-->
</tr>
</table>
第四十二课表格练习
<td colspan="2" rowspan="2"> </td>
<!-- 表格练习 -->
<table bgcolor = "black" cellspace="1" width="800" height="500">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
快速移动代码
Ctrl + shift + 上／下
合并展开 选择代码 （标签）
Ctrl + -
Ctrl + +
合并展开 所有选择代码 （标签）
Ctrl + shift + -
Ctrl + shift + +
新起一行
shift + enter
内容参考
