首页 > 代码库 > 表格和表单

表格和表单

2024-11-27 11:43:39   203人阅读

一.表格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>

　效果图：　

技术分享

表格和表单


联系
我们