前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >HTML5+CSS3+JavaScript从入门到精通-03

HTML5+CSS3+JavaScript从入门到精通-03

原创
作者头像
qiqi_fu
发布于 2021-12-03 10:25:49
1.2K0
发布于 2021-12-03 10:25:49
举报
文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第三章 案例

03-01 表格的外框(table) 和 行(tr) 單元格(td)

代码语言：javascript
复制
<!--web03-01-->
<!DOCTYPE html>

<!--表格的外框(table) 和 行(tr) 單元格(td) -->

<html>
<head>
	<meta charset="utf-8">
	<title>表格</title>
</head>
<body>
	<h1 align="center">表格</h1>
    <hr />
    <table border="3" align="center">
        <tr>
            <td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
    </table>
</body>
</html>

03-02 表格的標題(caption) 和 列頭(th)

代码语言：javascript
复制
<!--web03-02-->
<!DOCTYPE html>

<!--表格的標題(caption) 和 列頭(th) -->

<html>
<head>
    <meta charset="utf-8" />
    <title>表格</title>
</head>
<body>
    <h1 align="center">表格</h1>
    <hr />
    <table align="center" border="3">
        <caption align="center">小學生功課表</caption>
        <tr>
            <th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
    </table>
</body>

</html>

03-03 表格的合併單元格

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-03-->
<!--

    rowspan 和 colspan 都是寫在單元格<td>中；且合併之後的列，不需要再把這列數據列出
    比如： rowspan=4之後，下面只需5個<td>, 因為默認的那個數據在rowspan那個行給出來了
  
    -->

<html>
<head>
    <meta charset="utf-8" />
    <title>表格的合併單元格</title>
</head>
<body>
    <h1 align="center">表格的合併單元格</h1>
    <hr />
    <table border="3" align="center">
        <tr >
            <td align="center" colspan="6"><h3>小學生功課表</h3></td>
        </tr>
        <tr>
            <th>&nbsp</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
    </table>
</body>
</html>

