前端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天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

随机推荐

【FPGA篇章六】FPGA编译向导：详解编译预处理功能
欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 Verilog HDL语言和C语言一样也提供了编译预处理功能. Verilog HDL允许在程序中使用特殊的编译预处理语句. 在编译时,通常 ...
MySQL——关于索引的总结
索引的优缺点首先说说索引的优点:最大的好处无疑就算提高查询效率.有的索引还能保证数据的唯一性,比如唯一索引. 而它的坏处很明显:索引也是文件,我们在创建索引时,也会创建额外的文件,所以会占用一些硬盘 ...
【HBase】HBase和Sqoop整合
目录需求一步骤一.修改sqoop配置文件二.在mysql中创建数据库和数据表并插入数据三.将mysql表中的数据导入到HBase表中四.在HBase表中查看数据需求二步骤一.创建hi ...
并发工具类——Semaphore
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 Semaphore([' seməf :(r)])的主要 ...
武装你的WEBAPI-OData便捷查询
本文属于OData系列目录(可能会有后续修改) 武装你的WEBAPI-OData入门武装你的WEBAPI-OData便捷查询武装你的WEBAPI-OData分页查询武装你的WEBAPI-ODa ...
[hdu4911]逆序对相关
思路:由于只能交换相邻的数,所以每次最多减小1个逆序对(且如果存在逆序对那么肯定可以减小1个)!于是乎..就是统计逆序对的裸题了.树状数组或归并都行. #pragma comment(linker, ...
Shiro+Mybatis实现登录认证、授权功能
Shiro+Mybatis实现登录认证.授权功能一.实现登录认证功能 1.流程: 跟据用户提交表单的账号,经Mybatis框架在数据库中查出User对象: 如果User为空,则会抛出异常:Unkno ...
web2
0x01 <?php $miwen="a1zLbgQsCESEIqRLwuQAyMwLyq2L5VwBxqGA3RQAyumZ0tmMvSGM2ZwB4tws"; funct ...
python 定义一个插入数据（可以插入到每个表中）通用的方法
前提置要:想要写一个方法,这个方法是插入数据到数据表的方法,只需要提供表名称,字段名称,还有插入的值,只要调用这个方法就可以自动帮助你插入数据以下是不断实践优化出来原本的插入数据库中的代码应该是这 ...
Lvs 调度算法
lvs scheduler:仅根据IP和端口进行调度静态方法:仅根据算法本身进行调度,不考虑当前服务器实际负载情况:保证起点公平 RR:round robin, 轮调,轮询,轮叫: 调度器通过&qu ...

前端HTML学习 table标签 知识点与使用