表格和表单

时间：2017-08-13 23:59:25 阅读：369 评论：0 收藏：0 [点我收藏+]

一.表格table

表格用table表示，表格中的每一行用tr表示，表格中的每一列用td表示；

th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。

	<table>
			<tr>
				<td>标题一</td>
				<td>标题二</td>
				<td>标题三</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
		</table>

效果图：

技术分享

【table的常用属性】

1.border:给表格加边框，默认给所有的td加边框，并且给整个table加外边框，当增大border的值时，td的边框不变化，只有最外层大边框变宽。

        <table border="10px">
            <tr>
                <td>标题一</td>
                <td>标题二</td>
                <td>标题三</td>
            </tr>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>

效果图：

技术分享

2.cellspacing：单元格与单元格之间的距离。cellspacing="0"表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。

如果想实现边框的完全合并，需要使用CSS实现。

[注意] ：表格边框合并的CSS写法：style="border-collapse: collapse;"

【这条CSS与cellspacing="0"的区别？】

cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然是两条线；

border-collapse: collapse;是将表格相邻的两条边框合并处理，只有一条线存在。

（一旦边框合并，cellspacing属性将会失效。）

3.cellpadding：单元格中的文字与单元格边框之间的距离

4.height：表格的高度

width：表格的宽度

表格设置宽高的两种方式：

①使用表格宽高属性设置大小<table height="400" width="500"></table>

②使用CSS样式设置大小：<table style="height:400px;width:500px"></table>

5.align属性：设置表格在浏览器中的位置。不建议使用。

可选值：left表格居左/center居中/right居右

6.bgcolor:背景色（给表格添加背景色）

示例：

<table bgcolor="red">显示为整个表格为红色背景

7.bordercolor:边框颜色（此属性是给表格的边框添加颜色，而不是给整个表格，需要注意！）

示例：<table bordercolor="red">

8.background:背景图background="qq.jpg" [注意]背景色和背景图同时存在时，背景图会覆盖背景颜色

示例：<table background="qq.jpg">

【tr与td常用属性】

1.width:单元格宽度

height:单元格的高度

2.bgcolour：单元格的颜色

3.align:设置单元格中的文字，水平对齐方式。可选值：left.center.right

4.valign:设置单元格中的文字，垂直对齐方式。可选值：top.middle.bottom

5.nowrap="nowrap"当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大！！！

【表格的跨行与跨列】

1.跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。

2.跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。

【表格的结构化】

完整的表格结构，包括：

caption：表格的标题，无论<caption></caption>标签放在表格的第几行，表格标题永远在表格正上方局中。

thead：表格的表头部分。永远在表格的最上部。

tbody：表格的身体部分。在thead之下，tfoot之上。

tfoot：表格的尾部。永远在表格的最下部。

<table>
			
			<caption>表格的标题</caption>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王二麻子</td>
					<td>不明</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>合计</td>
					<td colspan="2">3</td>
				</tr>
			</tfoot>
		</table>

　效果图：　

技术分享