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 ...

随机推荐

Hello Docker
Docker: Build, Ship, and Run Any App, Anywhere 在任何地方构建.交付和运行任何应用 1. 引言最近简单的学习了下Docker,本文先简要梳理下Docke ...
DWR3.0 服务器推送及解惑
前言:在慕课网上学习一下服务器推送给客户端技术,代码亲测过,没毛病,今天整理记录一下: 一.环境搭建直接上图,简单粗暴,myeclipse上file->new->WebProject 二 ...
JMeter脚本获取变量名、检验字符串值
说明: 脚本中获取变量值用vars.get("变量名"); 校验String类型的值使用String.equals("字符串值"),而不能用String==&q ...
【java】彩票中奖码生成器：java.util.Random里的方法public int nextInt(int bound)
package 彩票中奖码生成器; import java.util.Random; public class TestRandom { public static void main(String[ ...
后台返回数据事null时怎么进行判断
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
Udacity并行计算课程笔记-The GPU Programming Model
一.传统的提高计算速度的方法 faster clocks (设置更快的时钟) more work over per clock cycle(每个时钟周期做更多的工作) more processors( ...
如何在yarn上运行Hello World(二)
在之前的一篇文章我们介绍了如何编写在yarn集群提交运行应用的AM的yarnClient端,现在我们来继续介绍如何编写在yarn集群控制应用app运行的核心模块 ApplicationMaster ...
78、excel的读写操作
本篇主要是用python来自动生成excel数据文件也就是简单的excel读写操作.python读写excel文件主要是第三方模块库xlrd.xlwt. 本篇导航: 写excel 读excel 一.写 ...
Windows,Mac与Linux哪个更适合开发者？
以前写的,怕引来口水战,干脆不发.这段时间面试了十来人,用Mac的开发水平明显高于Windows的,挺多感想的,于是改改发了吧. Windows: 对普通用户而言体验最友好,对开发者 ...
Qt数据库集成应用封装
平时的大大小小的项目中,基本上都需要与数据库打交道,会遇到各种各样的应用场景,本人主要遇到四种场景1:数据库自动重连,例如mysql数据库中经常遇到服务器挂掉的情况,需要自动检测并重新连接数据库.2: ...

前端学习:html基础学习四