深圳大学-Web开发和人机交互导论实验-表格与表格页面布局

纯粹的摆烂狗

于 2024-07-30 21:07:44 发布

阅读量325

点赞数 4

分类专栏：深圳大学-Web开发和人机交互导论实验文章标签：前端人机交互

本文链接：https://blog.csdn.net/qq_73179413/article/details/140806762

版权

深圳大学-Web开发和人机交互导论实验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务一

任务一代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>网络主题研讨会日程表</title>
		<style>
            h3 {
				font-size: 20px;
				color: white;
				padding: 10px 20px;
			}
			#div0 {
				background: #eaeaeb url('./images/images61-4.png') no-repeat 0px 0px;
				width: 820px;
				height: 550px;
				margin: 0 auto;
			}
			#div1 {
				width: 800px;
				height: 80px;
			}
			#row1 {
				background: #e9e7e7;
			}
			#row2 {
				background: #e3e3e3;
			}
			#td1 {
				background: #f0f0f0;
			}
			#td2 {
				background: #fbfbfb;
			}
			th {
				color: #666666;
			}
            .red-text{
                color: red;
            }
			a {
				background: url('./images/images61-3.png') repeat-x;
				width: 100px;
				height: 35px;
				text-align: center;
				float: right;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<div id="div1">
				<h3>报告内容</h3>
			</div>
			<table align="center" border="1" bordercolor="#cacaca" width="800px" height="420px">
				<tr style="line-height: 40px;" id="row1">
					<td colspan="3">
						<span class="red-text">会议平台不支持Windows XP系统，请大家使用Windows 7或Windows 8系统，IE或火狐浏览器登录</span><br><strong>报告主题：“持久性有机污染物分析技术”网络主题研讨会<a href="#">精彩回放</a></strong>
					</td>
				</tr>
				<tr id="row2" style="line-height: 35px;">
					<th>会议时间</th>
					<th>会议名称</th>
					<th>演讲人</th>
				</tr>
				<tr id="td2" style="line-height: 35px;">
					<td rowspan="6">2015年10月14日<br>09:30-17:00</td>
                    <td>中国二恶英排放清单研究</td>
                    <td>刘文彬 研究员（中国科学院生态研究中心）</td>
				</tr>
				<tr id="td1">
					<td>优化的PAHs和Dioxin分析仪在环境分析中的应用</td>
					<td>孔晔（安捷伦）</td>
				</tr>
				<tr id="td2">
					<td>LCMS在持久性有机污染物分析中的研究进展</td>
					<td>朱怀恩（SCIEX）</td>
				</tr>
				<tr id="td1">
					<td>质谱技术在持久性有机污染物的分析方法</td>
					<td>陈志凌（岛津）</td>
				</tr>
				<tr id="td2">
					<td>持久性有机污染物POPs的前处理技术</td>
					<td>苏丽评（莱伯泰科）</td>
				</tr>
				<tr id="td1">
					<td>极地持久性有机污染物研究进展</td>
					<td>张庆华 研究员（中国科学院生态研究中心）</td>
				</tr>
			</table>
		</div>
	</body>
</html>

任务一效果

在这里插入图片描述

任务二

任务二代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>江苏教育电子政务网</title>
    <style>
			h4 {
				color: red;
				padding: 0px auto;
                font-size:18px;
				height: 20px;
			}
			td {
				color: black;
				font-size: 18px;
			}
			tr {
				text-align: center;
			}
			p {
				text-indent: 2em;
				font-size: 18px;
				text-align: left;
			}
			#nav {
                font-size: 18px;
				text-align: center;
				width: 170px;
				height: 40px;
				margin: 0 auto;
				padding: 5px 20px;
				background-color: rgb(101, 120, 207)
			}
			#nav a{
				text-decoration: none;
				color: white;
			}
			a {
				text-decoration: none;
				color: black;
			}
    </style>
</head>
<body>
    <table align="center" width="1000px" bgcolor="white">
        <tr>
            <td colspan="3"><img src="./images/dzzw_banner_01.jpg" width="1000px"></td>
        </tr>
        <tr>
            <td colspan="3">
                <table rules="none">
                    <tr>
                        <td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7421/index.html">新闻资讯</a></td>
                        <td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7662/index.html">领导讲话</a></td>
                        <td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7426/index.html">成果展示</a></td>
                        <td id="nav"><a href="http://www.jsjyt.gov.cn">行政公文</a></td>
                        <td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7431/index.html">江苏教育网</a></td>
                        <td id="nav"><a href="http://www.jse.gov.cn">江苏教育信息网</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table rules="none" width="200px" height="250px">
                    <tr>
                        <td><a href="http://dzzw.jsjyt.edu.cn/col/col7421/index.html">新闻资讯</a></td>
                    </tr>
                    <tr>
                        <td><a href="http://www.jsjyt.gov.cn">行政公文</a></td>
                    </tr>
                    <tr>
                        <td><a href="http://dzzw.jsjyt.edu.cn/col/col7662/index.html">领导讲话</a></td>
                    </tr>
                    <tr>
                        <td><a href="http://dzzw.jsjyt.edu.cn/col/col7426/index.html">成果展示</a></td>
                    </tr>
                </table>
            </td>
            <td>
                <h4>2014年全省教育电子政务工作座谈会在宁召开</h4>
                <p>为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。</p>
            </td>
            <td>
                <h4>国务院：运用大数据提高政府服务水平</h4>
                <p>近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。<br>《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。</p>
            </td>
        </tr>
        <tr>
            <td colspan="3" height="35px" align="center">
                <hr>
                江苏省电子政务中心&nbsp;&nbsp;版权所有<br />
                地址：南京市北京西路15号 联系电话：025-63335653<br />
                苏ICP备：10205850<br />
            </td>
        </tr>
    </table>

</body>
</html>

任务二效果

在这里插入图片描述

实验结论

1.表格是一种常见且重要的数据展示方式，在Web开发中广泛应用。
2.HTML提供了丰富的标签和属性来创建和布局表格，使其具备结构化和语义化的特性。
3.使用CSS样式和布局技巧可以为表格增加美观的外观，提高可读性和用户体验。

纯粹的摆烂狗

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
深圳大学-Web开发和人机交互导论实验-表格与表格页面布局

任务一任务一代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网络主题研讨会日程表</title> <style> h3 { font
复制链接

扫一扫

专栏目录