初学HTML用法大全指导(三)html中建立表格

最新推荐文章于 2025-03-25 20:28:07 发布

不贰过先生

最新推荐文章于 2025-03-25 20:28:07 发布

阅读量1.6k

点赞数 1

分类专栏： HTML/JS 文章标签： html table标签 table标签中属性的使用

本文链接：https://blog.youkuaiyun.com/u013132035/article/details/54142618

版权

HTML/JS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何使用HTML创建表格，包括基本语法、行与列的合并技巧及常见属性的应用，如对齐方式、背景颜色和边距等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇博客我们讲了web页面中html脚本语言对图片的设置，这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格，其次我会聊一聊对表格的行合并与列合并，然后再聊一聊在建立表格的标签中一些常见属性的使用。

1：在web页面中创建表格首先要用到<table>标签，去告诉浏览器等解析器这是一个table标签。<tr>标签显示行数；<td>标签显示列数。其中table标签中的属性border是设置整个表格的边框值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<Center>
<table border="1">
<tr>
	<td>
		A-one
	</td>
	<td>
		A-two
	</td>
	<td>
		C-Three
	</td>
</tr>
<tr>
	<td>
		B-one
	</td>
	<td>
		B-two
	</td>
	<td>
		B-Three
	</td>
</tr>
</table>
</Center>
</body>
</html>

2：用rowspan属性合并上下单元格；用colspan属性合并左右单元格。但是在合并时注意要把合并的行或者列去除掉。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并左右单元格、合并上下单元格</title>
</head>
<body>
<table border="1">
	<tr>
		<td colspan="2">合并左右单元格</td>
		
		<td>A-3</td>
	</tr>
	<tr>
		<td rowspan="2">合并上下单元格</td>
		<td>B-2</td>
		<td>B-3</td>
	</tr>
	<tr>
		
		<td>C-2</td>
		<td>C-3</td>
	</tr>
</table>
</body>
</html>

3：其他一些常用到的属性：比如align属性设置对其方式；bgcolor属性设置表格的背景颜色和边框的颜色；cellpadding与cellspacing属性设定边距。其中cellpadding属性设置表格单元格里面的内容距离格线的距离；cellspacing属性设定表格相邻单元格边线之间的距离；align属性设置对齐方式；height设置表格高；width设置表格的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格中常用属性的使用</title>
</head>
<body>
	<table border="1" align="center" height="400" width="400" cellspacing="40px" cellpadding="50px;">
		<tr>
			<th colspan="2" align="center" bgcolor="gray">A-1</th>
			
			<th align="right" bgcolor="yellow">A-3</th>
		</tr>
		<tr bgcolor="gray">
			<td rowspan="2" bgcolor="red">BBB-1111</td>
			<td colspan="2">BBB-2222</td>
		</tr>
		<tr>
		
			<td colspan="2" align="left">C-2</td>
			
		</tr>
	
	</table>
</body>
</html>