前面学习了一下HTML的经常使用标签, 今天開始高级标签之路!

一.表格标签

1.作用: 创建一张表格

2.各属性作用:

<table cellspacing="0" cellpadding="0"></table> <!--表格标签 cellspacing:单元格边距. cellpadding: 单元格间距-->

<caption> </caption> <!--caption: 置于table内部,<tr>标签之前, 未设置特定位置时, 会随着表格的移动而移动 -->

<td colspan="1" rowpan="3"></td> <!--colspan: 规定单元格可横跨的列数. rowpan: 规定单元格可横跨的行数. 注意: 这两种属性使用时, 要将被合并的单元格删除, 否则会出现单元格被挤出-->

<th></th> <!--与<td>标签差别: 加粗居中-->

3.代码演示样例:

<!DOCTYPE html>

<html>

  <head>

    <title>表格的应用</title>

	<meta charset="utf-8">

    <meta name="keywords" content="keyword1,keyword2,keyword3">

    <meta name="description" content="this is my page">

    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <a href="Main.html">返回主页</a>

    <!-- table: 表格标签. cellspacing:单元格边距. cellpadding:单元格间距 -->

    <table border="1" width="400" align="center" cellspacing="0" cellpadding="0">

    <caption align="center"> <!-- caption: 置于table标签内部, <tr>标签之前, 未设置特定的位置时,会随着表格的移动而移动 -->

    <h1>我的表格</h1>

    </caption>

    <tr>

    	<th>编号</th> <!-- 与<td>标签唯一不同: 加粗居中 -->

    	<th>姓名</th>

    	<th>性别</th>

    	<th>职务</th>

    	<th>手机</th>

    </tr>

    <tr>

    	<td>1</td>

    	<td>老大</td>

    	<td>男</td>

    	<td>董事长</td>

    	<td>18910504201</td>

    </tr>

    <tr>

    	<td>2</td>

    	<td>老二</td>

    	<td colspan="1" rowspan="3" align="center">女</td> <!-- colspan: 规定单元可横跨的列数. rowspan: 规定单元格可横跨的行数,

    																	这两种属性使用时, 要将被合并的单元格删除, 否则会出现单元

    																	格被挤出 -->

    	<td>总经理</td>

    	<td>133111111111</td>

    </tr>

     <tr>

    	<td>3</td>

    	<td>老三</td>

    	<td colspan="1" rowspan="2" align="center">副总</td>

    	<td>13322222222</td>

    </tr>

     <tr>

    	<td>4</td>

    	<td>老四</td>

    	<td>13333333333</td>

    </tr>

     <tr>

    	<td>5</td>

    	<td>老五</td>

    	<td>男</td>

    	<td>总监</td>

    	<td>13344444444</td>

    </tr>

    </table>

  </body>

</html>

4.执行结果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5pZzIwMTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

HTML高级标签之表格标签的更多相关文章

  1. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  3. HTML核心标签之表格标签(一)

    表格的基本语法: <body> <table> <tr><td></td><td></td></tr> ...

  4. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  5. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  6. HTML基本标签，表格标签，框架标签

    1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注:           a.超文本:页面内可以包含图片.链接,甚至音乐 ...

  7. 讲课笔记1——meta标签、表格标签

    图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径:        ./:当前目录            ../:跳出当前目录,到上一 ...

  8. HTML的列表标签和表格标签

    网页的列表和表格 列表的分类 无序列表 有序列表 自定义列表 有序列表 <!--有序列表--><ol>    <li>辽宁</li>    <li ...

  9. HTML核心标签之表格标签(二)

    基本用法: <ul type="cir"> <li>显示数据</li> <li>显示数据</li> </ul> ...

随机推荐

  1. tomcat安装部署

    1.tomcat6 下载地址 http://tomcat.apache.org/download-60.cgi 下载的话,下载那个.tar.gz后缀名的即可. 好像在 Linux.Unix上tomca ...

  2. canvas中遇到的理解问题

    1.lineDashOffset ctx.lineDashOffset = number 描述: setLineDash 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移. 2.createLi ...

  3. 实现人脸识别性别之路---matplotlib之注释

    一.准备数据 利用np.linspace()函数得到一定范围内的数据集 利用2*x+1的公式求出y 二.创建窗口 三.根据具有规律的数据画图 四.调整坐标轴 1.将原本的坐标轴的上轴和右轴去掉,使用基 ...

  4. IOS基础学习日志(七)利用dispatch_once创建单例及使用

    自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行. ...

  5. cache -- clear（ 缓存清除的方法）

    一:meta方法 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV ...

  6. sparksql不支持hive中的分区名称大写

    但是在hive中查询是可以的. 后来经过一点一点测试发现,原来分区名称不能是大写,必须小写才行.

  7. 调用中行接口针对返回报文（xml形式）做相关处理

    最近在对接中行银行接口,在获取返回报文的时候遇到一些问题,现在在这里做个总结 TIP: 在返回报文之前,要对前置机的URL请求,在这期间遇到一个坑,还是通过查看日志才发现问题 在填写转账信息的时候要求 ...

  8. 洛谷——P1525 关押罪犯

    https://www.luogu.org/problem/show?pid=1525 题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间 ...

  9. JQuery之为某个div加入行样式

    JQuery都是以$符号开头的.当然能够用jQuery取代$符号,他们是恒等的,同一时候也是相等的.()事实上就是一个方法,里面能够传递匿名函数等,选取某个div时,如id为div1则用$('#div ...

  10. JavaScript全讲-架构原则解析

    因为近期一直在忙,非常久没有更新,见谅. 上篇我们讲完JavaScript函数式编程的特性,今天我们就来聊聊JavaScript中的架构. 提到JavaScript架构.非常多人会认为不可思议,由于架 ...