HTML中的table表格

根正发浓的hy

于 2022-11-28 22:51:36 发布

186

分类专栏：精炼前端三件套文章标签： html 前端

本文链接：https://blog.csdn.net/small_by/article/details/128088377

版权

精炼前端三件套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表格标签

分为行（tr）和列（td），行及列都可以进行合并操作
           table:定义表格
           tr:定义行
           td:定义列   //先有行，后有列
           th:多用于表头，定义表格中头部（加粗）
           border: 边框大小
           bordercolor:边框的颜色
           cellpadding：内容文本与单元格之间距离
           cellspacing：单元格与单元格之间距离

示例：

<body>
	<h1 align="center">员工表</h1>
	<hr width="90px" color="red" />
	<table border="1px" 
            align="center" 
            bordercolor="blue" 
            cellpadding="20px" 
            cellspacing="0px">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>工作</th>
			<th>薪资</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>jack</td>
			<td>男</td>
			<td>后端开发</td>
			<td>8000</td>
			<td><a href="#">查询个人信息，这是个链接</a></td>
		</tr>
		<tr>
			<td>rose</td>
			<td>女</td>
			<td>前端开发</td>
			<td>7000</td>
			<td><a href="#">删除</a></td>
		</tr>
		<tr>
			<td>yiyan</td>
			<td>女</td>
			<td>小秘</td>
			<td>10000</td>
			<td><a href="#">删除</a></td>
		</tr>
	</table>
</body>

跨行跨列

rowspan跨行

原表格

<body>
	<h1 align="center"></h1>
	<hr width="90px" color="red" />
	<table border="1px" cellspacing="0px" 
            cellpadding="20px" align="center" 
            width="700px">
			<tr>
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-6666</td>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-8888</td>
			</tr>
		</table>
</body>

实现跨行

<!-- 实现跨行 -->
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" align="center"
                width="700px">
			<tr align="center">
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr align="center">
				<!-- 跨行 -->
				<td rowspan="2">jack</td>
				<td>0371-6666</td>
			</tr>
			<tr align="center">
				<td>0371-8888</td>
			</tr>
		</table>

colspan跨列

原表格

<!-- 原始table表 -->
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" align="center" 
                width="600px">
			<tr>
				<td>姓名</td>
				<td>联系方式</td>
				<td>联系方式</td>
			</tr>
			<tr>
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>

实现跨列

<!-- colspan 实现跨列 -->	
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" 
                align="center" 
                width="600px">
			<tr align="center">
				<td>姓名</td>
				<!-- colspan 实现跨列 -->
				<td colspan="2">联系方式</td>
			</tr>
			<tr align="center">
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>