03-04 表格的屬性

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-04-->
<!--

    表格的屬性：
    bordercolor: [red, yellow, blue] \ [#FFFFCC] \ RGB(125,125,125)
    cellpadding: 單元格與內容的距離；
    cellspacing: 單元格之間的距離；
    rules:  [all：默認值] [groups] [cols] [rows] [none]
  
    -->

<html>
<head>
    <meta charset="utf-8" />
    <title>表格的屬性</title>
</head>
<body>
    <h1 align="center">表格的屬性</h1>
    <hr />
    <table border="3" align="center" bordercolor="red" cellpadding="25" cellspacing="1" rules="none">
        <tr >
            <td align="center" colspan="6"><h3>小學生功課表</h3></td>
        </tr>
        <tr>
            <th>&nbsp</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
    </table>
</body>
</html>

03-05 表格的屬性

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-05-->
<!--

    表格的表頭 <thead> 
    表格的主體 <tbody> 
    表格的頁脚 <tfoot>
  
    -->

<html>
<head>
    <meta charset="utf-8" />
    <title>表格的屬性</title>
</head>
<body>
    <h1 align="center">表格的屬性</h1>
    <hr />
    <table border="3" align="center" bordercolor="red" cellpadding="10" cellspacing="1" rules="groups">
        <thead style="background:RGB(0,180,0)">
            <tr >
                <td align="center" colspan="6"><h3>小學生功課表</h3></td>
            </tr>
            <tr>
                <th>&nbsp</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
            </tr>
        </thead>
        <tbody style="background:RGB(200,200,200)">
            <tr>
                <td rowspan="4">上午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
            <tr>
                <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
            <tr>
                <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
            <tr>
                <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
            <tr>
                <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
            </tr>
        </tbody>
        <tfoot style="background:rgb(30,220,100)">
            <td>備註：</td><td colspan="5">&nbsp</td>
        </tfoot>
    </table>
</body>
</html>

03-06 表格列的美化

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-06-->
<!--

    表格列的美化：
    colgroup: span屬性可設置組合列的數目。是table的子元素，需放在 caption 元素之後， thead 之前；
    col:      作為colgroup元素的子元素使用；
  
    -->

<html>
<head>
    <meta charset="utf-8" />
    <title>表格列的美化</title>
</head>
<body>
    <h1 align="center">表格列的美化</h1>
    <hr />
    <table align="center" border="3" bordercolor="blue">

        <tr >
            <td align="center" colspan="6"><h3>小學生功課表</h3></td>
        </tr>

        <colgroup span="1" style="width:80px;background:yellow"></colgroup>
        <colgroup span="4" style="width:120px">
            <col style="background:rgb(250,100,0)" />
            <col style="background:rgb(250,150,0)" />
            <col style="background:rgb(250,180,0)" />
            <col style="background:rgb(250,220,0)" />
        </colgroup>
        <colgroup span="1" style="width:60px;background:pink"></colgroup>

        <tr>
            <th>&nbsp</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td>
        </tr>
    </table>
</body>

03-07 窗口的上下設置

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-07-->
<!--
    框架組元素 frameset, 是放在<html>下的， 而非 <body>下；
               border, bordercolor, frameborder, cols(分割左右窗口，*表示剩餘部份), rows(用像素數或百分比分割上下窗口)， framespacing, noresize
    框架元素 frame    
    -->

<html>
<head>
    <meta charset="utf-8" />
    <title>窗口的上下設置</title>
</head>
<!--body-->
    <frameset rows="300,*" cols="*" border="50px" bordercolor="red">
        <frame src="file:///E:\WEB\Case\web01-02.html"></frame>
        <frame src="file:///E:\WEB\Case\web03-06.html"></frame>
    </frameset>
<!--/body-->

</html>

03-08 窗口的左右設置

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-08-->
<html>
<head>
    <meta charset="utf-8" />
    <title>窗口的左右設置</title>
</head>
    <frameset rows="*" cols="200,200,*">
        <frame src="file:///E:\WEB\Case\web01-02.html"></frame>
        <frame src="file:///E:\WEB\Case\web02-02.html"></frame>
        <frame src="file:///E:\WEB\Case\web03-07.html"></frame>
    </frameset>
<body>

</body>
</html>

03-09 窗口的嵌套設置

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-09-->
<html>
<head>
    <meta charset="utf-8" />
    <title>窗口的嵌套設置</title>
</head>
    <frameset rows="150,*" cols="*">
        <frame src="file:///E:\WEB\Case\web03-02.html"></frame>
        <frameset rows="*" cols="350,*">
            <frame src="file:///E:\WEB\Case\web03-02.html"></frame>
            <frame src="file:///E:\WEB\Case\web03-06.html"></frame>
        </frameset>
    </frameset>

<body>

</body>
</html>

03-10 網頁導航欄

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-10-->
<html>
<head>
    <meta charset="utf-8" />
    <title>網頁導航欄</title>
</head>
<body>
    <h3>網頁導航欄</h3>
    <hr />
    <br />
    <!--frame 是 src 屬性， 超鏈接a是 href 屬性-->
    <a href="file:///E:\WEB\Case\web03-01.html" target="myframe"><p>表格的三個基本元素</p></a>
    <a href="file:///E:\WEB\Case\web03-02.html" target="myframe"><p>表格的標題和列頭</p></a>
    <a href="file:///E:\WEB\Case\web03-03.html" target="myframe"><p>表格的合併單元格</p></a>
    <a href="file:///E:\WEB\Case\web03-04.html" target="myframe"><p>表格的屬性</p></a>
    <a href="file:///E:\WEB\Case\web03-05.html" target="myframe"><p>表格的表頭、主體和頁脚元素</p></a>
    <a href="file:///E:\WEB\Case\web03-06.html" target="myframe"><p>表格列的美化</p></a>
</body>
</html>

03-11 窗口的名稱和鏈接

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-11-->
<html>
<head>
    <meta charset="utf-8" />
    <title>窗口的名稱和鏈接</title>
</head>
<frameset rows="*" cols="180, *">
    <frame src="file:///E:\WEB\Case\web03-10.html"></frame>
    <frame src="http://www.baidu.com" name="myframe"></frame>
</frameset>
<body>

</body>
</html>

03-12 內聯框架元素

代码语言：javascript
复制
<!DOCTYPE html>
<!--web03-12-->
<!--
    內聯框架元素， <iframe> ，是<body>框架元素的子元素 ；
    其屬性與 框架元素 類似；
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>內聯框架元素</title>
</head>
<body>
    <h1 align="center">內聯框架元素</h1>
    <hr />
    <p align="center">
        <a href="file:///E:\WEB\Case\web03-01.html" target="myframe">表格的三個基本元素</a>&nbsp&nbsp
        <a href="file:///E:\WEB\Case\web03-02.html" target="myframe">表格的標題和列頭</a>&nbsp&nbsp
        <a href="file:///E:\WEB\Case\web03-06.html" target="myframe">表格列的美化</a>&nbsp&nbsp
    </p>
    <hr />
    <iframe src="file:///E:\WEB\Case\web03-01.html" name="myframe" width="100%" height="600px"></iframe>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论