web中细线表格的制作

想要制作细线表格首先我们要知道表格的相关知识

一、表格核心标签

1、form标签：不管是表格还是表单都必须要有的

2、table:定义整个表格，所有表格内容都包裹在内

3、tr标签：行标签，代表一行，列标签包含在内

4、td标签：列表签，代表每一行中的哪一列，必须包含在行标签内

二、表格合并

1、跨列合并

用colspan,后面数字表示占几列的宽度

<tr>
    <td colspan="3">全班平均分</td>
</tr>

2、跨行合并

用rowspan,后面数字表示占几行的宽度

<tr>
    <td rowspan="3">全班平均分</td>
</tr>

三、细线表格的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>细线表格的制作</title>
		<style type="text/css">
			table{
				border: 1px solid red;
				border-collapse: collapse;
				
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<form action="">
			<table>
				<!--行-->
				<tr>
					<!--列，列要在行里面-->
					<td>姓名</td>
					<td>语文</td>
					<td>数学</td>
					<td>英语</td>
				</tr>
				<tr>
					<td>小明</td>
					<td>98</td>
					<td>99</td>
					<td>100</td>
				</tr>
				<tr>
					<td>小红</td>
					<td>99</td>
					<td>99</td>
					<td>100</td>
				</tr>
			</table>
		</form>
	</body>
</html>

cyzzs

导航

公告

web中细线表格的制作

web中细线表格的制作

一、表格核心标签

二、表格合并

三、细线表格的制作