HTML 基础之 跨行跨列

最新推荐文章于 2023-01-11 02:20:44 发布
最新推荐文章于 2023-01-11 02:20:44 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37489491/article/details/81276076
版权

主要是： <!-- rowspan 属性规定单元格可横跨的行数-->

<!DOCTYPE html>
<html>
	<!--
	        作者：三一
	        时间：2018-07-29
	        描述：HTML基本的操作之         跨行跨列       
    -->

	<head>
		<meta charset="utf-8" />
		<title>跨行与跨列练习</title>
	</head>

	<!--
		 cellpadding定义单元格边框与其内容之间的空白;
                 cellspacing定义单元格之间的空白;
                 下面一行可把border和cellpadding删掉。		        
	-->

	<body>
		<table align="center" bgcolor="darkgrey" cellspacing="1" border="1" cellpadding="5">
			<caption>
				<h2>学习成绩</h2></caption>
			<tr bgcolor="#FFF">
				<th>学期</th>
				<th>姓名</th>
				<th>java</th>
				<th>html</th>
			</tr>

			<!-- rowspan 属性规定单元格可横跨的行数-->
			<tr bgcolor="aquamarine">
				<td rowspan="3">大一</td>
				<!--跨行-->
				<td>张三</td>
				<td>91</td>
				<td>86</td>
			</tr>
			<tr bgcolor="blanchedalmond">
				<td>李四</td>
				<td colspan="2" align="center">77</td>
				<!--跨列-->
			</tr>
		</table>
	</body>

</html>

上图：

