html的表格使用

朝去夜来

已于 2022-03-10 08:57:25 修改

阅读量773

点赞数 1

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

于 2021-07-11 18:38:36 首次发布

本文链接：https://blog.csdn.net/wenqi1/article/details/118657739

版权

html 专栏收录该内容

18 篇文章 16 订阅

订阅专栏

table表示表格，align="center"表示居中，width表示宽度，height表示高度

tr表示有几列，td表示有几行

caption表示整个表格的标题

th表示表格的小标题，自动加粗

border="1"表示表格的线框，是双线，使用这个时，table和tr里不用设置颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="300px" height="100px" align="center">
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>
	</body>
</html>

cellpadding="1"表示细线，这个要搭配bgcolor一起使用，不然线出不来


		<table cellpadding="1" width="300px" height="100px" align="center" bgcolor="black">
			<tr align="center" bgcolor="white">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center" bgcolor="white">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center" bgcolor="white">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>

colspan="2"表示对列进行合并，2表示合并2列，用在td处

rowspan="2"表示对行进行合并，2表示合并2列，用在td处

当合并行或列时，被合并的应该注释掉

合并列：

        <table border="1" width="300px" height="100px" align="center">
			<tr align="center">
				<td rowspan="2">1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<!--td>1.1</td-->
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>

合并列：

		<table border="1" width="300px" height="100px" align="center">
			<tr align="center">
				<td colspan="2">1.1</td>
				<!--td>1.2</td-->
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>

给表格设置标题和小标题

        <table border="1" width="300px" height="100px" align="center">
			<caption>html的表格使用</caption>
			<th bgcolor="gray">1</th>
			<th bgcolor="gray">2</th>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr align="center">
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>