第二章 表格及样式入门 代码
一、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>静夜思 <b>李白</b></h1> <!-- 半个空格-->
<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>运行结果如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
