HTML 表格跨行跨列
HTML和CSS第一天
8.8跨行跨列表格(次重点,必须掌握)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>9-表格的跨行跨列</title>
</head>
<body>
<!--需求: 一个五行五列的表格第一行,第一列的单元格要跨两列第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。colspan 属性设置跨列rowspan 属性设置跨行-->
<table border="1" width="300" height="300" cellspacing="0" align="center"><tr><th colspan="2">1.1</th>
<!-- <td>1.2</td>-->
<!-- 第一行第二列 删掉 被第一行第一列覆盖--><td align="center">1.3</td><td>1.4</td><td>1.5</td></tr><tr><th rowspan="2">2.1</th>
<!-- 覆盖掉第三行第一列--><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr><tr>
<!-- <th>3.1</th>-->
<!-- 被第二行第一列所覆盖 删掉--><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr><tr><th>4.1</th><td>4.2</td><td>4.3</td><td colspan="2" rowspan="2" align="center"><b>4.4</b></td>
<!-- 覆盖掉原本的第四行第五列和第五行第四列,第五行第五列-->
<!-- <td>4.5</td>-->
<!-- 被第四行第四列所覆盖掉--></tr><tr><th>5.1</th><td>5.2</td><td>5.3</td>
<!-- <td>5.4</td>-->
<!-- <td>5.5</td>-->
<!-- 上两个单元格都被第四行第四列所覆盖掉了--></tr></table>
</body>
</html>
![代码运行结果](https://img-blog.csdnimg.cn/20210712170338504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzQ1Njg0OQ==,size_16,color_FFFFFF,t_70)
HTML 表格跨行跨列相关推荐
- itextpdf 表格跨行跨列与可视化图表
文章目录 itextpdf 表格跨行跨列与可视化图表 效果图 普通表格一(表头背景色) 普通表格二 (隔列变色) 表格跨行跨列 可视化图表 使用示例 普通表格一(表头背景色) 普通表格二 (隔列变色) ...
- php表格最后一行跨列合并,php动态实现表格跨行跨列实现代码
php动态实现表格跨行跨列实现代码 发布于 2015-01-28 14:56:14 | 203 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext P ...
- JavaWeb 表格跨行跨列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- html跨行跨列学生报名表,HTML表格跨行、跨列操作(rowspan、colspan)
一般使用 元素的colspan属性来实现单元格跨列操作,使用元素的rowspan属性来实现单元格的跨行操作. colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性.其取值为nu ...
- itextpdf 表格生成与跨行跨列
itextpdf 表格跨行跨列操作 由于前段时间需要做需求接触pdf表格,表格需要跨行跨列操作,写了个工具类,代码如下: static class PdfUtil {/*** 生成一个表格* @aut ...
- 小程序跨行跨列多列复杂表格实现
今天来实现个跨行跨列多列表格. 如图,这是个列数不确定,有的单元格还要跨行跨列的复杂表格. 这里暂时最多支持4列,列数再多就放不下了. 实现原理 实现原理比较简单,通过多个嵌套的循环将数据取出. 上面 ...
- 【尚硅谷 Java Web 笔记】表格的跨行跨列
colspan 属性设置跨列 rowspan 属性设置跨行 <!DOCTYPE html><html lang="en"><head><m ...
- php 中如何设置单元格跨行,HTML表格中单元格跨行跨列
HTML表格中单元格跨行跨列 对于标准的表格,每一行的单元格 数量是一样的.但在实际使用中,经常会遇到跨行跨列的表格,这个时候,每一行的数量就不一样了. 一.定义 所谓"跨行",是 ...
- latex表格 分行 跨行跨列
某个表格的单元格中 文字太长 需要分行显示的方法 如分成3行显示 添加命令 -------- \newcommand{\tabincell}[2]{\begin{tabular}{@{}#1@{}} ...
最新文章
- 计算机学院元旦晚会主题名称,【2017元旦晚会主题名称】2017年元旦晚会主题_2017学校元旦晚会主题_亲亲宝贝网...
- s()++php,jquery siblings()函数正确用法
- 各种页面刷新代码大全,asp/javascript刷新页面代码
- 机器学习 —— python库 —— 使用array创建
- spring事务环境搭建
- 看苏宁易购的运营保障体系如何hold住818大促
- JDK8 lambda的会话指南–术语表
- oracle10g启动顺序,oracle 10g rac维护:开机 关机顺序,流程
- python怎么返回上一行代码_Python实现判断一行代码是否为注释的方法
- 学习了下简单的光照模型
- ROS下多个kinect在一台电脑上同时运行
- Practice 10
- FireFox 在新建标签页插入“片段”广告引社区争议
- 【故障诊断分析】基于matlab概率神经网络柴油机故障诊断【含Matlab源码 1754期】
- 纯php实现中秋博饼游戏(1):绘制骰子图案
- Snmp拓扑结构php,基于SNMP的网络拓扑结构生成
- 3D游戏的碰撞检测是如何实现的?
- 注册oracle驱动,[XXX] 注册了JDBC驱动程 序 [oracle.jdbc.OracleDriver]
- 字符串匹配 python
- 元旦贺卡 html5,元旦贺卡:最牛的元旦祝福语短信
热门文章
- pytest单元测试框架基本操作
- 山石防火墙中. 如何支持非标准端口的ftp服务.
- 绿箭侠 第一季 持续更新中....
- 时代浪潮下,智慧环保怎么干?
- 【面经】蘑菇街电话面试
- ORACLE19C中锁的速查表
- 我的世界JAVA版有没有混凝土_我的世界1.12混凝土详解 混凝土合成教程
- 微型水质监测站——在线实时监测水质数据
- 学习免Root脚本学习的小白问题1:VScode为什么无法连接到Auto.js?已经解决
- java按季还款_Java 获取指定日期范围内的每个月,每季度,每一年