7、HTML表格（主要内容<table><caption><tr><th><td>标记）

<table>标记

基本格式

例子：

<html>

<head>

    <title>表格</title>

    <meta charset="UTF-8"><!--注释：防止乱码-->

</head>

<body>

<table>

    <caption>表格的标题</caption>

    <tr>

        <th>班级</th>

        <th>姓名</th>

        <th>年龄</th>

        <th>成绩</th>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>张三</td>

        <td>16</td>

        <td>80</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>李四</td>

        <td>14</td>

        <td>90</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>王五</td>

        <td>18</td>

        <td>50</td>

    </tr>

</table>

</body>

</html>

table标记的属性

(1)width属性

表示表格的宽度，他的值可以是像素（px）也可以是父级元素的百分百（%）

(2)height属性

表示表格的高度，他的值可以是像素（px）也可以是父级元素的百分百（%）

(3)border属性

表示表格外边框的宽度

例子：

<html>

<head>

    <title>表格</title>

    <meta charset="UTF-8">

    <!--注释：防止乱码-->

</head>

<body>

<table width="960" height="300" border="1">

    <caption>表格的标题</caption>

    <tr>

        <th>班级</th>

        <th>姓名</th>

        <th>年龄</th>

        <th>成绩</th>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>张三</td>

        <td>16</td>

        <td>80</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>李四</td>

        <td>14</td>

        <td>90</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>王五</td>

        <td>18</td>

        <td>50</td>

    </tr>

</table>

</body>

</html>

(4)align属性

表格的显示位置

left---居左显示

center---居中显示

right---居右显示

默认值left

例：<table width=”960” height=”300” border=”1” align=”center”>

整个边框居中

(5)cellspacing属性

单元格之间的间距，默认是2px，单位像素

(6)cellpadding属性

单元格内容与单元格边框的显示距离，单位像素

(7)frame属性

1.作用

控制表格边框最外层的四条线框

2.属性值

void(默认值):表示无边框

above:表示仅顶部有边框

below:表示仅有底部边框

hsides:表示仅有顶部边框和底部边框

lhs:表示仅有左侧边框

rhs:表示仅有右侧边框

vsides:表示仅有左右侧边框

box:包含全部4个边框

border:包含全部4个边框

(8)rules属性

作用

控制是否显示以及如何显示单元格之间的分割线

属性值

none(默认值)---表示无分割线

all---表示包括所有分割线

rows---表示仅有行分割线

clos---表示仅有列分割线

groups---表示仅在行组和列组之间有分割线

<tr>标记

定义表格的一行，对于每一个表格行，都是由一对<tr>...</tr>标记表示，每一行<tr>标记内可以嵌套多个<td>或者<th>标记

可选属性。

<html>

<head>

    <title>表格</title>

    <meta charset="UTF-8">

    <!--注释：防止乱码-->

</head>

<body>

<table width="960" height="300" border="1" align="center" cellspacing="20" cellpadding="10" rules="all">

    <caption align="bottom">表格的标题</caption>

    <tr bgcolor="red">

        <th>班级</th>

        <th>姓名</th>

        <th>年龄</th>

        <th>成绩</th>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>张三</td>

        <td>16</td>

        <td>80</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>李四</td>

        <td>14</td>

        <td>90</td>

    </tr>

    <tr>

        <td>四年级一班</td>

        <td>王五</td>

        <td>18</td>

        <td>50</td>

    </tr>

</table>

</body>

</html>

第一行变为红色 <tr bgcolor=”red”>

align属性---设置垂直方向对齐方式

格式：

align="值"

值

bottom---靠顶端对齐

top---靠底部对齐

middle---居中对齐

valign属性---设置水平方向对齐方式

格式：

valign="值"

值

left---靠左对齐

right---靠右对齐

center---居中对齐

<td>和<th>

1.<td>和<th>都是单元格的标记，其必须嵌套在<tr>标签内，是成对出现

2.两者的区别

