web前端入门之html（10）
表格标签
1.table
⦁ < table>标签用于定义表格
⦁ 常用属性:
align:用于设定表格的对齐方式
bgcolor:用于设定表格的背景颜色。
background:表格的背景图片
border:用于设定表格边框的宽度（像素为单位）
bordercolor：表格边框的颜色（border>1时，起作用）
width:用于规定表格的宽度。
height：用于规定表格的高度
cellspacing：单元格之间的距离
cellpadding：单元格内容玉单元格边界之间的空白距离大小
2.tr
⦁ < tr>标签用于定义表格的行,包含一个或多个th或td元素。
⦁ < tr>常用属性:
align:用于设定表格中行的内容对齐方式。
bgcolor:用于设定表格中行的背景颜色。
valign：行内容的垂直对齐，可设置top，middle，bottom
align：行内容的水平对齐，可设置right，center，left
3.td
⦁ < td>标签用于定义表格单元
⦁ td元素中的文本一般显示为正常字体且左对齐。
⦁ < td>常用属性:
align:用于设定单元格内容的对齐方式。
bgcolor:用于设定单元格背景颜色。
height:用于设定单元格的高度。
width:用于设定单元格的宽度。
colspan:用于设定列合并
rowspan:用于设定行合并。
valign：行内容的垂直对齐，可设置top，middle，bottom
4.caption
⦁ < caption>用于定义表格标题
⦁ < caption>标签必须紧随< table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
5.th
⦁ < th>标签用于定义表格的表头，< th>内部的文本通常呈现为居中加粗文本。
⦁ Html表格中有两种类型的单元格：
⦁ 表头单元格th:包含表头信息。
⦁ 标准单元格td:包含数据。
6.thead
⦁ < thead>标签用于定义表格的页眉
⦁ < thead>标签用于组合HTML表格的表头内容。
⦁ < thead>元素应该与< tbody>和< tfoot>元素结合起来使用。
⦁ 注意:< thead>内部必须有标签。
7.tbody
⦁ < tbody>标签用于定义表格的主体
⦁ < tbody>标签用于组合HTML表格的主体内容。
8.tfoot
⦁ < tfoot>标签用于定义表格的页脚
⦁ < tfoot>标签用于组合HTML表格中的表注内容。
例1：
例1代码：
<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/sublime%E7%BB%83%E4%B9%A0/csdn%E7%BB%83%E4%B9%A0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table border="1" width="600" cellspacing="0" align="center">
<caption>成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>名次</th>
</tr>
</thead>
<tbody>
<tr align="center" valign="middle">
<td>张三</td>
<td>1234</td>
<td>2</td>
</tr>
<tr>
<td>李四</td>
<td>12345</td>
<td>1</td>
</tr>
<tr>
<td>王二</td>
<td>123456</td>
<td>4</td>
</tr>
<tr>
<td>陈六</td>
<td>1234567</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" aligin="center">我们班的成绩表</td>
<!-- colspan 代表合并列 -->
<!-- rowspan 代表行并列 -->
</tr>
</tfoot>
</table>
</body></html>例2：
例2代码：
<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/sublime%E7%BB%83%E4%B9%A0/csdn%E7%BB%83%E4%B9%A0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table border="1" width="600" cellspacing="0" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th>学生基本信息</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center" valign="middle">
<td>姓名</td>
<td>性别</td>
<td>专业</td>
<td>课程</td>
<td>分数</td>
</tr>
<tr align="center">
<td>球球</td>
<td>男</td>
<td rowspan=2 >计算机</td>
<td rowspan=3 >课程设计</td>
<td>68</td>
</tr>
<tr align="center">
<td>喃喃</td>
<td>女</td>
<td>89</td>
</tr>
<tr align="center">
<td>陈六</td>
<td>男</td>
<td>会计</td>
<td>68</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>建筑</td>
<td>建筑设计</td>
<td>91</td>
</tr>
</tbody>
<!-- colspan 代表合并列 -->
<!-- rowspan 代表行并列 -->
</table>
</body>
</html>例3：
例3代码：
<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/sublime%E7%BB%83%E4%B9%A0/csdn%E7%BB%83%E4%B9%A0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table border=1 width="300px" height=300 cellspacing=0 align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
