8.表格的说明

1.表格的基本使用

数据1	数据2	数据3
数据5	数据6	数据7	数据8

	<table> <!-- table标签定义一个表格 -->
		<tr> <!-- tr标签定义了一行 -->
			<td>数据1</td> <!--td标签表示在第1行中定义了1个单元格 -->
			<td>数据2</td>
			<td>数据3</td>
     		</tr>
     		<tr> <!-- tr标签定义了一行 -->
         			<td>数据5</td> <!--td标签表示在第1行中定义了1个单元格 -->
         			<td>数据6</td>
         			<td>数据7</td>
         			<td>数据8</td>
    		 </tr>
 	</table>

2.表格属性
border:表格及单元格边框
默认为0 没有边框
例子:

cellspacing:单元格与单元格的距离
例子:
<table border="1" cellspacing="0"></table>

cellpadding:单元格内容的内边距
例子:
<table border="1" cellspacing="0" cellpadding="5"></table>

width:表格宽度
默认根据内容自适应
例子:
<table border="1" cellspacing="0" cellpadding="5" width="800"></table>

height:表格高度
默认根据内容自适应
例子:
<table border="1" cellspacing="0" cellpadding="5" width="800" height="400"></table>

3.单元格跨列(难点)
单词:
colspan
只能左边的单元格往右边的单元格跨. 不能从右往左跨.
保证跨完以后,总的列数保持一致,多出了要删除或者注释,否则就会畸形显示.
例子:

1	1	1	1
1		1	1
1			1
1	1	1	1

<table border="1" cellpadding="15" cellspacing="0">
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td colspan="2">1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td colspan="3">1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>

4.单元格跨行(难点)
单词:
rowspan
只能上边的单元格往下边的单元格跨. 不能从下往上跨.
保证跨完以后,总的单元格数保持一致,多出了要删除或者注释,否则就会畸形显示.
例子:

1	1	1	1
1	1	1
	1	1
1	1	1	1

	<table border="1" cellpadding="15" cellspacing="0">
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td rowspan="3">1</td>
		</tr>
		<tr>
			<td rowspan=2>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>

5.表格的规范(了解)

深圳

序号	班级名称
统计时间:2017/3/1 13:34
1	01
2	02

<table>
     		<caption>深圳</caption> <!-- 定义表格的标题 -->
		<thead> <!-- 表格的头部 一般用来表示表格的头部标题-->
			<tr> <!-- 定义行 -->
				<th>序号</th> <!-- th也表示单元格,只不过这个单元格是来装表头数据的 -->
				<th>班级名称</th>
			</tr>
		</thead>
		<tfoot> <-- 定义表格的尾部 -->
			<tr>
				<td colspan="6" align="right">统计时间:2017/3/1 13:34</td>
			</tr>
		</tfoot>
		<tbody><!-- 定义表格的主体 -->
			<tr>
				<td>1</td>
				<td>01</td>
			</tr>
			<tr>
				<td>2</td>
				<td>02</td>
			</tr>
		</tbody>
	</table>

6.表格的属性总结

	border	表格与单元格边框
	cellspacing	单元格之间的距离
	cellpadding	内容与单元格之间的内边距
	width	表格的宽度
	height	表格的高度
	colspan	跨列
	rowspan	跨行
	align	对齐方式	left right	center  可以为teble,tr,td设置对齐