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

随机推荐

九、 Spring Boot 拦截器
过滤器属于Servlet范畴的API,与spring 没什么关系. Web开发中,我们除了使用 Filter 来过滤请web求外,还可以使用Spring提供的HandlerInterceptor(拦截 ...
CS:APP3e 深入理解计算机系统_3e bomblab实验
bomb.c /*************************************************************************** * Dr. Evil's Ins ...
Bandit Wargame Level24 Writeup(brute-forcing with shell)
Bandit Level 24 → Level 25 Level Goal A daemon is listening on port 30002 and will give you the pass ...
详解功能版本管理之使用eoLinker
先看一个对话: "这里,你改一下,这里返回一个object." "好...好......" "还有这里,返回个String." ...... ...
《编程语言实现模式》【PDF】下载
<编程语言实现模式> 编程语言实现模式旨在传授构建语言应用(工具)的经验和理念,教读者构建自己的语言应用.这里的语言应用并非特指用编译器或解释器实现编程语言,而是泛指任何处理.分析.翻译输 ...
APP的线程安全
一般来说iOS中两个就够了,但是安卓中的第三个,iOS也是要注意的: 第一:网络方面,别人以为做数据请求用post会比get请求安全,但是这是错的,post请求虽然看起来你的请求是在请求体上,不像ge ...
在Ubuntu14.04下安装 ffmpeg-2.4.13（处理视频用，将视频保存为图片序列）
首先在 http://www.ffmpeg.org/olddownload.html 下载 ffmpeg-2.4.13.tar.bz2 : 然后安装 yasm 和 libx264: apt-get i ...
【WebGL】《WebGL编程指南》读书笔记——第4章
一.前言今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文 Example1: 复合变换在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...
Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
python multiprocessing.Process
在使用Kafka-python时自己写的一个bug 我在一个进程的__init__中初始化了一个producer,但是一直不好用但是在函数里直接new一个就好用了 why? 需要说明的是produc ...

前端学习:html基础学习四