表格
1.表格的创建
2.表格的相关属性
宽度 | width |
高度 | height |
边框 | border |
边框颜色 | bordercolor |
背景颜色 | bgcolor |
文字水平对齐 | align="left"或"right"或"center" |
文字垂直对齐 | valign="top"或"middle"或"bottom" |
单元格与单元格之间的间距 | cellspacing="单元格与单元格之间的间距",给table添加此属性 |
单元格与内容之间的间距 | cellpadding="单元格与内容之间的间距",给table添加此属性 |
合并单元格的列 | colspan="所要合并的单元格的列数",合并列必须给td |
合并单元格的行 | rowspan="所要合并的单元格的行数",合并行必须给td |
3.表格相关的CSS属性
表格相关的CSS属性 | |||
个数 | 用法 | 意义 | 说明 |
1 | border-spacing:20px; | 单元格间距 | 单元格间距(该属性必须给table添加) 表示单元格边框之间的距离, 不可取负值 |
2 | border-collapse:separate/collapse; | 合并相邻单元格边框 | 合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值; collapse(边框合并) |
3 | empty-cells:show/hide; | 无内容时单元格的设置 | 定义当单元格无内容时,是否显示该单元格的边框区域;show:显示 ;hide:隐藏; |
4 | table-layout:auto/fixed; | 是否固定单元格的宽度 | fixed:固定宽,没有定义时则宽度会平均分配,高度则会随内容变化 |
5 | caption-side:top/right/bottom/left | 表格标题位置 | left,right位置只有火狐识别,top,bottom IE7上版本支持,ie7以下版本不支持其它属性值,只识别top |
4.表格相关的HTML标签和属性
表格相关的HTML标签和属性 | |||
个数 | 用法 | 意义 | 说明 |
1 | 表格标题 | <caption>标题内容</caption> | |
2 | 表格列分组 |
A.
<colgroup span="
数字
"></colgroup>
B.
<col span="
数字
" />
C.
如果用
rules
添加组分割线的话,列分组必须用
colgroup
|
A.
col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
B.
span属性显示指定相邻几列组成一组,span属性值默认为1
|
3 | 表格行分组 |
A.
<
thead
></
thead
>
表头
B.
<
tbody
></
tbody
>
表体
C.
<
tfoot
></
tfoot
>
表尾
| |
4 | 添加组分隔线 | rules="groups/rows/cols/all/none" | 必须给table标签添加属性 |
5 表格的应用,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<table border="1px" align="center" cellspacing="0" width="800px">
<tr>
<td colspan="7" align="center">个人简历</td>
</tr>
<tr align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
代码运行后效果图如下:
表格的三部分,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的三部分</title>
<style>
thead{
background: red;
}
tfoot{
background: green;
}
table,th,td{
border: 1px solid yellowgreen;
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="400px" cellspacing="0">
<!--
head body footer
-->
<thead>
<tr>
<th>我是标题</th>
<th>我是标题</th>
<th>我是标题</th>
<th>我是标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
</tr>
<tr>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
</tr>
<tr>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
<td>我是tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>我是tfoot</td>
<td>我是tfoot</td>
<td>我是tfoot</td>
<td>我是tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图如下:
表格制作的应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格制作</title>
<style>
.no{
border-left: none;
}
.no2{
border-right: none;
}
.money{
white-space: pre;
}
</style>
</head>
<body>
<table border="1px" width="900px" height="288px" cellspacing="0" align="center">
<tr align="center">
<td colspan="2">姓名</td>
<!-- <td></td> -->
<td></td>
<td>职务</td>
<td colspan="2" width="50px"></td>
<!-- <td></td> -->
<td colspan="2" width="60px">出差事由</td>
<td colspan="4"></td>
</tr>
<tr align="center">
<td width="30px">起日</td>
<td>止日</td>
<td>起迄地点</td>
<td>项目</td>
<td width="30px">张数</td>
<td colspan="3" width="90px">金额</td>
<td>项目</td>
<td>天数</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td width="30px"></td>
<td width="30px"></td>
<td width="60px"></td>
<td width="60px">火车费</td>
<td width="30px"></td>
<td width="30px" class="no2"></td>
<td width="30px" class="no"></td>
<td width="30px"></td>
<td width="60px">途中补助</td>
<td width="30px"></td>
<td width="60px"></td>
<td width="30px"></td>
</tr>
<tr align="center">
<td width="30px"></td>
<td width="30px"></td>
<td width="60px"></td>
<td width="60px">汽车费</td>
<td width="30px"></td>
<td width="30px" class="no2"></td>
<td width="30px" class="no"></td>
<td width="30px"></td>
<td width="60px">住勤补助</td>
<td width="30px"></td>
<td width="60px"></td>
<td width="30px"></td>
</tr>
<tr align="center">
<td width="30px"></td>
<td width="30px"></td>
<td width="60px"></td>
<td width="60px">市内交通费</td>
<td width="30px"></td>
<td width="30px" class="no2"></td>
<td width="30px" class="no"></td>
<td width="30px"></td>
<td width="60px">夜间乘车</td>
<td width="30px"></td>
<td width="60px"></td>
<td width="30px"></td>
</tr>
<tr align="center">
<td width="30px"></td>
<td width="30px"></td>
<td width="60px"></td>
<td width="60px">住宿费</td>
<td width="30px"></td>
<td width="30px" class="no2"></td>
<td width="30px" class="no"></td>
<td width="30px"></td>
<td width="60px">其他</td>
<td width="30px"></td>
<td width="60px"></td>
<td width="30px"></td>
</tr>
<tr align="center">
<td width="30px"></td>
<td width="30px"></td>
<td width="60px"></td>
<td width="60px">邮电费</td>
<td width="30px"></td>
<td width="30px" class="no2"></td>
<td width="30px" class="no"></td>
<td width="30px"></td>
<td width="60px">途中补助</td>
<td width="30px"></td>
<td width="60px"></td>
<td width="30px"></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td colspan="2">小计</td>
<td colspan="2"></td>
<td></td>
<td colspan="2">小计</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">合计</td>
<td colspan="9" class="money">(大写) 仟 佰 拾 元 角 分 ¥:</td>
</tr>
</table>
</body>
</html>