（前端）HTML之表格
2024-06-19 03:14:27
表格标签(table)的基本语法
table:表格容器
tr:列
td:单元格
th:粗体
caption:标题列
【例子】<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
①cellspacing="2"
表格格线厚度。②cellpadding="2"
文字与格线的距离
③align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center。
④valign="TOP".
表格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
案例：
<!-- <!DOCTYPE html> 网页的版本 HTML5.0版本 -->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>基本标签</title></head><body><!-- 1.标题标签 h 1-6 超出范围识别不了-->我算标题吗？<h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6><!-- 2.段落标签 p p段落是HTML5.0新增的标签-->我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么<p>我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么</p>我是谁我在哪里我要干什么我是谁我在哪里我要干什么我是谁我在哪里我要干什么<p><!-- 3.跨行标记<br/> 水平分割线标记 -->杨睿<br/>曾嘉成<hr color="red" size="7" width="90%"/>杨睿<br/>曾嘉成<!-- 4. 列表标记 ul ol dl--><!-- 列表的作用：排版，区域模块区分现实，导航条的显示 --><!-- li子标签，列表上的所有选项需要通过li包裹 --><!-- 4.1 ul无序列表 --><!-- circle 空心圆 --><!-- disc 实心圆 默认 --><!-- square 实心方块 --><h1>四大天王</h1><ul type="circle"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ul><ul type="disc"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ul><ul type="square"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ul><!-- list-style: none; 去掉列表前面的符号 --><ul style="list-style: none;"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ul><!-- 4.2 有序列表 ol --><ol><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ol><ol type="i"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ol><ol type="A" start="5"><li>托塔天王宋威</li><li>干饭天王张萍</li><li>睡觉天王陈鑫</li><li>打架天王陈亚深</li><li>游戏天王唐琪棋</li></ol><!-- 4.3 清单列表 dl dt dd --><dl><dt>曾嘉成个人简介</dt><dd>我是一个非常阔爱的小男孩,我喜欢蹦迪也喜欢撩妹子我是一个非常阔爱的小男孩,我喜欢蹦迪也喜欢撩妹子我是一个非常阔爱的小男孩,我喜欢蹦迪也喜欢撩妹子我是一个非常阔爱的小男孩,我喜欢蹦迪也喜欢撩妹子</dd></dl><!-- 5.图片标记 img --><!-- src 存储图片的路径 --><img src="img/R-C.jpg" width="200" height="200"><!-- 6.跑马灯标签 类似弹幕 --><marquee>哇！好帅呀</marquee><marquee scrolldelay=5 scrollamount=50><img src="img/R-C.jpg" width="100" height="500"></marquee><!-- 7.div盒子标记 --><!-- 没有使用前端框架前 --><!-- 目前实现网页的技术布局都是DIV+CSS控制网页的格局 --><div style="width: 100px;height: 100px;background-color: red;">123</div></body>
</html>
表格的基本架构示例：
<html>
<head>
<title>基本表格</title>
</head>
<body>
<table border="2"><tr><td>1行1列的单元格</td><td>1行2列的单元格</td><td>1行3列的单元格</td></tr><tr><td>2行1列的单元格</td><td>2行2列的单元格</td><td>2行3列的单元格</td></tr>
</table>
</body>
</html>
跨列的表格：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跨行跨列的表格</title>
</head>
<body>
<table width="200" border="1"><tr><td colspan="3">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr></table>
</body>
</html>
跨行+跨列的表格：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跨行跨列的表格</title>
</head>
<body>
<table width="200" border="1"><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr>
</table>
</body>
</html>
升级案例：邮箱登陆
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵美邮箱登录</title>
</head>
<body><form method="post" action="login_success.htm"><table><tbody> <tr><td><h2>邮箱登录</h2></td><td colspan="2"> </td></tr><tr><td></td><td>用户名</td><td><input name="sname" type="text" size="15" /> @gmgw.com</td></tr><tr><td></td><td>密 码</td><td><input name="pass" type="password" size="15" /> <a href="forget.jsp">忘记密码了？</a></td></tr><tr><td></td><td></td><td><input type="checkbox" value="2week" name="mod" />两周内自动登录 <input type="checkbox" value="ssl" name="mod" />SSL安全登录</td></tr> <tr> <td></td><td colspan="2"><input type="image" style="border:0px;" name="Button" src="data:images/login.gif" /></td></tr> </tbody></table></form>
</body>
</html> （前端）HTML之表格相关推荐
- vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
- html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
- 纯前端实现xls表格下载
纯前端实现xls表格下载 1.createXlsStr:生成xls模板字符串函数 xls字符串,基本不需要变更,我们只需要通过变量控制结果即可 worksheet:xls的文件名(不是下载的文件名!) ...
- layui table 每列加标签_【前端】layui表格中根据条件给对应的列加背景色
[前端]layui表格中根据条件给对应的列加背景色 [前端]layui表格中根据条件给对应的列加背景色 1.效果(根据条件动态给表格加背景色) 2.代码: 在我自己的项目中,由于条件比较多,提取出了一 ...
- [前端笔记——HTML 表格] 8.HTML 表格
[前端笔记--HTML 表格] 8.HTML 表格 1.HTML 表格基础 1.1 什么是表格? 1.2 创建表格: 2.HTML 表格高级特性和无障碍 2.1 使用`<caption>` ...
- 前端之HTML 表格
前端之HTML 表格 HTML 表格 创建表格 单元格占多行多列 使用<col>设置样式 添加标题caption 表结构 为无障碍阅读做出的努力 scope属性 id和 headers H ...
- 使用js-export-excel插件实现前端导出excel表格
js-export-excel 前端导出excel模板 1.下载 npm install js-export-excel 2.使用 /*** * 前端生成excel 表格(基于 js-export-e ...
- 前端可编辑表格插件有哪些
前端可编辑表格插件有哪些 一.总结 一句话总结:jQuery Handsontable和jExcel.js 1.常用的可编辑表格插件有哪些? jQuery Handsontable和jExcel.js ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- excel在线_功能强大的纯前端 Excel 在线表格： Luckysheet
[导语]:Luckysheet是一款类似excel的在线表格,纯前端,功能强大.配置简单.完全开源,几行代码就能展现出一个功能完备的在线表格. 简介 Luckysheet是一款类似excel的纯前端在 ...
最新文章
- 编写书籍《C语言嵌入式系统编程修炼之道》序言
- java enum判断_Java Enum枚举 遍历判断 四种方式（包括 Lambda 表达式过滤）
- C#写的一个代码生成器
- 谷歌大脑提出DropBlock卷积正则化方法，显著改进CNN精度
- Redis zset（ziplist，skiplist）内部实现
- android中接口的作用是什么意思,Android为什么要序列化
- PP-OCR论文笔记
- IOS开发笔记_5.线程，HTTP请求，定时器
- idea设置java环境变量_idea的环境变量怎样设置
- python里的pip list是什么意思_python - 运行pip list，抛出异常，这是什么情况
- html获取本机ip,获取本机IP地址的实例(JavaScript / Node.js)
- oracle psu无法开库,Oracle 12.2应用PSU后数据库无法启动
- 对多项式求积分和微分
- Java中Set接口
- ui设计师面试技巧总结
- 编程时java找不到文件_java.io.FileNotFoundException：系统找不到指定的文件
- 前淘宝技术专家谈12306：这个网站很神奇
- [生存志] 第102节 屈原既放赋离骚
- 一文读懂SpringBoot中的事件机制
- win10系统中ENSP AR启动代码40报错一些解决办法