<th>是表头标记，通常位于首行或者首列，<th>中的文字默认会被加粗，而<td>不会

<td>是数据标记，表示该单元格的具体数据

3.共同之处

两者的标记属性都是一样的

4.属性

bgcolor：设置单元格背景

align：设置单元格对齐方式

valign：设置单元格垂直对齐方式

width：设置单元格宽度

height：设置单元格高度

rowspan：设置单元格所占行数

例子：<th bgcolor=”red” align=”left ” rowspan=”2” >班级</th>

“班级”就会占用2行

colspan：设置单元格所占列数

HTML表格案例

<html>

<head>

    <title>实战网页布局</title>

    <meta charset="utf-8">

</head>

<body topmargin="0">

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

    <tr height="90" bgcolor="red" alogn="center">

        <td><font size="6" color="white"><b>网页的头部</b></font></td>

    </tr>

    <tr>

        <td>

            <table bgcolor="yellow" width="30%" height="500" align="left">

                <tr align="center">

                    <td><font size="6" color="white"><b>网页的左部分</b></font></td>

                </tr>

            </table>

            <table bgcolor="green " width="70%" height="500" align="left">

                <tr align="center">

                    <td><font size="6" color="white"><b>网页的右部分</b></font></td>

                </tr>

            </table>

        </td>

    </tr>

    <tr height="90" bgcolor="red" alogn="center">

        <td><font size="6" color="white"><b>网页的底部</b></font></td>

    </tr>

</table>

</body>

</html>

8、HTML框架（主要内容<frameset><frame>标记）

什么是框架

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

<frameset>划分框架标记

语法格式

属性

1.cols

使用“像素数”和%分割左右窗口，“*”表示剩余部分

如果使用“*”，“*”表示框架平均分成2个

如果使用“*”，“*”，“*”表示框架平均分成3个

2.rows

使用“像素数”和%分割上下窗口，“*”表示剩余部分

3.frameborder

　　指定是否显示边框，0不显示，1显示

4.border

设置边框的大小，默认值5像素

<frame>子窗口标记

<frame>标记是一个单标记，该标记必须放在<frameset>中使用，在<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页。

属性

1.src

　　加载网页文件的URL地址

2.name

　　框架名称，是链接标记的target所要参数

3.noresize

　　表示不能调整框架大小，没有设置时就可以调整

4.scrolling

　　是否需要滚动条

值

1.auto

根据需要自动出现

2.yes

有

3.no

无

5.frameborder

是否需要边框

值

1.（1）

显示边框

2.（0）

不显示边框

HTML框架案例

源码展示

<html>

<head>

    <title>HTML框架</title>

    <meta charset="utf-8">

</head>

<frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize">

    <frame name="top" src="top.html"/>

    <frameset cols="20%,80%">

        <frame name="left" src="left.html"/>

        <frame name="right" src="right.html" scrolling="no"/>

    </frameset>

    <frame name="bottom" src="bottom.html"/>

</frameset>

</html>

top

<html>

<head>

<title>框架</title>

<meta charset="utf-8">

</head>

<body bgcolor="green" topmargin="10">

<img src="logo.jpg" style="display: inline-block"/>

<div style="display: inline-block">

<h2>  <a href="1.html" target="_blank"><font color="white">汽车资讯网</font></a></h2>

<p><font color="#fff">    请记住我们的网址是：www.maizi.com</font></p>

    </div>

</body>

</html>

left

<html>

<head>

    <title>框架</title>

    <meta charset="utf-8">

</head>

<body bgcolor="#ccc" link="green" vlink="#f60" alink="yellow">

<ul>

    <li><a href="1.html">首页</a></li>

    <br/>

    <li><a href="/">新闻</a></li>

    <br/>

    <li><a href="/">图片</a></li>

    <br/>

    <li><a href="/">联系我们</a></li>

    <br/>

</ul>

<img src=""></img>

</body>

</html>

right

<html>

<head>

    <title>框架</title>

    <meta charset="utf-8">

</head>