大鱼diary
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html布局 跨行,3种方案实现跨行或跨列布局
weixin_42143092的博客
06-27 1600
今天要讲解的这个问题是之前一位小伙伴在群里请教的提问，是关于跨行跨列的布局，如下图是他要实现的具体布局，看似是最简单的二维布局，实际透露出整个CSS的发展方向。向前可以考察对兼容性的处理功底，向后可以考察对CSS新特性的洞察能力。可攻可受，攻守兼备。如果对此问题感兴趣的小伙伴先不要往下看我写的方案，自己想想在实际项目中遇到你会怎么做呢？需要注意的是：这是一个两端对齐的布局，需要仔细考虑中间空隙的处...
layui数据表格跨行自动合并的例子
12-10
除操作列外，以左边列为基础单位进行跨行合并，当前单元格合并数<=左边列； 操作列可以选择任意列作为基础单位（这个待完善）。 原始页面： 处理页面： 方法： var execRowspan = function(fieldName,index,...
HTML跨行跨列
qq_43019242的博客
06-02 1312
colspan 属性规定单元格可横跨的列数。 <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">Febru.
html ==colspan横跨列，rowspan横跨行
zhangfn2011的专栏
04-14 3386
<br /><html><br /><body><br /><h4>横跨两列的单元格：</h4><br /><table border="1"><br /><tr><br />  <th>姓名</th><br />  <th colspan="2">电话</th><br /></tr><br /><tr><br />  <td>Bill Gates</td><br />  <td>555 77 854</td><br />  <td>555 77 855</td><br /></tr><br /></tab
HTML表单跨行跨列操作
ginger_mr的博客
03-02 509
HTML表单跨行跨列操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单跨行跨列操作</title> </head> <body> <table border="1px" width="500px" height=...
html 跨越多行,html – 跨越多行列的动态网格图块
weixin_39706491的博客
06-19 100
你将使用浮动遇到这个问题.但是,您可以更改该页面上一个元素的位置,并且所有内容都会像您期望的那样落实到位.将以下内容添加到CSS中：#homepage-grid li#tile10 {position: absolute;top: 342px;}这会将违规元素从文档流中分离出来,从而消除了对应用于其余列表项的“float”分配给它的垂直空间的保留.最后一项是浮动的,所以不会与绝对定位的瓷砖重叠.编...
前端网页PC端布局之HTML基础
03-19
3. `rowspan` 和 `colspan`：分别用于跨行和跨列合并单元格。 4. `<tr>`：定义表格行。 5. `<td>`：定义表格数据单元格。 6. `<caption>`：定义表格标题。 7. `<thead>`、`<tbody>` 和 `<tfoot>`：分别定义表格的...
2023年HTML基础知识点总结.doc
11-05
+ `colspan`：跨的列数 + `rowspan`：跨的行数 + `bgcolor`：本单元格的背景颜色 + `background`：本单元格的背景图片地址 + `align`：单元格中的内容对齐方式 表单基本结构： * `<form>`：表单标签 + `...
HTML5跨屏框架ZUI 1.9.1
05-01
ZUI是一个开源HTML5前端实践方案，帮助你快速构现代跨屏应用。ZUI 1.9.1 更新日志：2019-05-10CSS基础:优化了默认字体清单，调整了“微软雅黑”字体的权重，将其放置在字体清单的末尾，增加了“思源黑体”和“思源...
html基础知识点以及常用标签
07-24
`colspan`和`rowspan`属性让一个单元格可以跨列或跨行。 此外，`<div>`和`<span>`是两个常用标签，`<div>`作为区块元素，可以包裹其他元素并进行布局控制；`<span>`作为行内元素，用于对文本进行局部样式调整。行内...
Div+CSS多列布局方法
12-01
<style type="text/css"> .myDiv{ width:300px; border:1px solid #000;border-right:0; height:30px} .myDiv ul{ width:300px; list-style:none; margin:0; padding:0;height:30px} .myDiv ul li{ width:100px; float:left; border-right:1px solid #000; height:30px} .myDiv1{ width:300px; border:1px solid #000;border-bottom:0; height:90px} .myDiv1 ul{ width:300px; list-style:none; margin:0; padding:0;
html标题换列,html固定标题列、标题头table
weixin_39774905的博客
06-15 137
固定标题列、标题头table table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;} table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;} tabl...
html自动换列效果,html表格可以做到换行不换列嘛
weixin_42520448的博客
06-01 364
问题描述我的数据在循环输出时，它会自动换行但是一换行就变成从第一列开始输出了，有什么办法让他在本列下面开始输出呢？问题出现的环境背景及自己尝试过哪些方法相关代码{volist key="i" name="finance" id="v1"}{$i}{$v1.proj_name}{$v1.manager}{$v1.num}{volist key="j" name="v1['reply']" id="v...
div+css实现div每行显示N列，超出换行
xqq580231的博客
01-08 7507
默认情况下，div是一个元素就换一行，要实现每行中显示固定的列，比如两列。 1、已知只有一行，那么两个元素分别用float属性就可以实现两列 <div style="width: 100%; column-count: 2;column-gap: 3px;padding: 0px;"> <div>first div</div> &...
html图片3个一列,html – 如何使用CSS将4个div中的3个从一列移动到新列？
weixin_33074843的博客
06-08 170
首先,这是期望的效果：没有重新排序div的布局： 重新排序div后的布局 2是固定宽度. 1,3,4都是可弯曲的,可以是任何宽度.我尝试过使用flexbox,但重新排序后它们不会在2个cols中布局..container { display: flex; flex-wrap: wrap; width: 700px; }.d1 {order: 2;background-color: red;}.d2...
Html常见符号字符的匹配和替换
qq_43429919的博客
10-16 849
Html常见符号字符 符号 含义 html = 等于 eq != 不等于 ne,neq > 大于 qt < 小于 lt >= 大于等于 gte,ge <= 小于等于 lte,le ! 非 not 过滤工具类方法 /** * Parse Html to Text * * @author xuzhou * @version 1.0.0 * @title HtmlParseUtils * @date 2021/1/21 17:41
03_HTML表格的跨列跨行（colspan属性设置跨列、rowspan属性设置换行）
qq_45657848的博客
01-11 4640
HTML表格的跨列跨行（colspan属性设置跨列、rowspan属性设置换行）
html li可以自动换列吗,html表格可以做到换行不换列嘛
weixin_30953203的博客
05-30 279
{volist key="i" name="finance" id="v1"}<tr><td colspan="1" rowspan="0" align="center">{$i}</td><td colspan="1" rowspan="0" align="center">{$v1.proj_name}</td><td colsp...
HTML常用标签之换行标签
热门推荐
m0_61794291的博客
01-08 1万+
最近在学习html，在这里分享下自己的学习笔记~ 换行标签<br/>，简单易懂，咱们直接来看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
html 跨行跨列 漂亮
最新发布
08-27
要创建跨行跨列的漂亮布局，你可以使用HTML表格元素和CSS样式来实现。下面是一个示例： ```html <!DOCTYPE html> <html> table { width: 100%; border-collapse: collapse; } td { padding: 8px; border: 1...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值