HTML表格

最新推荐文章于 2022-01-25 11:19:12 发布

原创最新推荐文章于 2022-01-25 11:19:12 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML表格的各种属性及其用法，包括单元格合并、快速输入技巧等，并通过实例展示了如何利用这些属性来构建复杂的表格布局。

表格属性

<table>...</table>  表格
<tr>...</tr>  表示一行
<td>...</td>  单元格
<th>...</th>  文字加粗并居中（与td一样是单元格）
<col>     表示一列（单标签）
<colgroup span="6" width="100px">   将前六列设置为一组，宽度均为100像素
<colgroup span="1" width="200px">   将一列设置为一组，宽度均为200像素

width=""  宽度 在col中设置
height="" 高度 在tr中设置

border = "1px"   表格的边框属性
cellspacing="0"   单元格之间的空隙
cellpadding="10"   代表单元格边框到内容之间的距离（留白）
//但一般使用align来控制文字位置

align="center"  对齐方式

表格的快速输入
输入完table和tbody标签后
输入tr4>td3 按Tab键
即可生成一个四行三列的表格

样例1

		<table border="1" cellspacing="0" cellpadding="" >
			<col width="60px" />
			<col width="60px" />
			<tr align="center">
				<td>1</td>
				<td>2</td>
			</tr>
			<tr align="center">
				<td>A</td>
				<td>B</td>
			</tr>
		</table>

单元格合并
1.横向合并

删除多余单元格
<td colspan="7"></td>

2.纵向合并

删除多余单元格
<td rowspan="4"></td>

样例2

	<body>
		<table border="1px" cellspacing="0" cellpadding="" align="center">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="200px">
			//前七行可以合并表示为
			//<colgroup span="6" width="100px">                                                                                                
			<tr height="40px" align="center">
				<td colspan="7">个人简历</td>
				
			</tr>
			<tr height="40px" align="center">
				<td>性名</td>
				<td>Data</td>
				<td>性别</td>
				<td>Data</td>
				<td>年龄</td>
				<td>Data</td>
				<td rowspan="4">照片</td>
			</tr>
			<tr height="40px" align="center">
				<td>学历</td>
				<td>Data</td>
				<td>籍贯</td>
				<td colspan="3"></td>

			</tr>
			<tr height="40px" align="center">
				<td>电话</td>
				<td>Data</td>
				<td>政治面貌</td>
				<td colspan="3"></td>

			</tr>
			<tr height="40px" align="center">
				<td>毕业院校</td>
				<td colspan="5"></td>

			</tr>
			<tr height="40px" align="center">
				<td>求职意向</td>
				<td colspan="6"></td>

			</tr>
		</table>

补充

		<table>
			<thead>
				表格的页眉
			</thead>
			<tbody>
				表格的主体
				<tr>
					<td>Data</td>
				</tr>
			</tbody>
			<tfoot>
				表格的页脚
			</tfoot>  
		</table>