学习目标
1.表格含义以及作用
2.表格的基本用法
3.表格的标签属性
4.表格的css属性
5.表格新增的内容
1.表格的含义及作用
表格的含义：表格就是一个带有边框的矩阵
表格的作用：将数据整齐的显示在浏览器中，方便用户使用和操作
2.表格的标签简介
<table></table>
table 表示的是一个表格，每一个table都表示一个表格
<tr></tr>
tr 表示一个表格中的行，应当写在table标签中间，有几个tr就有几行，也是table-row的简写
<td></td>
td 表示一个表格中的列，写在tr中间，一个tr中有几个td就有几列，也是table-column的简写
如下，创建一个三行四列的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>
</html>3.表格的标签属性
1.table 的标签属性
（1）边框
border = " 1 "
没有单位，他会给表格以及单元格全部添加边框，如果继续增大数值，则只有表格的外部边框变大。
（2）宽度高度属性
width = " px "
height = " px "
（3）背景颜色
background-color = " "
（4）边框颜色
border-color = " "
（5）表格水平对齐
align = " left / center / right "
（6）表格内部横纵线
rules = " rows / cols "
rows 水平线
cols 垂直线
（7）单元格与单元格之间的间距
cellspacing = " px "
（8）单元格与内容之间的间距
cellpadding = " px "
2.tr的标签属性
（1）高度属性
height="150px"
（2）背景颜色属性
bgcolor="red"
（3）文本水平对其
text-align="left/right/center"
设置一整行单元格内容的水平对其方式
（4）文本垂直对齐
valign="top/bottom/middle"
设置一整行单元格内容的垂直对齐方式
3.td的标签属性
（1）宽度属性
width="200px"
取值可以不带单位
（2）高度属性
height="200px"
height="200px"
取值可以不带单位
（3）背景颜色属性
bgcolor="red"
（4）水平对其方式
align="left/right/center"
调整当前单元格的水平对其方式
（5）垂直对其方式
valign="top/bottom/middle"
调整当前单元格的垂直对其方式
（6）水平合并单元格
colspan="数值"
水平合并单元格, 水平跨列
（7）垂直合并单元格
rowspan="数值"
垂直合并单元格, 垂直跨行
4.表格的CSS属性
1.table的CSS属性
(1）边框属性
border : 1px solid blue;
这里的边框属性只能给table添加边框，不会给单元格加
如果想要给单元格加边框，则需要将该样式添加到 td 标签的CSS样式中
（2）单元格与单元格之间的间距
border-spacing : 0 px ;
（3）边框线合并
border-collapse : collapse ;
2.td 的CSS属性
（1）隐藏空的单元格
empty-cells : hide / show
5.表格新增内容
1.标题标签
<caption></caption>
写在table和tr之间
2.列分组标签
<colgroup span = " 数值 "></colgroup>
数值表示的含义为多少列分成一组
3.标题单元格标签
<th></th>
与td同级别
用来替换td，默认加粗和居中。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
