第二章表格及样式入门代码

一、table练习背景图片背景

代码、图片的保存路径如下：

代码如下：（Noname1table练习.html）

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title></head><body><table border="1" align="center" width="100" height="100"cellpadding="60" ><!--cellpadding 表格和文字内间距--><tr bgcolor="red"> <!--bycolor 背景颜色--><th>姓名</th><th>性别</th><th>年龄</th><th>宿舍</th></tr><tr><td background="zhangsan.png">张三</td> <!--background 背景图片--><td>男</td><td>3</td><td>333</td></tr><tr><td>李四</td><td>男</td><td>4</td><td>444</td></tr><tr><td>王五</td><td>男</td><td>5</td><td>555</td></tr></table></body>
</html>

运行结果如下：

二、table练习表格横/纵向合并背景

代码如下：

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title></head><body><table border="1"align="center"width="200"height="200"bgcolor="green"><tr><th colspan="3">通讯录</th> <!--colspan 纵向跨列--></tr><tr><td rowspan="2">张三</td>  <!--rowspan 横向跨行--><td>qq</td><td>333</td></tr><tr><td>phone</td><td>三三三</td></tr><tr><td rowspan="2">李四</td><td>qq</td><td>444</td></tr><tr><td>phone</td><td>四四四</td></tr><tr><td rowspan="2">王五</td><td>qq</td><td>555</td></tr><tr><td>phone</td><td>五五五</td></tr></table></body>
</html>

运行结果如下：

三、table练习表格嵌套

代码如下：

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title></head><body><table border="1" align="center"width="600"><tr><th colspan="5" align="left">一、基本情况</th></tr><tr><td width="20%">姓名</td><td width="20%"></td><td width="20%">性别</td><td width="20%"></td><td width="20%" rowspan="4">照片</td></tr><tr><td>籍贯</td><td></td><td>年龄</td><td></td></tr><tr><td>政治面貌</td><td></td><td>婚姻状况</td><td></td></tr><tr><td>联系电话</td><td></td><td>电子邮箱</td><td></td></tr><!--第二部分--><tr><th colspan="5" align="left">二、个人<u>自我评价</u></th></tr><tr height="60"><td colspan="5"></td><tr><!--第三部分--><tr><th colspan="5" align="left">三、特色和技能</u></th></tr><tr height="80"><td colspan="5"></td><tr><!--第四部分--><tr><th colspan="5" align="left" >三、教育培训经历</th></tr><tr><td colspan="5"><table border="1" width="100%"><tr height="24">   <td width="25%">起始年月</td><td width="25%">学校</td><td width="25%">专业</td><td width="25%">备注</td></tr><tr height="24"><td></td><td></td><td></td><td></td></tr><tr height="24"><td></td><td></td><td></td><td></td></tr><tr height="24"><td></td><td></td><td></td><td></td></tr></table></td></tr><!--第五部分--><tr><th colspan="5" align="left" >四、工作及<u>实习</u>经历</th></tr><tr><td colspan="5"><table border="1" width="100%"><tr height="24"> <td width="25%">起始年月</td><td width="25%">工作单位</td><td width="25%">岗位</td><td width="25%">主要职责</td></tr><tr height="24"><td></td><td></td><td></td><td></td></tr><tr height="24"><td></td><td></td><td></td><td></td></tr></table></td></tr><!--第六部分--><tr><th colspan="5" align="left" >五、获奖等证书情况</th></tr><tr><td colspan="5"><table border="1" width="100%"><tr height="24">    <td width="25%">获得时间</td><td width="25%">证书名称</td><td width="50%">内容</td></tr><tr height="24"><td></td><td></td><td></td></tr></table></td></tr></table></body>
</html>

运行结果如下：

四、css三种样式（中的两种）

代码如下：

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title><!--内部样式表--><style type="text/css">/*标签选择器*/P{  font-size:20px;font-family:隶书;font-style:italic;}h1{color:blue;}/*body{background-color:grey;}*//*类选择器*/.hongse{color:red;}/*id选择器*/#huangse{color:yellow;}</style><!--外部样式表--><link rel="stylesheet" href="my.css" type="text/css"></head><body><h1>静夜思&nbsp;<b>李白</b></h1> <!--&nbsp 半个空格--><p class="hongse">床前明月光，</p><p id="huangse">疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p></body>
</html>

运行结果如下：

五、css两种样式简介小测试

