HTML高级标签之表格标签
前面学习了一下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高级标签之表格标签的更多相关文章
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- HTML核心标签之表格标签(一)
表格的基本语法: <body> <table> <tr><td></td><td></td></tr> ...
- HTML-常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- HTML基本标签,表格标签,框架标签
1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注: a.超文本:页面内可以包含图片.链接,甚至音乐 ...
- 讲课笔记1——meta标签、表格标签
图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径: ./:当前目录 ../:跳出当前目录,到上一 ...
- HTML的列表标签和表格标签
网页的列表和表格 列表的分类 无序列表 有序列表 自定义列表 有序列表 <!--有序列表--><ol> <li>辽宁</li> <li ...
- HTML核心标签之表格标签(二)
基本用法: <ul type="cir"> <li>显示数据</li> <li>显示数据</li> </ul> ...
随机推荐
- 快速select算法的实现
代码来自: http://blog.csdn.net/v_JULY_v 算法思想: // Quick_select.cpp : 定义控制台应用程序的入口点. // #include "std ...
- Noip 2016 Day1 题解
老师让我们刷历年真题, 然后漫不经心的说了一句:“你们就先做做noip2016 day1 吧” ...... 我还能说什么,,,,,老师你这是明摆着伤害我们啊2333333333 预计分数:100+2 ...
- C#初学者使用file.creat()创建文件后,显示正由另一进程使用
string sourcePhotoPath = this.GetUserSelectedPhoto(); if(sourcePhotoPath == null) { return; } string ...
- Network Stack
Network Stack 目录 1 Overview 2 Code Layout 3 Anatomy of a Network Request (focused on HTTP) 3.1 URLRe ...
- debian8平滑升级到debian9
本文在Creative Commons许可证下发布. 首先,在升级时可以查看一下自己的版本号: uname -a ##查看内核信息 cat /etc/issue ##查看发行版本号 方法1:利用网 ...
- 使用UltraEdit配置多行注释和取消多行注释
UltraEdit功能强大,使用方便,成为软件开发者必备的文档和代码编辑工具.有很多人也直接用它来写代码,如C/Java,脚本如:Perl/Tcl/JavaScript 等. 如果用来写代码,有一个不 ...
- 【LeetCode-面试算法经典-Java实现】【05-Longest Palindromic Substring(最大回文字符串)】
背景 近期開始研究算法,于是在leetcode上做算法题,第五题Longest Palindromic Substring便是关于回文子串的. 什么是回文字串 回文字符串是指将该字符串前后颠倒之后和该 ...
- ListView-添加head跟foot item 问题
今天在使用ListView 的 addFooterView 的方法时候,遇到了一个问题.当我代码中执行了如下的操作 ListView listView = new ListView(this); li ...
- Flat UI简介
Flat UI简介 一.简介 Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架,他提供了动感.时尚的风格色调搭配,简洁.炫丽的功能组件,同时还提供了更为平滑的js交互动画,可以称 ...
- 59.C++与正则表达式
regex_match 整个字符串是否匹配 (通过cmatch存储匹配的结果),match[0]代表整个匹配序列,match[1]代表第1个匹配后的子序列,match[2]代表第2个匹配后的子序列 代 ...