前端学习笔记(HTML)——表格

最新推荐文章于 2024-12-25 19:39:56 发布

大佬橙1215

最新推荐文章于 2024-12-25 19:39:56 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43676025/article/details/88374959

前端专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了HTML中表格的结构与各种属性的使用，包括基本的tr、th、td元素，以及如何通过border、bgcolor等属性美化表格，展示了高考成绩单的实例。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<table>
		<caption>我是一张表格</caption>
		<!-- capiton 标题 
			 tr 行
			 th 表头
			 td 内容
		-->
		<tr>
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
		</tr>

		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>

		<tr>
			<td>内容1</td>
			<td>内容2</td>
			<td>内容3</td>
		</tr>
	</table>
	<hr>

	<!-- 高考成绩单 -->
	<table align="center" width="500px" height="750px" border="1" bordercolor="red" bgcolor="magenta" cellspacing="0" cellpadding="5" background="./img/周立波.jpg" >
	<!-- 
	border:是否有边框
	bordercolor：边距颜色
	bgcolor：表格内颜色
	cellspacing：外边距
	cellpadding：内边距
	background：背景
	 -->
		<caption>高考成绩单</caption>
		<tr align="center">
			<th>姓名</th>
			<th>语文</th>
			<th>数学</th>
			<th>外语</th>
			<th>综合</th>
		</tr>

		<tr align="center">
			<td>马云</td>
			<td>100</td>
			<td>50</td>
			<td>150</td>
			<td>100</td>
		</tr>

		<tr align="center">
			<td>雷军</td>
			<td>100</td>
			<td>120</td>
			<td>90</td>
			<td>200</td>
		</tr>

		<tr align="center">
			<td>围城</td>
			<td>100</td>
			<td>10</td>
			<td>11</td>
			<td>20</td>
		</tr>
	</table>
</body>
</html>