HTML 表格标签使用实例

于 2022-05-27 10:45:00 发布
阅读量261 收藏 5
点赞数 2
分类专栏： html 文章标签： html elementui webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629592/article/details/124935215
版权

下面是稍微复杂一些的表格标签使用示例:

  • 1.使用表格便签创建一个个人简历表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人简历</title>
	</head>
	<body>
		<h3 align="center">个人简历</h3>
		<table border="1" cellspacing="0" align="center" width="500" height="650">
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">姓名</td>
				<td></td>
				<td width="80" bgcolor="lightblue" align="center">性别</td>
				<td></td>
				<td rowspan="5" width="120" align="center">照片</td>
			</tr>
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">出生年月</td>
				<td></td>
				<td bgcolor="lightblue" align="center">籍贯</td>
				<td></td>
			</tr>
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">政治面貌</td>
				<td></td>
				<td bgcolor="lightblue" align="center">名族</td>
			</tr>
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">健康状况</td>
				<td></td>
				<td bgcolor="lightblue" align="center">婚姻状况</td>
				<td></td>
			</tr>
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">联系电话</td>
				<td></td>
				<td bgcolor="lightblue" align="center">电子邮件</td>
				<td></td>
			</tr>
			<tr>
				<td width="80" height="35" bgcolor="lightblue" align="center">求职意向</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td height="220" bgcolor="lightblue" align="center">工作经历</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="lightblue" align="center">教育经历</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="lightblue" align="center">英语水平</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="lightblue" align="center">计算机水平</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="lightblue" align="center">自我评价</td>
				<td colspan="4"></td>
			</tr>
		</table>
	</body>
</html>
  • 下面是效果图:

2.使用表格标签创建一个课程表:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课程表</title>
	</head>
	<body>
		<table align="center" border="1" cellpadding="1">
			<h3 align="center">课程表</h3>
			<tr>
				<td>项目</td>
				<td colspan="5" align="center">上课</td>
				<td colspan="2" align="center">休息</td>
			</tr>
			<tr>
				<td bgcolor="hotpink">星期</td>
				<td bgcolor="hotpink">星期一</td>
				<td bgcolor="hotpink">星期二</td>
				<td bgcolor="hotpink">星期三</td>
				<td bgcolor="hotpink">星期四</td>
				<td bgcolor="hotpink">星期五</td>
				<td bgcolor="hotpink">星期六</td>
				<td bgcolor="hotpink">星期日</td>
			</tr>
			<tr>
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td rowspan="4">休息</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td rowspan="2">休息</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
		</table>
	</body>
</html>
  •  下面是运行效果:

不会写代码的菜
关注
专栏目录
HTML（的简单表格）的案例
ChengMeng11的博客
03-07 3128
1、简单的表格 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="2" width="400px" ...
HTML表格制作的例子
Java技术
07-11 1875
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第二题</title> <style> td { text-align: center; } </style> </head> ...
HTML_表格实例
Twilight's Blog
01-01 1万+
html表格的几种形式
HTML 表格实例
Zyyss1993的博客
11-12 453
1.表格这个例子演示如何在 HTML 文档中创建表格。 <p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4><table border="1"><tr> ...
HTML表格（table）实例
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
HTML实例之表格
qq_43131852的博客
09-25 362
参考https://www.w3school.com.cn/tiy/t.asp?f=html_basic 表格 <html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4&...
[html]表格实例
qq_37301470的博客
11-06 572
[html]表格实例 一：没有边框的表格（border=0） <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <table border="0"> <th>wtf</th> <tr> <td>100</td> <td>200</td&
html制作细线表格的简单实例
12-14
HTML表格是网页设计中常用的元素，用于展示结构化数据。在制作细线表格时，我们需要对HTML表格的一些属性进行精细调整，以达到理想中的视觉效果。以下是对细线表格制作原理的详细解释。 首先，我们要了解HTML表格的...
HTML表格布局实例讲解
09-28
HTML表格布局是指使用HTML中的元素及其相关标签(, , , , , )来创建和控制网页中的表格化数据展示和页面布局。这种方法在网页设计的早期阶段非常流行，但随着CSS和现代网页布局技术的发展，使用表格进行布局已逐渐被...
HTML 使用表单标签实现注册页面的实例代码
09-22
6. 标签：定义表格中的一行，与标签结合使用，来创建表格的具体内容单元格。 7. 标签：用于在标签内定义一个单元格，用来放置输入控件或者文本内容。 8. 使用或 实体：在HTML中，如果单元格内没有内容，可能...
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
html中table的表格样式
05-24
NULL 博文链接：https://zhou-hong-liang.iteye.com/blog/365301
html table实现复杂表头的示例代码
11-20
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。 在html中<td> 标签定义 HTML 表格中的标准单元格。 　　(1)rowspan 属性规定单元格可横跨的行数; 　　(2)colspan 属性规定单元格可横跨的列数。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多表头表格</title> </head> <body> <table id="tab" cellpadding="1"
HTML中表格table标签的实例
weixin_30552635的博客
08-03 470
一、表格有边框,第一行居中对齐 二、表格没有边框 三、表格有水平标题 四、表格有垂直标题 五、合并行单元格 colspan合并单元格 六、表格有单元格边距(内边距) 七、表格没有单元格间距 八、表格有单元格间距 转载于:https://www.cnblogs.com/nyw1983/p/11296804.html...
表格标签案例---个人简历
A_light_sun的博客
10-12 333
表格标签应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title_个人简历</title> </head> <body> <table border="1px" cellsp...
20 表格标签案例
hello_sunny123的博客
06-25 171
制作一个表格 (1)先书制作表格的结构. 1.第一行里面是th表头单元格 2.第二行开始里面是td普通单元格 3.单元格里面可以放任何元素,文字、链接、图片等都可以 (2)后书写表格属性. 1.用到宽度、高度、边框cellpadding和celspacing 2.表格浏览器中对齐align 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
html 表格实例
Reborn_s的博客
10-23 402
table{ width: 100%; border-collapse:collapse;} th,td{ border-width:1px; border-collapse:collapse; border-color:#000; border-style:solid; text-align: center; lin
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML表格标签的基础用法与实例
吴胡随笔的博客
06-27 608
文章目录一、表格的作用二、表格骨架标签三、表格的样式四、表格其他标签五、合并单元格六、综合练习 一、表格的作用 在CSS还未普及的时候一些简单的网站使用表格布局是十分快捷的，开发人员只要按照需求，简单的对表格进行行列的拆分，就能实现设计页面的布局；随着互联网的发展以及CSS的普及用户的审美提升，表格布局渐渐淡出了布局手段行列。虽然表格现在不常用于布局，但是在展示一些后台数据的时候表格可以让数据显示的非常清晰规整，阅读起来十分方便，所以我们常用表格来展示一些数据。 二、表格骨架标签 <table>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会写代码的菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值