代码如下：

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title><style type="text/css">/* 标签选择器*/h1{text-align:center;color:red;font-style:italic;        /*font-style：设置斜体。normal是正常字体，italic设置斜体。*/font-weight:bold;      /* font-weight：设置字体粗细。normal是正常，bold是字体加粗                         ，100-900是粗细程度 lighter是字体变细 */font-size:48px;font-family:"楷体";        /*font-family：设置字体风格，如微软雅黑，楷体，宋体······*//* font：同时给字体设置斜体，加粗，大小，字体，每一个值之间用空格隔开，且必须严格按照顺序执行。p{font:italic bold 48px "楷体";} */}span{                       /* <span> 标签被用来组合文档中的行内元素。*/font-size:30px;  color:black;text-decoration:underline; /* decoration [ˌdekəˈreɪʃ(ə)n] 装饰*/}/* 类选择器*/.ziti{font-size:30px;  /* font-size 字体大小 需要加px */color:black;}/* id选择器*/#yanse{color:blue;}</style></head><body><h1>人物简介</h1><hr><p id="yanse"><u class="ziti">孙悟空</u>（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《西游记》中的主要角色之一。由开天辟地产生的仙石孕育而生，出生地位于东胜神洲的花果山上，因带领猴群进入水帘洞而被尊为 “美猴王”。 [61]  为了学艺而漂洋过海拜师于须菩提祖师，得名孙悟空， [63]  学会大品天仙诀、地煞数七十二变、筋斗云等高超的法术。 [64-66] </p><p id="yanse"><span>猪八戒</span>猪八戒前世为执掌天河八万水兵的“天蓬元帅”，精通三十六般变化，所持的兵器为太上老君所造、玉皇大帝亲赐的上宝沁金耙（俗称九齿钉耙）。因调戏霓裳仙子被贬下凡尘，投了猪胎，生的猪头人身，在福陵山云栈洞落草。后受观音菩萨点化，入赘高老庄务农，等待取经人。孙悟空收服他成为唐僧的二徒弟，取名“八戒”，与孙悟空、沙悟净一同保护唐僧去西天取经，几经劫难，因挑担和保护唐僧有功，成了正果，被佛祖封为“净坛使者”。</p></body>
</html>

运行结果如下：

第二章表格及样式入门 ② 代码相关推荐

第二章表格及样式入门 ③ 详细代码演练、解析
第二章表格及样式入门 ③ 详细代码演练.解析一.table表格 tr td 商标符号版权符号二.学生信息表表格标签属性三.css样式优先级开发者模式修改四.外部样式内部样式标签选择 ...
第二章表格和样式入门
本章内容 1.表格(基本结构,属性,合并单元格,表格嵌套) 2.CSS入门(CSS作用,CSS语法,CSS方式,CSS选择器)(掌握) 第一节表格 1.1 表格基本结构表格在日常生活中主要进行数据 ...
HTML-----第二章表格及样式
1.回顾 2.本章重点 2.1.表格 2.2.CSS样式入门 2.3.基础选择器 3.具体内容 3.1.表格 3.1.1.表格概述概念:以行列对齐的方式显示数据. 作用:用于呈现数据 3.1.2.表 ...
Python快速编程入门#学习笔记03# |第二章：Python基础（代码格式、标识符关键字、变量和数据类型、数字类型以及运算符）
全文目录 ==先导知识== 学习目标: 2.1 代码格式 2.1.1 注释 2.1.2 缩进 2.1.3 语句换行 2.2 标识符和关键字 2.2.1 标识符 2.2.2 关键字 2.3 变量和数据类 ...
HTML第二章 “表格”详解（附带详细代码与解释）！！！
目录 1.表格的语法 2. 表格的可选标记 3. 表格的属性 4. 不规则的表格 5. 表格的大小每日一句 1.表格的语法 table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签 ...
Head First Python 学习笔记（第二章：分享你的代码）
共享你的代码 Python提供了一组技术,可以很容易地实现共享,这包括模块和一些发布工具: 模块允许你合力组织代码来实现最优共享. 发布工具允许你向全世界共享你的模块. 函数转换为模块 1.把第一章中 ...
前端第二章：8.HTML超链接代码写法；id属性
一.超链接介绍 0.超链接是行内元素,但是可以放块元素 1.从一个页面跳转到另一个页面 2.或者跳转到当前页面的其他位置 3.href 属性的值可以是外部网站,也可以是同一个目录下的地址文件, ...
【hadoop生态之ZooKeeper】第二章Zookeeper安装【笔记+代码】
二.Zookeeper安装 2.1 本地模式安装部署 1)安装前准备: (1)安装jdk (2)上传zookeeper到linux系统下 (3)修改tar包权限 [hadoop@ikeng softw ...
《统计学习导论-基于R应用》第二章：统计学习（代码）
A = matrix(seq(1,16),4,4) A 1 5 9 13 2 6 10 14 3 7 11 15 4 8 12 16 A[1,] 1 5 9 13 A[-c(1,3),] 2 6 10 ...

第二章表格及样式入门 ② 代码

第二章表格及样式入门代码

一、table练习背景图片背景

二、table练习表格横/纵向合并背景

三、table练习表格嵌套

四、css三种样式（中的两种）

五、css两种样式简介小测试

第二章表格及样式入门 ② 代码相关推荐

最新文章

热门文章

第二章 表格及样式入门 ② 代码

第二章 表格及样式入门 代码

一、table练习 背景 图片背景

二、table练习 表格横/纵向合并 背景

三、table练习 表格嵌套

四、css三种样式（中的两种）

五、css两种样式 简介小测试

第二章 表格及样式入门 ② 代码相关推荐

最新文章

热门文章

第二章表格及样式入门 ② 代码

第二章表格及样式入门代码

一、table练习背景图片背景

二、table练习表格横/纵向合并背景

三、table练习表格嵌套

五、css两种样式简介小测试

第二章表格及样式入门 ② 代码相关推荐