<body bgcolor="#f2f2f1">

<table width="800" cellspacing="10">

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td><img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td>

            <img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

    <tr>

        <td>

            <img width="120" height="90"

                 src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg"

                 border="0" align="left">

        </td>

        <td><p>

            2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p>

        </td>

    </tr>

</table>

</body>

</html>

bottom

<html>

<head>

    <title>框架</title>

    <meta charset="utf-8">

</head>

<body bgcolor="green" topmargin="50">

<center><font size="2" color="white">© 2015-2099 版权所有</font></center>

</body>

</html>

运行结果：

前端学习:html基础学习四的更多相关文章

vagrant的学习之基础学习
vagrant的学习之基础学习本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...
前端学习:html基础学习一
1.HTML的语法(主要内容HTML语法格式.文档注释.代码格式) HTML的特点 1.可以设置文本的格式,比如标题.字号.文本颜色.段落等等 2.可以创建列表(例如打开百度,我们可以看到这样的列表) ...
JsRender 前端渲染模板基础学习
JsRender前端渲染模板使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
大二暑假第五周总结--开始学习Hadoop基础（四）
简单学习MapReduce并进行WordCount实践分布式并行编程: MapReduce设计的一个理念就是“计算向数据靠拢”,将复杂的,运行于大规模集群上的并行计算过程高度地抽象到两个函数:Map ...
前端学习:html基础学习二
3.文档设置标记上-格式标记(主要内容标记<br><p><center><pre><li><ul><ol><d ...
Android学习之基础知识四-Activity活动7讲（活动的启动模式）
在实际的项目开发中,我们需要根据特定的需求为每个活动指定恰当的启动模式.Activity的启动模式一共有4种:standard.singleTop.singleTask.singleInstance. ...
Android学习之基础知识四-Activity活动3讲(Intent的使用)
主活动名称FirstActivity.java改为了MenuTest.java 一.什么是Intent: 1.Intent是Android程序中各组件之间进行交互的重要方式,不仅可以指明当前组件想要进 ...
前端学习:html基础学习五
9.HTML表单设计(主要内容<form><input><select>标记) 表单标记 <form>...</form> <form ...

随机推荐

彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...
Python 项目实践一（外星人入侵小游戏）第二篇
接着上次的继续学习. 一创建一个设置类每次给游戏添加新功能时,通常也将引入一些新设置.下面来编写一个名为settings的模块,其中包含一个名为Settings的类,用于将所有设置存储在一个地方, ...
Learning to Rank算法介绍：GBRank
之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to Rank的基本原理,也讲到了Learning to R ...
自学Zabbix3.5.6-监控项item-Value mapping值映射
zabbix为了显示更人性化的数据,在使用过程中,我们可以将获取到得数据映射为一个字符串.比如,我们写脚本监控MySQL是否在运行中, 一般返回0表示数据库挂了,1表示数据库正常,还有各种各样的监控都 ...
《算法 (第4版)》【PDF】下载
<算法 (第4版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196349 (第4版)>[PDF]" TITL ...
iKcamp出品微信小程序教学共5章16小节汇总(含视频)
轨迹系列——Socket总结及实现基于TCP或UDP的809协议方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景在上一篇博客中我详细介绍了809协议的内容.809协议规范了通 ...
iOS Label 自适应高度
推荐第二个测试一,只改变numberOfLines属性,label的高度不会自适应(会有text中的一部分内容称为......) NSString *str = @"jgreijgirje ...
[array] leetcode - 34. Search for a Range - Medium
leetcode - 34. Search for a Range - Medium descrition Given an array of integers sorted in ascending ...
IT服务(运维)管理实施的几个要点--第一章 IT服务质量的标准
子曰"干的最好就是个60分,稍有纰漏就是不及格" 谈一个事情,最先要谈的就是统一标准,又或者这个标准已经约定俗成,广泛认可,所以就可以略过.对于IT服务质量来说,确实有一个统一的标 ...

前端学习:html基础学习四