列表和表格

可劲旋代码

已于 2022-08-01 10:48:06 修改

阅读量74

点赞数 1

文章标签：前端 html javascript

于 2022-07-29 11:06:37 首次发布

本文链接：https://blog.csdn.net/jiao18237330105/article/details/125739829

版权

本文介绍了HTML表格的基本结构和属性，包括边框、间距、填充、宽度、高度、背景颜色和对齐方式等。通过实例展示了如何创建和定制表格，以及单元格的合并和对齐。同时，还探讨了表格的规则属性，如rows、cols和none的使用。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- table
		    border:边框粗细
			cellspacing：代表格与格之间的间距
			cellpadding：代表内容距离格子四条边的距离
			width/height：宽高
			bgcolor:背景颜色
			bordercolor:边框颜色
			align:相对于浏览器的居中方式
			left/center/right
			-->
	<!--

		rules:
		   rows:只显示格的上下边
		   cols:只显示格的左右边
		   none:格的四条边都不显示
		   all:只显示格的四条边
		  -->
	<!--tr行td列
		 align:center/left/right，内容的对其方式
		 bgcolor:行的背景颜色
		 -->
	<!-- bordercolor=""颜色        "#579afe"蓝色    "#ffc0c8">粉红色
colspan=""合并单元格
align="center"居中
width="" height="" 宽高
rules="all"去掉单元格的最外层线
rules="rows"去掉单元格的最里层线
border="0" 去掉边框线 -->
	<body>
		<table border="1" cellspacing="0" bordercolor="green" alight="center" cellspacing="2" width="300" height="300"
			bgcolor="lightblue">
			<tr align="center">
				<td>11</td>
				<td align="left">22</td>
				<td>33</td>
			</tr>
			<tr bgcolor="yellow">
				<td>44</td>
				<td bgcolor="red">55</td>
				<td>66</td>
			</tr>
			<tr>
				<td>77</td>
				<td>88</td>
				<td>99</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		rules:
		   rows:只显示格的上下边
		   cols:只显示格的左右边
		   none:格的四条边都不显示
		   all:只显示格的四条边
		  -->
		<table border="1" width="200" rules="none" cellspacing="0" cellpadding="0">
			<tr>
				<th>语文</th>
				<th>数学</th>
			</tr>
			<tr align="center">
				<td>20</td>
				<td>30</td>
			</tr>
		</table>
	</body>
</html>