前端学习:html基础学习四

时间：2020-12-17 19:55:48

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

<table>标记

基本格式

<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</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>

前端学习:html基础学习四

(4)align属性

表格的显示位置

left---居左显示

center---居中显示

right---居右显示

默认值left

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

整个边框居中

前端学习:html基础学习四

(5)cellspacing属性

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

<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=“20”>

前端学习:html基础学习四

(6)cellpadding属性

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

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

前端学习:html基础学习四

(7)frame属性

1.作用

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

2.属性值

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

above:表示仅顶部有边框

below:表示仅有底部边框

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

lhs:表示仅有左侧边框

rhs:表示仅有右侧边框

vsides:表示仅有左右侧边框

box:包含全部4个边框

border:包含全部4个边框

(8)rules属性

作用

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

属性值

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

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

前端学习:html基础学习四

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

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

前端学习:html基础学习四

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

前端学习:html基础学习四

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行

前端学习:html基础学习四

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>

前端学习:html基础学习四

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

什么是框架

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

<frameset>划分框架标记

语法格式

<frameset>....</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基础学习四

相关文章