表格的使用

最新推荐文章于 2022-06-30 19:00:31 发布

lwz4070

最新推荐文章于 2022-06-30 19:00:31 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/lwz4070/article/details/81193261

版权

1、表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2、表格单元格的合并 rowspan="2" 行合并 colspan="3" 列合并，我们习惯上用border来显示边框，不然看不到表格

3、thead是表格头，tbody是表格体，tfoot是表格尾

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style type="text/css">
	</style>
	<title>table标签</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>姓名</td>
			<td>性别</td>
			<td>专业</td>
			<td>学号</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>男</td>
			<td>物理</td>
			<td>4154524</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>女</td>
			<td>数学</td>
			<td>45565445</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>男</td>
			<td>法律</td>
			<td>54566878</td>
		</tr>
	</table>
	<table border="1">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>专业</th>
			<th>学号</th>
		</tr>
		<tr>
			<td>张三</td>
			<td rowspan="2">女</td>
			<td>物理</td>
			<td>4154524</td>
		</tr>
		<tr>
			<td>李四</td>
			<!-- <td>女</td> -->
			<td>数学</td>
			<td>45565445</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>男</td>
			<td>法律</td>
			<td>54566878</td>
		</tr>
	</table>
	<table border="1">
		<tr>
			<th colspan="2">理学院</th>
			<th colspan="2">机械学院</th>
			<th colspan="2">人文学院</th>
		</tr>
		<tr>
			<td>物理</td>
			<td>数学</td>
			<td>维修</td>
			<td>制造</td>
			<td>播音</td>
			<td>表演</td>
		</tr>
	</table>
	<table border="1">
		<tr>
			<th rowspan="2">学院</th>
			<td>机械学院</td>
		</tr>
		<tr>
			<td>理学院</td>
		</tr>
		<tr>
          <th rowspan="2">专业</th>
          <td>物理专业</td>
		</tr>
		<tr>
          <td>数学专业</td>
		</tr>
	</table>
</body>
</html>

效果图如下：