HTML--复习表格table

最新推荐文章于 2024-05-08 16:50:23 发布

lkfmiaomiao

最新推荐文章于 2024-05-08 16:50:23 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100569550

版权

HTML–复习表格table
实现一个7*4的表格：
代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<table width="280px" bgcolor="pink" border="5" bordercolor= "#eeeeee" align:"center" cellspacing="0" cellpadding="10">
			<tr  align="center">
				<th colspan="4">商品类目</th>
			</tr>
			<tr align="center">
				<td rowspan="3">合并</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr align="center">
				
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr align="center">
				
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
			<tr align="center">
				<td rowspan="3">合并</td>
				<td>4</td>
				<td>4</td>
				<td>4</td>
			</tr>
			<tr align="center">
				
				<td>5</td>
				<td>5</td>
				<td>5</td>
			</tr>
			<tr align="center">
				
				<td>6</td>
				<td>6</td>
				<td>6</td>
			</tr>
		</table>
	</body>
</html>

效果图如下所示：
在这里插入图片描述
注意：
border:设置表格的边框大小
bordercolor:设置表格边框颜色
cellspacing:设置单元格和单元格的距离
cellpadding:设置单元格和内容之间的距离
width/height:设置表格的宽度/高度
align:设置表格的对齐方式,写在tr或td上是设置文字对齐方式
bgcolor:设置背景颜色
colspan:列合并（写在td或th上）
rowspan:行合并（写在td或th上）
合并时需要把不使用的行/列的删除

lkfmiaomiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--复习表格table

HTML–复习表格table实现一个7*4的表格：代码如下所示：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="280px...
复制链接

扫一扫