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

随机推荐

Python3中正则的贪婪匹配模式
什么是贪婪模式正则在进行匹配时,从开始位置查找最远的结束位置,这种模式称之为贪婪模式. 在进行HTML标签类似内容获取时,贪婪模式会导致整个内容的返回,需要使用非贪婪模式. 固定的书写规则 : .* ...
C# 中枚举Enum 一些转换的方法整理
工作中经常遇到枚举的一些转换特别是获取枚举备注等特地整理下方法以后使用 public void TestMethod1() { TestEnumOne colorEnum = TestE ...
Python爬虫丨大众点评数据爬虫教程（2）
大众点评数据爬虫获取教程 --- [SVG映射版本] 前言: 大众点评是一款非常受大众喜爱的一个第三方的美食相关的点评网站.从网站内可以推荐吃喝玩乐优惠信息,提供美食餐厅.酒店旅游.电影票.家居装修. ...
RHCSA 第一题修改root密码
题目要求请修改系统的root帐号密码为redhat,确保能够使用root帐号登录系统.说明:server0 的IP为172.25.0.11/24desktop0的IP为172.25.0.10/24 ...
设计模式之GOF23代理模式01
代理模式核心作用: -通过代理,控制对对象的访问 -可以详细控制机制访问某个(某类)对象的方法,在调用这个方法前做前置处理,调用这个方法后做后置处理(AOP的微观实现) 应用场景 -安全代理:屏蔽 ...
【HDU4990】递推式
题目大意:给定序列 1, 2, 5, 10, 21, 42, 85, 170, 341 …… 求第n项模 m的结果递推式 f[i] = f[i - 2] + 2 ^ (i - 1); 方法一: ...
docker 使用 Nvidia 显卡
docker19.03读取NVIDIA显卡作者: 张首富时间: 2019-09-06 w x: y18163201 前言 2019年7月的docker 19.03已经正式发布了,这次发布对我来说有 ...
.net core kafka 入门实例一篇看懂
kafka 相信都有听说过,不管有没有用过,在江湖上可以说是大名鼎鼎,就像天龙八部里的乔峰.国际惯例,先介绍生平事迹简介 Kafka 是由 Apache软件基金会开发的一个开源流处理平台, ...
react 学习前期用到的插件
prop-types------展示组件的props类型检测: import PropTypes from 'prop-types' ... Link.propTypes = { active: Pr ...
Java 代码精简
Java 代码精简利用语法利用三元表达式普通 String title; if (isMember(phone)) { title = "会员"; } else { titl ...

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