基本格式
<table 属性1=“属性值1” 属性2=“属性值2”……>表格内容<table>
table标记的属性
width属性
表示表格的宽度,他的属性值可以使像素(px)也可以是父级元素的百分比(%)
height属性
表示表格的高度,他的属性值可以使像素(px)也可以是父级元素的百分比(%)
border属性
表示表格外边框的的宽度
align属性
表格显示的位置
属性值
- left:居左显示
- center:居中显示
- right:居右显示
cellspacing属性
单元格之间的距离 默认是2px 单位是像素
cellpadding
单元格距离与单元格边框的显示的距离,单位像素
frame属性
控制单元格表格边框最外层的四条线框
属性值
- void:默认值,表示无边框
- above:表示仅顶部有边框
- below:表示仅底部有边框
- hsides:表示仅底部和顶部有边框
- lhs:表示仅左侧有边框
- rhs:表示仅右侧有边框
- vsides:表示仅右侧和左侧有边框
- box:包含全部四个边框
- border:包含全部四个边框
rules属性
控制是否显示单元格之间的分割线
属性值
- none:默认值,鄙视无分割线
- all:表示包括所有的分割线
- rows:表示仅有行分割线
- clos:表示仅有列分割线
- groups:表示仅在行组和列组之间有分割线
代码
<body>
<table width="960sp" height="200sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
rules="all"
>
<tr>
<th>班级</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>一年一班</td>
<td>23</td>
<td>女</td>
<td>123</td>
</tr>
<tr>
<td>一年一班</td>
<td>12</td>
<td>女</td>
<td>123</td>
</tr>
<tr>
<td>一年一班</td>
<td>13</td>
<td>男</td>
<td>123</td>
</tr>
</table>
</body>
显示结果
caption标记
什么时候使用
如果表格需要使用标题,那么就可以使用此标记
如何正确使用
<caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前。
align属性
属性值
- top:标题放在表格的上部
- bottom:标题挡在表格的下部
- left:标题放在表格的左部
- right:标题放在表格的右部
代码
<body>
<table width="960sp" height="200sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
rules="all"
>
<caption align="bottom">一年一班成员表</caption>
<tr>
<th>班级</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>一年一班</td>
<td>23</td>
<td>女</td>
<td>123</td>
</tr>
<tr>
<td>一年一班</td>
<td>12</td>
<td>女</td>
<td>123</td>
</tr>
<tr>
<td>一年一班</td>
<td>13</td>
<td>男</td>
<td>123</td>
</tr>
</table>
</body>
显示结果
tr标记
定义表格的每一行,对于每一个表格行,都是由一对<tr></tr>标记表示,每一行<tr>标记内也可以嵌套多个<td>或者<th>标记
bgcolor属性
设置背景颜色
align属性
设置垂直方向对齐方式
属性值
- bottom:靠底部对齐
- top:靠顶部对齐
- middle:居中对齐
valign属性
设置水平方向对齐方式
属性值
- left:靠左齐
- right:靠右齐
- center:居中对齐
代码
<body>
<table width="960sp" height="300sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
rules="all"
>
<caption align="bottom">一年一班成员表</caption>
<tr bgcolor="#ccc">
<th>班级</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="middle">
<td>一年一班</td>
<td>23</td>
<td>女</td>
<td>123</td>
</tr>
<tr >
<td>一年一班</td>
<td>12</td>
<td>女</td>
<td>123</td>
</tr>
<tr >
<td>一年一班</td>
<td>13</td>
<td>男</td>
<td>123</td>
</tr>
</table>
</body>
显示结果
td和th标记
两者的区别
- <th>和<td>都是单元格标记,起必须乔涛在<tr>标签内,是成对出现的
- <th>是表头标记,通畅位于首行或者首列,<th>中的文字会默认加粗,而<td>不会
- <td>是数据标记,表示该单元格的具体数据
共同之处
两者标记的属性都是一样的
属性
- bgcolor:设置单元格背景
- align:设置单元格对齐方式
- valign:设置单元格垂直对齐方式
- width:设置单元格宽度
- height:设置单元格高度
- rowspan:设置单元格所占行数
- colspan:设置单元格所占列数
参考代码
<html>
<head>
<title> 表格课</title>
<meta charset="UTF-8">
</head>
<body>
<table width="960" height="300" border="1" align="center" cellpadding="20" cellspacing="1" frame="box" rules="all">
<caption align="bottom">表格的标题</caption>
<tr bgcolor="#ccc" >
<th bgcolor="red" align="left" width="100" rowspan="2" colspan="2">班级</th>
<th>年龄</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>一班</td>
<td>16</td>
<td>离散</td>
<td>100</td>
</tr>
<tr>
<td>一班</td>
<td>16</td>
<td>离散</td>
<td>100</td>
</tr>
<tr>
<td>一班</td>
<td>16</td>
<td>离散</td>
<td>100</td>
</tr>
<tr>
<td>一班</td>
<td>16</td>
<td>离散</td>
<td>100</td>
</tr>
</table>
</body>
</html>