前端HTML学习 table标签 知识点与使用
表格基本结构
<table>
<tr>
<td>单元格</td>
</tr>
</table>
< tr >表示 行
< td>表示 格 / 列
例如 2行2列
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的属性
------>上述table属性查自w3cschool<----
表格合并单元格方法
表格跨行（纵向）合并<td rowspan="2"></td>
表格跨列 ( 横向 ) 合并 <td colspan="2"></td>
其中的“2”是跨的行数/列数，设置需要的数量即可
试一试做一下这个表格
我按最小单元格为参考，设置了一行多少格；再数该表格有多少列；绘出表格
参考代码如下（代码不唯一，仅供参考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
caption{
font-size: 30px;
font-weight: bold;
}
tr{
text-align: center;
}
td{
width: 50px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="1100px" height="480px" align="center">
<caption>差旅费报销单</caption>
<tr>
<td colspan="2">姓名</td>
<td colspan="2"></td>
<td>级别</td>
<td colspan="2"></td>
<td colspan="7">事由</td>
<td colspan="8" align="left">出差时间：</td>
</tr>
<tr>
<td colspan="2" rowspan="2">起始时间</td>
<td colspan="2" rowspan="2">起始地点</td>
<td colspan="2">车船费</td>
<td colspan="2">住宿费</td>
<td colspan="5">补贴费</td>
<td colspan="2">市内交通费</td>
<td colspan="7" rowspan="2" align="left">报销人：</td>
</tr>
<tr>
<td>张数</td>
<td>金额</td>
<td>张数</td>
<td>金额</td>
<td>天数</td>
<td>途中</td>
<td>住勤</td>
<td colspan="2">夜间行车</td>
<td>天数</td>
<td>金额</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="7" rowspan="2" align="left">证明人：</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="7" rowspan="3" align="left">管理会计：</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td rowspan="4" colspan="5" align="left">领导审核：</td>
</tr>
<tr>
<td colspan="15"></td>
</tr>
<tr>
<td colspan="15"></td>
</tr>
<tr>
<td colspan="15"></td>
</tr>
</table>
</body>
</html>
动手试一试，用表格布局做这一个页面
可以看出此项目可用 5 行 3列的 表格 实现
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#t1{
color: white;
font-weight: bold;
font-size: 60px;
}
#t2{
color: white;
font-size: 40px;
}
.t3{
color: white;
font-size: 30px;
}
</style>
</head>
<body bgcolor="#14B471">
<table align="center">
<tr>
<td rowspan="5">[外链图片转存失败(img-qEJXdAdv-1562143940942)(https://mp.csdn.net/mdeditor/img/mobile.png)]</td>
<td colspan="2" id="t1">Badger</td>
<!--<td></td>-->
</tr>
<tr>
<!--<td></td>-->
<td colspan="2" id="t2">Remind friends later</td>
<!--<td></td>-->
</tr>
<tr>
<!--<td></td>-->
<td colspan="2" class="t3">Remind</td>
<!--<td></td>-->
</tr>
<tr>
<!--<td></td>-->
<td colspan="2" class="t3">They</td>
<!--<td></td>-->
</tr>
<tr >
<!--<td></td>-->
<td height="150px">[外链图片转存失败(img-JPh8Rk5J-1562143940942)(https://mp.csdn.net/mdeditor/img/apple.png)]</td>
<td>[外链图片转存失败(img-zVo6pxFa-1562143940943)(https://mp.csdn.net/mdeditor/img/google.png)]</td>
</tr>
</table>
</body>
</html>
前端HTML学习 table标签 知识点与使用的更多相关文章
- html 之table标签结构学习
一.HTML table标签结构 html 中table标签的结构情况,如下所示: <!-- table标签结构如下: <table> <thead> # thead表格 ...
- python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 前端HTML学习心得
学习最好的效果就是理论加实践--Hanks!!!(给大家打鸡血的哈哈哈) 前面的学习我教大家怎么搭建简单的前端开发环境,现在我教大家怎么使用工具学习(从入门到放弃哈哈,不不不,这是以前的我,现在我下了 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
- web前端的学习误区
web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...
- 绝版珍珍藏：web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- 史上最全的web前端系统学习教程！
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
随机推荐
- Qt保持窗口在最上方
原文:https://blog.csdn.net/hl1hl/article/details/85244451 前言 在Qt开发桌面软件的过程中,根据开发的需求不同,我们经常需要将弹出窗口,一般常见的 ...
- 推荐算法_CIKM-2019-AnalytiCup 冠军源码解读_2
最近在为机器学习结合推荐算法的优化方法和数据来源想办法.抱着学习的态度继续解读19-AnalytiCup的冠军源码. 第一部分itemcf解读的连接:https://www.cnblogs.com/m ...
- 【Hadoop离线基础总结】Mac版VMware Fusion虚拟机磁盘挂载
步骤概览 1.打开所要挂载磁盘的虚拟机的设置(此时必须关机) 2.打开硬盘设置 3.添加设备 4.选择新硬盘 5.设置如下图 6.将虚拟机开机,输入 df-lh ,查看当前虚拟机磁盘 7.输入 fdi ...
- [hdu5215]无向图找奇偶环
题意:如标题 思路:对于奇环,一个二分图判定就ok了,有奇环<=>非二分图.对于偶环,考虑环必定出现在双联通分量里面,可以先求出图的双联通分量,对于一个双联通分量,对于双联通分量里面的每个 ...
- layui select下拉菜单联动
做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示 <div class="layui-inline"> <label class=&q ...
- Mybatis 注入全局参数
在项目中使用mybatis作为dao层,大部分时间都需要使用到mybatis提供的动态sql功能,一般情况下所有的表都是在同一个数据库下的,进行数据操作时都是使用jdbc中默认的schema.但是如果 ...
- 【SMB源码解析系列】——002.RESET中断
跟随代码结尾处的中断向量,我们可以看到RESET中断所在地址为Start标签处. 这部分代码比较简单,从字面便可基本理解. 1.(682~683)状态寄存器设置,sei指令用于禁用IRQ中断,SMB中 ...
- 笨办法学习python-ex41源码加自己注释
#!/user/bin/env python #-*-coding:utf-8 -*- #Author: qinjiaxi import random from urllib import urlop ...
- sound of the genuine
“There is something in every one of you that waits and listens for the sound of the genuine in yours ...
- 原生js获取元素的各种位置(大全）
加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...