网页设计（六）表格与表格页面布局
一、设计《TF43: 前端的发展与未来》日程表
《TF43: 前端的发展与未来》日程表
文字素材：
前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。
今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。
<!-- prj_6_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TF43: 前端的发展与未来-日程表 </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#div0 {
width: 720px;
height: 626px;
margin: 0 auto;
position: relative;
}
p {
text-indent: 2em;
}
#div2 {
width: 200px;
height: 40px;
background-color: #0000CC;
color: white;
position: absolute;
top: 180px;
left: -35px;
}
h3 {
font-size: 20px;
color: white;
padding: 10px 20px;
font-family: 微软雅黑;
}
table {
font-size: 12px;
width: 720px;
height: 420px;
}
.row1 {
background: #E1E1E1;
text-align: center;
}
#row2 {
background: #E3E3E3;
}
#td1 {
text-align: center;
}
</style>
</head>
<body>
<div id="div0" class="">
<div id="div1">
<h2 align="center">TF43: 前端的发展与未来论坛</h2>
<p>前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。</p>
<p>今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。</p>
</div>
<div id="div2" class="">
<h3>CCF TF 技术前线</h3>
</div>
<table align="center" border="1" cellspacing="0px">
<tr class="row1" height="82px">
<td colspan="3">
<div>
<p> 只为技术专家 </p>
<p> CCF TF第43期 </p>
<p> 主题 前端的发展与未来 </p>
<p> 2021年7月31日 9:00-17:30 </p>
<p> 中科院计算所 四层报告厅（北京海淀区科学院南路6号） </p>
</div>
</td>
</tr>
<tr id="row2 " height="35px">
<th>会议时间</th>
<th>演讲人</th>
<th>会议名称</th>
</tr>
<tr>
<td id="td1">09:00-09:10</td>
<td>张高 CCF TF前端SIG主席</td>
<td>开场致辞</td>
</tr>
<tr>
<td id="td1">09:10-10:05</td>
<td>姜凡 淘系技术部前端团队负责人,阿里巴巴经济体前端技术委员会主席</td>
<td>《淘系前端价值体系的思考》</td>
</tr>
<tr>
<td id="td1">10:05-11:00</td>
<td>月影 字节跳动技术中台前端团队负责人,ByteTech和掘金社区负责人</td>
<td>《技术社区与职业成长》</td>
</tr>
<tr class="row1">
<td id="td1">11:05-11:10</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td id="td1">11:10-12:05</td>
<td>贺师俊（hax） 开放原子开源基金会TOC成员,Ecma-TC39特邀专家</td>
<td>《我们如何参与JS语言标准的制定》</td>
</tr>
<tr class="row1">
<td id="td1">12:05-13:30</td>
<td colspan="2">午餐</td>
</tr>
<tr>
<td id="td1">13:30-14:25</td>
<td>赵锦江 Shopee新加坡前端委员会负责人</td>
<td>《从海外视角看前端团队的组织与发展》</td>
</tr>
<tr>
<td id="td1">14:25-15:20</td>
<td>杨永林 贝壳如视技术中心负责人,如视工程部负责人</td>
<td>《前端三维技术的应用前景》</td>
</tr>
<tr class="row1">
<td id="td1">15:20-15:30</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td id="td1">15:30-16:25</td>
<td>周鹏 软件与体验部 高级前端工程师/小米集团技术委前端技术委员会 委员</td>
<td>《前端在“手机xAIoT”领域的探索》</td>
</tr>
<tr class="row1">
<td id="td1">16:30-17:30</td>
<td colspan="2">圆桌论坛</td>
</tr>
</table>
</div>
</body>
</html>
二、简易电子政务网
文字素材：
全省教育电子政务工作座谈会在宁召开
为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。
国务院：运用大数据提高政府服务水平
近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。
《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。
简易电子政务中心 ©版权所有
地址：太空市南京南路280号 联系电话：99-99999999
苏ICP备：20220116002
简易电子政务网初始首页（未应用样式）
<!-- prj_6_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易电子政务网 </title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
table {
margin: 0 auto;
}
#header {
background: url(pro62/logo.jpg) no-repeat center center;
}
h4 {
color: red;
padding: 10px auto;
height: 30px;
}
td {
color: black;
font-size: 20px;
}
tr {
text-align: center;
}
p {
text-indent: 2em;
font-size: 18px;
text-align: left;
}
#nav {
text-align: center;
width: 100%;
height: 54px;
}
a {
display: inline-block;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: white;
background: #666699;
}
#nav td a:hover {
color: white;
background: #9999ff;
font-weight: blod;
transform: rotate(360deg);
/* 旋转360度 */
transition: all 0.3s;
/* 在所有属性上过度0.3s */
}
td table tr td a:hover {
border-bottom: 5px solid white;
}
#left,
#right {
margin: 15px 10px;
}
</style>
</head>
<body>
<table border="0" width="1002px" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="3" height="219px" id="header"></td>
</tr>
<tr height="50px">
<td colspan=3>
<table border="0" width="100%" width="100%" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
<tr id=nav>
<td><a href="#">新闻资讯</a></td>
<td><a href="#">领导讲话</a></td>
<td><a href="#">行政公文</a></td>
<td><a href="#">成果展示</a></td>
<td><a href="http://www.edu.cn">中国教育网</a></td>
<td><a href="#">教育信息网</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="250px">
<table width="150px" height="100%" border="0" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
<tr>
<td><a href="#">新闻资讯</a></td>
</tr>
<tr>
<td><a href="#">行政公文</a></td>
</tr>
<tr>
<td><a href="#">领导讲话</a></td>
</tr>
<tr>
<td><a href="#">成果展示</a></td>
</tr>
</table>
</td>
<td width="400px">
<div id="left">
<h4>全省教育电子政务工作座谈会在宁召开</h4>
<p>为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。
</p>
</div>
</td>
<td>
<div id="right">
<h4>国务院：运用大数据提高政府服务水平</h4>
<p>近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。</p>
<p> 《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。
</p>
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center" height="35px">
<hr color="#c0c0c0">
简易电子政务中心 ©版权所有<br>
地址：太空市南京南路280号 联系电话：99-99999999<br>
苏ICP备：20220116002<br>
</td>
</tr>
</table>
</body>
</html>
三、课外拓展训练
1.设计新书推荐页面
(1)页面标题：“新书推荐”。
(2) 书简介内容如下。
数学的世界 I 作者: J.R. 纽曼 编， 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血， 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...
现代教育技术 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。
《生态智慧——生态可持续性》 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本）。
中国工程院院士（11） 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身。
<!-- project_6_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新书推荐</title>
<style type="text/css">
img {
width: 150px;
height: 200px;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px" bordercolor="#f0f0f0">
<tr>
<td colspan="4">
<h4>总编推荐</h4>
</td>
</tr>
<tr>
<td><img src="kwtz61/image61.jpg"></td>
<td>
<h4>数学的世界 I</h4>
<p>作者: J.R. 纽曼 编， 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血， 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p>
</td>
<td><img src="kwtz61/image62.jpg"></td>
<td>
<h4>现代教育技术</h4>
<p> 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。</p>
</td>
</tr>
<tr>
<td><img src="kwtz61/image63.jpg"></td>
<td>
<h4>《生态智慧——生态可持续性》</h4>
<p> 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本 ...</p>
</td>
<td><img src="kwtz61/image64.jpg"></td>
<td>
<h4>中国工程院院士（11）</h4>
<p> 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身 ... </p>
</td>
</tr>
</table>
</body>
</html>
2.采用表格布局设计区域划分页面
<!-- project_6_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格布局实训</title>
<style type="text/css">
table {
margin: 0 auto;
}
#td1 {
background: #F1E2D3;
height: 200px;
}
#td2 {
background: red;
height: 50px;
width: 100%;
}
#tr3 {
background: #F1F1F1;
height: 290px;
}
#td4 {
background: #E1F1F3;
height: 60px;
}
td {
text-align: center;
vertical-align: middle;
font-size: 36px;
}
a {
color: white;
}
a:link,
a:visited,
a:active {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<table width="1000px" height="600px" border="5px">
<tr>
<td id="td1" colspan="4">logo</td>
</tr>
<tr>
<td id="td2" colspan="4">
<table width="100%" height="100%">
<tr>
<td><a href="#">menu1</a></td>
<td><a href="#">menu2</a></td>
<td><a href="#">menu3</a></td>
<td><a href="#">menu4</a></td>
<td><a href="#">menu5</a></td>
<td><a href="#">menu6</a></td>
</tr>
</table>
</td>
</tr>
<tr id="tr3">
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td id="td4" colspan="4">footer</td>
</tr>
</table>
</body>
</html>
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
热门相关：拳罡 恶明 重生隐婚：Hi，高冷权少！ 惹火甜妻：老公大人，宠上瘾！ 天河大帝