012-HTML-表格

最新推荐文章于 2024-09-24 20:46:50 发布

天又热了

最新推荐文章于 2024-09-24 20:46:50 发布

阅读量385

点赞数

分类专栏： HTML 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122873441

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--
	HTML表格
	在线实例
		表格
		这个例子演示了如何在HTML文档中创建表格
	HTML表格
		表格是由<table>标签来定义,每个表格均有若干行(由tr标签定义),
		每个行被分为若干个单元格(由<td>标签定义).字母td指表格数据(table area)
		即数据单元格的内容.数据单元格包含文本,图片,列表,段落,表单,水平线,表格等
	表格实例
		<table border="1">
			<<tr>
				<td>row1 cell1</td>
				<td>row1 cell2</td>
			</tr>
			<<tr>
				<td>row2 cell1</td>
				<td>row2 cell2</td>
			</tr>
		</table>
	HTML表格和边框属性
		如果不定义边框属性,表格就不显示边框,有时这很有用,
		但大多数时候我们希望显示边框.使用边框属性显示一个带边框的表格
		<table border="1">
			<<tr>
				<td>row1 cell1</td>
				<td>row1 cell2</td>
			</tr>
		</table>
	HTML表格表头
		表格的表头使用<th>标签来定义
		大多数浏览器会把表头显示为粗体居中的文本
		实例:
		<table border="1">
			<<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<<tr>
				<td>row1 cell1</td>
				<td>row1 cell2</td>
			</tr>
			<<tr>
				<td>row2 cell1</td>
				<td>row2 cell2</td>
			</tr>
		</table>
	HTML表格标签
		<table>-定义表格
		<th>-定义表格的表头
		<tr>-定义表格的行
		<td>-定义表格单元
		<caption>-定义表格标题
		<colgroup>-定义表格列的组
		<col>定义用于表格的页眉
		<thead>-定义表格的页眉
		<tbody>-定义表格的主题
		<tfoot>-定义表格的页脚
	-->
	<body>
		<p>
			每个表格从一个table标签开始.
			每个表格行从tr标签开始.
			每个表格的数据从td标签开始.
		</p>
		<h4>一列:</h4>
		<table border="1">
			<tr>
				<td>100</td>
			</tr>
		</table>
		<h4>一行三列</h4>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
		</table>
		<h4>两行三列</h4>
		<table border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
		<table border="1">
			<<tr>
				<td>row1 cell1</td>
				<td>row1 cell2</td>
			</tr>
			<<tr>
				<td>row2 cell1</td>
				<td>row2 cell2</td>
			</tr>
		</table>
		<table border="1">
			<<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<<tr>
				<td>row1 cell1</td>
				<td>row1 cell2</td>
			</tr>
			<<tr>
				<td>row2 cell1</td>
				<td>row2 cell2</td>
			</tr>
		</table>
	</body>
</html>