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

随机推荐

thinkphp5基础
前面的话 ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持 ...
websocket简单实例
只需要两个文件即可,一个服务端,一个前端,一下示例为模拟简单的聊天程序: 服务端: package com.test.websocket; import java.io.IOException; im ...
「mysql优化专题」单表查询优化的一些小总结，非索引设计（3）
单表查询优化:(关于索引,后面再开单章讲解) (0)可以先使用 EXPLAIN 关键字可以让你知道MySQL是如何处理你的SQL语句的.这可以帮我们分析是查询语句或是表结构的性能瓶颈. (1)写sql ...
springboot整合redis
springboot-整合redis springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿 ...
Spark配置参数优先级
1.Properties set directly on the SparkConf take highest precedence, 2.then flags passed to spark-sub ...
Android开发——使用LitePal开源数据库
前言:之前使用Android内置的数据库,感觉一大堆SQL语句,一不小心就错了,很难受,学习了这个LItePal的开源数据库,瞬间觉得Android内置的数据库简直是垃圾般的存在 LitePal Gi ...
4.python迭代器生成器装饰器
容器(container) 容器是一种把多个元素组织在一起的数据结构,容器中的元素可以逐个地迭代获取,可以用in, not in关键字判断元素是否包含在容器中.通常这类数据结构把所有的元素存储在内存中 ...
智能合约语言 Solidity 教程系列5 - 数组介绍
写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果你还不了解,建议你先看以太坊是什么本文前半部分是参考Solidity官方文档(当前最新版本: ...
用户信息文件/etc/passwd，影子文件/etc/shadow，组信息文件/etc/group，组密码文件/etc/gshadow，用户管理相关文件
/etc/passwd man 5 passwd查看配置文件信息 account:password:UID:GID:GECOS:directory:shell 帐号:密码:用户ID:组ID:一般的信息 ...
【java】java.util.regex.Pattern和java.util.regex.Matcher简单示例
package 正则; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test_regex ...

前端学习:html基础学习四