HTML表格

颜尚德

已于 2024-07-11 17:29:44 修改

阅读量133

点赞数 1

分类专栏：前端文章标签： html 前端

于 2024-03-16 14:45:00 首次发布

本文链接：https://blog.csdn.net/2302_77527700/article/details/136576987

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细介绍了HTML中创建表格的方法，包括使用标签、定义边框、宽度以及单元格（th和td）的使用。同时展示了合并单元格（colspan和rowspan）以简化表格布局的技术。摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			table--表格标签
				border表格边框宽度
				width表格内容宽度
			tr--表格行
			th--单元格
			td--普通的单元格
				表格中的内容智=只能放在单元格
		 -->
		<table border="1" width="400" cellspacing=0"">
			<tr bgcolor="red">
				<th>姓名</th>	
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
				<td>张三</td>
				<td>90</td>
				<td>80</td>
				<td>85</td>
			<tr>
				<td>李四</td>
				<td>80</td>
				<td>83</td>
				<td>81</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>99</td>
				<td>70</td>
				<td>86</td>
			</tr>
		</table>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			写表格简便写法
				table*>tr*行数>td*列数
			
			合并单元格	
			colspan="4"跨多列合并 从哪个合并,就在哪个单元格中添加colspan="4",删除多余单元格
			rowspan="4"跨多行合并 从哪个合并,就在哪个单元格中添加rowspan="4",删除多余单元格
		 -->
		<table border="1" width="400" height="300">
			<tr>
				<td colspan="3"></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>