什么是表格
表格是一种数据的呈现形式,当数据量比较大的时候,表格的展现会让数据更加的清晰
什么是表格标签
用来给一堆数据添加表格的语义
格式:<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: 水平对齐的方式: lest 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里面