表格通常来组织结构化的信息,把数据储存在单元格里
2.如何构建一个表格?
<table> ---------------------------------------表格
<tr> ---------------------------------------行
<th>内容</th> --------------------单元格 (加粗)
<td>内容</td> --------------------单元格
<td>内容</td>
</tr>
</table>
横行竖列
3.表格的属性
属性名称 属性值 说明
width 数值 设置表格宽度
height 数值 设置表格高度
bgcolor 英文颜色 设置表格背景颜色
rgb ('255,255,255')
十六位进制数
background 图像地址 设置表格背景图像 (与bgcolor同时用,background的优先级较高)
border 数值 设置边框宽度
bordercolor 英文颜色 设置边框颜色
rgb ('255,255,255')
十六位进制数
cellpadding 数值 设置内边距 (单元格边框与内容之间的距离)
cellspacing 数值 设置外边距 (单元格之间的距离)
align 对齐方式 (left|center|right) 设置对齐方式
4.行属性
属性名称 属性值 说明
align 对齐方式 (left|center|right) 设置对齐方式
bgcolor 英文颜色 设置表格背景颜色
rgb ('255,255,255')
十六位进制数
valign (top|middle|bottom) 设置垂直对齐方式
5.单元格属性
属性名称 属性值 说明
align 对齐方式 (left|center|right) 设置对齐方式
bgcolor 英文颜色 设置表格背景颜色
rgb ('255,255,255')
十六位进制数
valign (top|middle|bottom) 设置垂直对齐方式
rowspan 数值 设置行合并
colspan 数值 设置列合并
6.练习
1.练习一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="1" width="500" height="200" cellspacing="0" cellpadding="0" bordercolor="red" bgcolor="pink" align="center" background="../images/1.jpg">
<tr align="left" bgcolor="pink" valign="top"><!-- valign (top|middle|bottom) -->
<!-- 在单个行内设置背景颜色时可以覆盖掉table里面设置的背景图片 -->
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
</table>
</body>
</html>
效果如下
2.练习二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<table border="2" width="700" height="500" cellspacing="0" cellpading="5" align="center" bordercolor="black">
<tr>
<th colspan="8">项目增补单</th>
<td>备注</td>
</tr>
<tr align="center">
<td>序号</td>
<td>维修项目及更换配件</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>工时费</td>
<td>合计</td>
<td>故障原因</td>
</tr>
<tr align="center">
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="4">7</td>
<td></td>
<td rowspan="4" colspan="2"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr align="center">
<td>备件费用小计:</td>
<td>工时费用小计:</td>
<td colspan="6">合计:</td>
</tr>
<tr align="center">
<td>班组长:</td>
<td>技术部:</td>
<td>服务顾问:</td>
<td colspan="5">客户确认:</td>
</tr>
</table>
</body>
</html>
效果如下