HTML5+CSS3+JavaScript从入门到精通-03
2023-04-18 14:25:50 时间
HTML5+CSS3+JavaScript从入门到精通
作者:王征,李晓波
第三章 案例
03-01 表格的外框(table) 和 行(tr) 單元格(td)
<!--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> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
03-02 表格的標題(caption) 和 列頭(th)
<!--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> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
03-03 表格的合併單元格
<!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> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr>
<td rowspan="4">上午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td rowspan="2">下午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
03-04 表格的屬性
<!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> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr>
<td rowspan="4">上午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td rowspan="2">下午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
03-05 表格的屬性
<!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> </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> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td rowspan="2">下午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</tbody>
<tfoot style="background:rgb(30,220,100)">
<td>備註:</td><td colspan="5"> </td>
</tfoot>
</table>
</body>
</html>
03-06 表格列的美化
<!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> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr>
<td rowspan="4">上午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td rowspan="2">下午</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
03-07 窗口的上下設置
<!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:WEBCaseweb01-02.html"></frame>
<frame src="file:///E:WEBCaseweb03-06.html"></frame>
</frameset>
<!--/body-->
</html>
03-08 窗口的左右設置
<!DOCTYPE html>
<!--web03-08-->
<html>
<head>
<meta charset="utf-8" />
<title>窗口的左右設置</title>
</head>
<frameset rows="*" cols="200,200,*">
<frame src="file:///E:WEBCaseweb01-02.html"></frame>
<frame src="file:///E:WEBCaseweb02-02.html"></frame>
<frame src="file:///E:WEBCaseweb03-07.html"></frame>
</frameset>
<body>
</body>
</html>
03-09 窗口的嵌套設置
<!DOCTYPE html>
<!--web03-09-->
<html>
<head>
<meta charset="utf-8" />
<title>窗口的嵌套設置</title>
</head>
<frameset rows="150,*" cols="*">
<frame src="file:///E:WEBCaseweb03-02.html"></frame>
<frameset rows="*" cols="350,*">
<frame src="file:///E:WEBCaseweb03-02.html"></frame>
<frame src="file:///E:WEBCaseweb03-06.html"></frame>
</frameset>
</frameset>
<body>
</body>
</html>
03-10 網頁導航欄
<!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:WEBCaseweb03-01.html" target="myframe"><p>表格的三個基本元素</p></a>
<a href="file:///E:WEBCaseweb03-02.html" target="myframe"><p>表格的標題和列頭</p></a>
<a href="file:///E:WEBCaseweb03-03.html" target="myframe"><p>表格的合併單元格</p></a>
<a href="file:///E:WEBCaseweb03-04.html" target="myframe"><p>表格的屬性</p></a>
<a href="file:///E:WEBCaseweb03-05.html" target="myframe"><p>表格的表頭、主體和頁脚元素</p></a>
<a href="file:///E:WEBCaseweb03-06.html" target="myframe"><p>表格列的美化</p></a>
</body>
</html>
03-11 窗口的名稱和鏈接
<!DOCTYPE html>
<!--web03-11-->
<html>
<head>
<meta charset="utf-8" />
<title>窗口的名稱和鏈接</title>
</head>
<frameset rows="*" cols="180, *">
<frame src="file:///E:WEBCaseweb03-10.html"></frame>
<frame src="http://www.baidu.com" name="myframe"></frame>
</frameset>
<body>
</body>
</html>
03-12 內聯框架元素
<!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:WEBCaseweb03-01.html" target="myframe">表格的三個基本元素</a>  
<a href="file:///E:WEBCaseweb03-02.html" target="myframe">表格的標題和列頭</a>  
<a href="file:///E:WEBCaseweb03-06.html" target="myframe">表格列的美化</a>  
</p>
<hr />
<iframe src="file:///E:WEBCaseweb03-01.html" name="myframe" width="100%" height="600px"></iframe>
</body>
</html>
相关文章
- 智能手机如果十年不坏,你能坚持十年不换吗?
- 苹果正式放弃iTunes!如何将iPhone和iPad同步到Mac?
- Android 11 将推出系统试用功能,满意后再正式安装
- Mate 30 Pro正面对决iPhone 11 Pro Max:流畅度完胜
- 苹果历代iPhone能用几年?三个维度详细分析
- 5G元年,华为Mate30开启了怎样的手机进化战争?
- 一文看懂两款顶级芯片——苹果A13打得过麒麟990吗?
- iPhone 11是一次「下沉」还是「归位」?
- 小程序也可以跟踪托运行李,终于能知道你的行李到哪了
- 计算机组成原理:计算机的层次与编程语言
- 为什么「暗色模式」不应采用纯黑背景?这是谷歌的理由
- 谷歌正式推送Android 10.0正式版!
- Flutter与React Native针对移动开发的比较
- 更像iOS了?Android 10够猛 这波升级来感受下
- 全面了解B端产品设计:如何理解需求?
- 苹果屏蔽第三方电池,是真心为了用户考虑,还是霸道营销?
- 5G消息服务入口在哪,你可能想不到
- 不要对折叠屏iPhone和iPad期待过早
- 为什么你的语音助手说话不像人?关于TTS技术原理及挑战
- 全面了解B端产品设计:基础扫盲篇