目录
一、table标签
table标签是表格布局标签,可以通过表格之间的嵌套合并实现多需要表格
其主要包括的标签为
<table>-----表格标签 | <tr>-----行标签 |
<th>--------表头标签 | <td>-----列标签 |
<thead>-----定义表头 | <tbody>---主体内容 |
<tfoot>-----表格中的表注(页脚) |
其主要形式为:
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table>
<thead>
<tr>
<td>this text is in the thead</td>
</tr>
</thead>
<tbody>
<tr>
<td>this text is in the tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>this text is in the tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>
1.2table标签的相关属性
border--------用于设置表格边框的大小 |
height\width----用于设置表格的长宽,通过改变<tr><td>,其单位为px和% |
align----设置表格的对齐方式left center right |
bgcolor-----表示的是表格的背景颜色 |
background ---- 表示背景图像 |
cellpadding ----- 表示表格边距(单元格内元素距离单元格边缘的距离) |
cellspacing ----- 表示表格间距(单元格与单元格之间的距离) |
举一个简单的例子:
<!DOCTYPE html>
<html>
<head>
<title>练习1</title>
</head>
<body>
<table width="300" border="1">
<tr height="40" bgcolor="#cccccc">
<!-- 表格的高度 由行和列给出高度的最大值决定 -->
<td height="30">姓名</td>
<td height="30">班级</td>
<td height="30">学号</td>
</tr>
<tr height="30" bgcolor="#cccccc">
<td>张三</td>
<td>xx3班</td>
<td>12</td>
</tr>
</body>
</html>
其结果如下:
1.3表格的合并
rowspan="n"------合并的是行 n表示行数
colspan="n"------- 合并的是列
简单练习一下:
<!DOCTYPE html>
<html>
<head>
<title>单元格跨行</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td rowspan="3">简介</td>
<td colspan="2" align="center">xxx班的成绩</td>
</tr>
<tr>
<td>笔试</td>
<td>面试</td>
</tr>
<tr>
<td>90</td>
<td>90</td>
</tr>
</table>
</body>
</html>
运行结果: