表格（表格，表格的跨行和跨列）

最新推荐文章于 2023-01-19 13:06:57 发布
最新推荐文章于 2023-01-19 13:06:57 发布
阅读量820 收藏 2
点赞数
分类专栏： Html 文章标签： servlet java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73030012/article/details/126629555
版权

表格

<table>  //表格标签
  <tr>  //行标签，有几行就写几个
     <td>第一个单元格内容</td> 
     <td>第二个单元格内容</td>
  </tr>
</table>

表格样式

  • <table border="1" width="400px">.......</table>

内容居总加粗

<tr>
  <th>   其中的内容居总加粗  </th>
</tr>

对齐方式

  • <td align="center"> 其中的内容居中不加粗 </td>
    • ="left"左对齐
    • ="right"右对齐
  • 当表格长时 表头：thead 表体：tbody 表低：tfood（都是table的子标签）

表格的跨行和跨列

跨列
<table>
  <tr>
     <td  colspan="n">......</td>
  </tr>
</table>
跨行
<table>
  <tr>
      <td  rowspan="n"> ......</td>
  </tr>
</table>
  • 案例
<table border="1px" bordercolor="green">
			<tr>
				<td colspan="5" align="center">不学好宝典</td>		
			</tr>
			<tr>
				<td rowspan="3">不学好根据地</td>
				<td>嗨嗨嗨</td>
				<td>space</td>
				<td>miu</td>
				<td>百度</td>
			</tr>
			<tr>	
				<td>上技师</td>
				<td>海龙王</td>
				<td>天宇</td>
				<td>泰合玺</td>
			</tr>
			<tr>	
				<td>喝茶~</td>
				<td>喜马拉雅</td>
				<td>复地</td>
				<td>虹悦城</td>
			</tr>
		</table>

使用表格制作个人简历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<font size="7"><center>个人简历表</center></font>
		<table border="1px" width="600px" height="900px" align="center" bordercolor="black" style="border-collapse: collapse;table-layout:fixed">
			<tr height="50px">
				<td align="center" width="100px" colspan="2">姓名</td>
				<td width="150px" colspan="2">薛翔文</td>
				<td align="center" width="100px" colspan="2">性别</td>
				<td width="100px" colspan="2">雄性</td>
				<td align="center" width="150px" colspan="2">出身年月</td>
				<td width="130px" colspan="2"></td>
				<td rowspan="3" width="150px" colspan="3"><img src="img/下载.jfif" width="150px;" height="150px"/></td>
			</tr>
			<tr>
				<td align="center" colspan="2">身份证号码</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">民族</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">政治面貌</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td align="center" colspan="2">婚姻状况</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">健康状况</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">身高</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td align="center" colspan="2">现户口所在地</td>
				<td colspan="2"></td>
				<td align="center" colspan="3">所学专业</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">学历</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td align="center" colspan="2">最后毕业学校</td>
				<td colspan="2"></td>
				<td align="center" colspan="3">毕业时间</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">技术职称</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td align="center" colspan="2">现工作单位</td>
				<td colspan="2"></td>
				<td align="center" colspan="3">参加工作时间</td>
				<td colspan="2"></td>
				<td align="center" colspan="2">现从事专业</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td align="center" rowspan="6" height="150px" style="writing-mode: tb-rl;">主&nbsp;&nbsp;要&nbsp;&nbsp;简&nbsp;&nbsp;历</td>
				<td align="center" height="50px"  colspan="4">起止年月</td>
				<td align="center" colspan="4">在何单位（学校）</td>
				<td align="center" colspan="6">任何职务</td>
			</tr>
			<tr>
				<td colspan="4"></td>
				<td colspan="4"></td>
				<td colspan="6"></td>
				
			</tr>
			<tr>
				
				<td colspan="4"></td>
				<td colspan="4"></td>
				<td colspan="6"></td>
				
			</tr>
			<tr>
				<td colspan="4"></td>
				<td colspan="4"></td>
				<td colspan="6"></td>
			</tr>
			<tr>
				<td colspan="4"></td>
				<td colspan="4"></td>
				<td colspan="6"></td>
			</tr>
			<tr>
				<td colspan="4"></td>
				<td colspan="4"></td>
				<td colspan="6"></td>
			</tr>
			<tr>
				<td align="center" colspan="2" height="200px" width="" >业务<br>专长<br>及<br>工作<br>成果</td>
				<td colspan="13"></td>
			</tr>
			<tr>
				<td align="center" colspan="3">通讯地址</td>
				<td colspan="4"></td>
				<td align="center" colspan="3">邮政编码</td>
				<td colspan="5"></td>
			</tr>
			<tr>
				<td align="center" colspan="3">联系电话</td>
				<td colspan="4"></td>
				<td align="center" colspan="3">Email地址</td>
				<td colspan="5"></td>
			</tr>
		</table>
	</body>
</html>
大黑翔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
表格的跨行与跨列
weixin_46370867的博客
09-01 1434
表格的跨行与跨列（课表示例） colspan 属性：用来规定表格单元格可横跨的列数。 rowspan 属性：用来规定表格单元格可横跨的行数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
EasyUI 表格数据跨行跨列案列
qq_42094745的博客
02-09 650
easyui 数据跨行跨列实现
table合并单元格colspan和rowspan
weixin_33725722的博客
03-06 3109
起因 解决方案 colspan rowspan colspan rowspan 综合实例 起因 最近要实现一个成绩分析的功能，最终是要呈现到Word中的，一开始想到的使用报表显示，但是得有单独的数据库表来存储这些数据，如果说项目是刚开始做的话，倒也好说，不过现在项目已经进入了后期，在新建数...
java easyexcel 单元格内容超出问题
wangyongpro的博客
05-18 3521
Excel作为办公人员常用的软件之一,获得了世界范围的推广和使用。Excel软件依靠其强大的功能,成为一款快速、有效处理函数和公式的优秀软件。然而程序导出表格的时候文本超出了单元格的宽度，相信大读书用户都到这类问题。 解决办法1：在文本超出的下一列，给单元格设置默认值。 解决办法2：在实体类注解中加入 跨行并设置行高度和列宽度，在固定高度和宽度内，超出部分跨行显示，所以可以解决内容超出单元格显示问题。 @Data @ColumnWidth(value = 15) @HeadStyle(hor
easypoi 模板导入、导出合并excel单元格功能
weixin_45168162的博客
01-19 8706
easypoi 模板导入、导出合并excel单元格功能
php动态实现表格跨行跨列实现代码
10-27
由于按照条件提取多台服务器生成的报表数据的需要，我们很可能用到php动态生成可以跨行跨列的表格，table跨行跨列杂糅在一起经常出现不好控制，而且行列合并属性的逻辑耦合度很高，所以对于这次的需要就有了如下东西
layui数据表格跨行自动合并的例子
10-16
今天小编就为大家分享一篇layui数据表格跨行自动合并的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
dataGrid 多维表头、表头跨行跨列设计及绑定数据
10-27
dataGrid　其实就是一个html table,本文将介绍dataGrid 多维表头，表头跨行跨列设计方法需要了解的朋友可以参考下
js动态修改表格行colspan列跨度的方法
10-24
本文将深入探讨如何使用JavaScript动态地修改HTML表格中的行`colspan`属性，从而改变列的跨度。`colspan`属性是HTML `<td>`（表格数据单元格）元素的一个属性，用于指定一个单元格跨越的列数。 在给定的例子中，...
JavaScript 合并 Table 单元格简单做
zhangxin09的专栏
05-14 5129
标签初步分析 HTML Table 元素允许合并单元格。通常手写代码比较“反人类”思维，于是还是通过直观的可视化的工具来完成，例如奉为经典的 Dreamweaver。 研究代码，td 行元素有一 rowspan 跨行的属性，表示跨行行数。如果当前这样有 x 个跨行，那么下面 tr > td （一共 x 行）中的每一行都可以少出现一个 td。 如上图，上面有 rowspan 的 tr 的，...
前端学习第二天——html跨行跨列
weixin_42108855的博客
06-02 239
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客
HTML入门到精通-（WEB网站开发入门课）
07-11
从0基础讲解网站html的开发，主要讲解各类html标签的含义和用法，同时讲解开发工具dreamweaver的基础使用。
table表格td无法设置宽度
weixin_61276211的博客
08-02 1340
table表格td设置宽度
html table tfoot 跨列,HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列
weixin_29251337的博客
06-22 506
在HTML中表格是作为一个整体来解析的，解析完才会在页面显示，如果表格很复杂很长，加载时间很长，用户体验就不好。所以这里就要用到表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示。表格结构标签(添加这三个标签时，要注意不能影响网页布局)： 表头部(放表格的标题之类) 表主体(放表格主体数据) 表脚注　　(放表格脚注)在写代码时：不论上面，，顺序如何，在页面显示时，总是按照...
colspan和rowspan
yoloo
09-14 3606
colspan和rowspan这两个属性用于创建特殊的表格。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数： 例1： 在浏览器中将显示如下： 单元格1 单元格2 单元格3 ...
JS处理Table跨行
℡メ㏑╭ァ小凯
05-16 3301
要合并这种列表 由于这个数据是从xml中读取的，很多复杂逻辑，从后台的拼接难度比前台难度大。 然后就用前台拼接 ，最终效果 合并逻辑，给要合并的列加个样式 用于获取，然后和下面的做比对，有的就合并，其他的删除，防止断层 比如1 1 1 2  合并的后事12 1 1 2  1 3 合并之后是 1 2  1  3 js代码     $(func
HTML表格标签跨行与跨列
m0_67081826的博客
06-24 2020
HTML的跨行和跨列
跨列 哪个属性 html,HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列
weixin_29743373的博客
06-04 305
在HTML中表格是作为一个整体来解析的，解析完才会在页面显示，如果表格很复杂很长，加载时间很长，用户体验就不好。所以这里就要用到表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示。表格结构标签(添加这三个标签时，要注意不能影响网页布局)： 表头部(放表格的标题之类) 表主体(放表格主体数据) 表脚注　　(放表格脚注)在写代码时：不论上面，，顺序如何，在页面显示时，总是按照...
6.6 合并列colspan
mmsx2017的博客
03-11 441
一、colspan属性简介 语法：&lt; td colspan=”跨度的列数”&gt; &lt;body&gt; &lt;table&gt; &lt;!--第1行--&gt; &lt;tr&gt; &lt;td colspan="2"&gt;绿叶学习网精品教程&lt;/td&gt; &
html表格跨列跨行合并
最新发布
05-10
在 HTML 表格中，可以使用 rowspan 和 colspan 属性来合并单元格，从而实现跨行或跨列的效果。 跨行合并单元格使用 rowspan 属性，例如： ``` <table> <tr> <td rowspan="2">单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> </tr> </table> ``` 上面的代码中，第一个单元格跨越了两行，使用 rowspan="2" 来指定。 跨列合并单元格使用 colspan 属性，例如： ``` <table> <tr> <td>单元格1</td> <td colspan="2">单元格2-3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> </tr> </table> ``` 上面的代码中，第二个单元格跨越了两列，使用 colspan="2" 来指定。 需要注意的是，跨行或跨列合并的单元格不能再包含其他单元格。否则会出现布局混乱的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

大黑翔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值