前端速成：双月Java之旅（week1）_day4

最新推荐文章于 2024-09-12 18:22:06 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量82

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125705379

版权

本文介绍了如何在HTML中使用<table>标签创建表格，包括设置border、width、height、bgcolor属性，对齐方式，以及行/列合并和嵌套表格的方法。通过实例展示了如何使用colspan和rowspan实现单元格合并。

摘要由CSDN通过智能技术生成

第四天的学习内容是使用表格，如上图就是使用表格的一种表现形式。使用<table>标签可以创建表格，表格具有较多的属性。<tr>标签是行标签，用于在一个表格中新建一行；<td>是列标签，同样的可以新建一列。<table>标签常用的属性有border，这个属性可以修改表格的边框，还有width和height分别对应表格的宽度和高度，bgcolor属性可以修改表格的背景颜色，这个属性也可以单独对应具体的表格来修改颜色；align属性是表格的对齐方式，可以用center、left、right修饰，同样的，align不仅可以控制整个表格在网站页面中的位置，还可以调整表格内容在表格内的相对位置。然后是表格的合并，colspan是跨列合并，可以将不同列的内容合并到同一列的单元格，rowspan是跨行合并，可以将不同行的内容合并到同一行的单元格，但不论是跨行合并还是跨列合并，都需要删除对应需要合并的表格内容。最后是表格的嵌套，即在表格的某个单元格或者合并后的单元格内使用<table>标签插入一个新表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>序列</title>
	</head>
	<body>
		<h1>热门商品</h1>
		<table border="1" width="100%" height="550px">
			<tr>
				<td rowspan="2" align="center">商品1</td>
				<td colspan="3" align="center">商品2</td>
				
				<td align="center">商品3</td>
				<td align="center">商品4</td>
				<td align="center">商品5</td>
			</tr>
			<tr>
			
				<td align="center">商品6</td>
				<td align="center">商品7</td>
				<td align="center">商品8</td>
				<td align="center">商品9</td>
				<td align="center">商品10</td>
				<td align="center">商品11</td>
			</tr>
		</table>
	</body>
</html>