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

随机推荐

最终父类【根类】：Object类&Objects类
一.java.lang.Object类 1.Object类介绍 Object类是所有类的父类.一个类都会直接或间接继承自该类: 该类中提供了一些非常常用的方法! 2.toString()方法 A: ...
Spring学习笔记（八）Spring Data JPA学习
jpa简单的命名规则如下,这个不多做介绍,放在这里也是给自己以后查找起来方便,这篇文章主要介绍之前一直忽略了的几个点,像@NoRepositoryBean这个注解,以及怎么自定义Repositor ...
java基础篇之位运算符
按位操作符按位操作符用来操作基本数据类型中的单个"比特"(bit),即二进制位.按位操作符会对两个参数中对应的位执行布尔代数运算,并最终生成一个结果. 我们常用的按位操作 ...
拒绝老土！暗黑风格半透平面化主题—InfinityFreedom正式发布
经常听到“路由器界面土点就土点吧,凑合能用就成.” 诚然,路由器重要的是功能,但为什么要辣眼睛呢? 拯救喜欢折腾的你,抢救干涩的眼球,原创OpenWrt主题Infinity Freedom正式发布! ...
jQuery中操作属性的方法attr与prop的区别
attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...
一文教你快速搞懂速度曲线规划之T形曲线（超详细+图文+推导+附件代码）
运动控制中常用的T速度曲线规划的原理和程序实现,最后给出了测试结果: 如果本文帮到了您,请帮忙点个赞
python pip下载设置
安装命名为 pip install -i 网址所需要安装的库名例如:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests ...
数据源管理 | OLAP查询引擎，ClickHouse集群化管理
本文源码:GitHub·点这里 || GitEE·点这里一.列式库简介 ClickHouse是俄罗斯的Yandex公司于2016年开源的列式存储数据库(DBMS),主要用于OLAP在线分析处理查询, ...
myeclipse 2017 CI 破解
1.首先下载破解文件(破解前先关闭myeclipse),链接:https://pan.baidu.com/s/1CPFH4Nga3xITSyj-BCVeaw 提取码:mkvz 2.将下载的破解文件解压 ...
【C#】CsvHelper 使用手册
目录简介模块读取读取所有记录逐条读取读取单个字段写入写入所有记录逐条写入逐字段写入特性 Index Name NameIndex Ignore Optional Default ...

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