爬虫配套学习-前端学习笔记04-表格

丰。。

于 2021-10-15 15:17:59 发布

阅读量1k

点赞数 3

分类专栏：爬虫学习笔记计算机网络原理文章标签： html 爬虫前端

本文链接：https://blog.csdn.net/CSDNXXCQ/article/details/120783863

版权

爬虫学习笔记同时被 2 个专栏收录

66 篇文章 3 订阅

订阅专栏

计算机网络原理

57 篇文章 1 订阅

订阅专栏

这篇博客介绍了HTML表格的基本构成，包括标题、背景图像、水平对齐方式和表主体的设置。通过示例展示了如何使用``、``、`

`等元素创建表格，并通过`border`、`width`、`cellpadding`、`cellspacing`、`background`等属性来调整表格的外观和布局。此外，还展示了如何改变单元格的背景颜色以及设置表格内容的对齐方式。摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格的基本构成-网页名</title>
</head>
<body>
<table border="1">
	<tr>
		<td>第一行_第一列单元格</td>
		<td>第一行_第二列单元格</td>
	</tr>
	<tr>
		<td>第二行_第一列单元格</td>
		<td>第二行_第二列单元格</td>
	</tr>
</table>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格的标题-网页名</title>
</head>
<body>
<table width="171" border="1">
	<caption>考试成绩表_表格标题</caption>
	<tr>
		<td width="44">张三那一行</td>
		<td width="35">95</td>
		<td width="36">76</td>
		<td width="28">80</td>
	</tr>
	<tr>
		<td>李四那一行</td>
		<td>88</td>
		<td>89</td>
		<td>85</td>
	</tr>
	<tr>
	    <td>三毛那一行</td>
	    <td>80</td>
	    <td>89</td>
	    <td>90</td>
	</tr>
	<td>三毛A那一行</td>
	<td width="350">95</td>
	<!-- 其中一个的大小更改了其他也会跟着变化 -->
	<td width="36">76</td>
	<td width="28">80</td>
	<tr>
	</tr>
</table>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格背景图像-网页名</title>
</head>
<body>
	<!-- 设置表格参数 border为边框的透明度 单元格边距-->
	<table width="500" height="140" border="1"
	
	cellpadding="100" cellspacing="5"
	bordercolor="#66CCFF" bgcolor="#FFCCFF"
	background="images/2.jpg">
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
		</tr>
		<tr>
			<td>单元格3</td>
			<td>单元格5</td>
		</tr>
	</table>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>水平对齐方式-网页名</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="10">
	<tbody>
		<tr align="left">
			<td>全自动A</td>
		</tr>
		<tr align="center">
			<td>A</td>
		</tr>
		<tr align="right">
			<td>使用</td>
		</tr>
	</tbody>
</table>
</body>
</html>

效果
在这里插入图片描述
改背景颜色

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表主体-网页名</title>
</head>

<body>
<!-- 表格参数的设置 -->
<table width="400" border="1" align="center" cellpadding="5" cellspacing="2">

	<caption>某购物_表格名</caption>
	<thead bgcolor="#FF33FF" align="center">
		<tr>
			<td>名称</td>
			<td>类型</td>
			<td>价格</td>
		</tr>
	</thead>
	<tbody bgcolpr="#CC99FF" align="left">
		<tr>
			<td>毛巾</td>
			<td>毛巾</td>
			<td>45</td>
		</tr>
	</tbody>
</table>
</body>
</html>

效果
在这里插入图片描述

丰。。

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
爬虫配套学习-前端学习笔记04-表格

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格的基本构成-网页名</title></head><body><table border="1"> <tr> <td>第一行_第一列单元格</td> <td>第一行_第二列单元格</td> </
复制链接

扫一扫