4、表格

表格

什么是表格

表格是一种数据的呈现形式，当数据量比较大的时候，表格的展现会让数据更加的清晰

什么是表格标签

用来给一堆数据添加表格的语义

格式：<table> 表格

<tr> 行

<td></td><td></td><td></td>.... 列 内容写在td里面

</tr>

<tr>

<td></td><td></td><td></td>....

</tr>

</table>

表格中的属性

border:表格中的边框 默认情况下0 取值代表边框的粗细

cellspacing 单元格与单元格之间的间距 默认为2个像素的

cellspadding 单元格与内容之间的距离 默认1个像素

width: 表格的宽度 默认情况下为内容的宽度

height:表格的高度 默认情况下为内容的高度

align: 水平对齐的方式： left center right 默认left

在table中设置 表格在浏览器中为 居左 居中 居右

在tr中设置 当前行的内容在表格中 居左 居中 居右

在td中设置 当前列【当前单元格】的内容在表格中 居左 居中 居右

valign 垂直对齐方式 ： top middle bottom

在table中设置 无效

在tr中设置 当前行的内容在表格中 居上 居中 居下

在td中设置 当前列【当前单元格】的内容在表格中 居上 居中 居下

bgcolor 设置表格的背景颜色

在table中设置 为整个表格添加背景颜色

在tr中设置 为当前行添加背景

在td中设置 为当前列【当前单元格】添加背景

th（推荐不使用）

作用：给表格中的文字加粗 居中

<tr><td>XXX</td></tr>

<tr><th>XXX</th></tr>

注意 表格是独占一行的

表格的结构

作用：由于表格中存储的数据比较复杂（标题 头 主体 尾巴）为了方便管理和阅读，

我们必须要提升表格的语义，我们可以吧表格分为4类

结构：<table>

<caption>表格的标题</caption>

<thead>

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

</thead>

<tbody>

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

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

......

</tbody>

<tfoot>

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

</tfoot>

</table>

caption 指定表格的标题

thead 指定表格的头

tbody 指定表格的主体

tfoot 指定表格的附加信息

合并单元格

格式：合并行 rowspan="n" n代表合并几行

合并列 colspan="n" n代表合并几列

注意点 : 写在td里面