实验三+用HTML表格进行网页排版
02.HTML_常用标记、使用表格实现网页布局
TR属性
Width,height Align:left,center,right Valign:bottom,middle,top
TD属性
Width,height Align valign
合并单元格
Co--->
练习
上课示例代码重新写一次 用表格模拟网页布局：整个页面分为四块， 最上面一块放置logo，左边放置链接，右边 显示内容，最下面放置版权声明
总结
特殊字符标记 图像标记 HR标记 滚动字幕 列表标记 超链接 表格标记 注释
下一讲内容
表单 表单控件
谢谢!
HR 标记
<hr width=“” size=“” align=“” color=“” noshade=“”/>
滚动字幕
<marquee ></marquee> 属性：
Direction :内容滚动方向，值： left,right,up,down Scrollamount:滚动速度 Behavior:滚动方式,值： scroll,alternate,slide,loop Scrolldelay:时间间隔 Bgcolor，width，height
表格<table> 标题<caption></caption> 表头<thead></thead> 表身<tbody></tbody> 表尾<tfoot></tfoot> </table>
TBODY
表身<tbody> 行<tr> 单元格<td></td> </tr> </tbody>
工作报告之html网页制作实验报告
html网页制作实验报告【篇一：html实验报告】武夷学院实验报告课程名称：电子商务网站设计与开发_ 项目名称：_基于html的网页设计姓名：林元卿专业：旅游管理班级：3班学号：20136031005实验操作成绩（百分制）__________ 实验指导教师签字：__________）实验报告成绩（百分制）__________ 实验指导教师签字：__________【篇二：html标记的综合应用网页设计实验报告】学生实验报告学院：软件与通信工程学院课程名称：网页设计基础专业班级： 08软件与通信工程学院4班姓名：陈贝贝学号： 0088225学生实验报告一、实验综述1、实验目的及要求实验目的：通过用html语言进行编辑，使学生了解网站的制作流程；了解html表单标记的应用；了解html表格标记的应用；掌握html的基本概念、文档的基本结构；掌握html文档的结构、html设计文字排版；掌握html插入多媒体；掌握html基本标记，包括标题、背景图片、图像、水平线、字体编辑、段落、超链接、文本堆砌等的使用方法。
熟练掌握html中的常用标记的名称及用途。
熟练掌握对html语言文字结构的理解；掌握各种元素的使用；熟练掌握图片、动画、声音的嵌入以及超级连接的控制和应用，结合实际，巩固课堂中所学的理论知识。
实验要求：以个人独立完成的方式，完成一个用html语言进行编辑的网页制作，实现一个具有独立主题的网页制作。
2、实验仪器、设备或软件带ie浏览器的计算机，windows的写字板、记事本。
二、实验过程（实验步骤、记录、数据、分析）step1：设计网站logo，网站的标准色彩，并且确定网站主题和网站栏目，一切设计完成后开始构建页面。
我定义的主题是个人网站，所以主要突出自己的个性特质。
logo是sky dream，寓意是我的梦游园。
色彩主页是以蓝色为主，强调梦感。
栏目分为主页，日志（我的印记），相册（美丽瞬间），个人档案（我的万花筒），心情（我的叨叨）和留言板（留言星星河）。
用HTML语言制作简单的网页
电子科技大学电子工程学院标准实验报告（实验）课程名称用HTML语言制作简单的网页电子科技大学教务处制表电子科技大学实验报告学生姓名：万羽学号：2902103035 指导教师：伍瑞钦一、实验室名称：科B457二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。
（3）超链接是网页中的特殊标记。
它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上，也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。
在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。
保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。
HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。
头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPageFrontPage是一种简单易学的Web管理和网页制作的软件。
使用html编制网页(实验报告)
实验三使用HTML语言编制网页
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
使用HTML语言编制网页。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML网页。
【实验步骤】
1，新建一个HTML文件，插入一个的表格，按照自己的设计对表格进行合并以及尺寸的修改，如进行单元格的合并。
2，按照自己的设计，在表格的相应位置插入图片，并根据表格的大小，适当的调整图片的比例，使图片和表格比例和谐。
3，在代码段中插入文字，使之显示在网页中，并根据表格的大小，适当调整文字，并对文字进行设置，达到自己想要的效果。
4，制作链接。
给一张图片添加连接。
【实验结果】
【实验心得和体会】
本次试验用上次试验的一部分代码。
然后增加了给一个图片添加超链接的功能。
用<h1>标签来定义一个标题。
用<P>标签来定义一段文字。
html表格布局实例讲解
HTML表格布局实例讲解这篇文章主要为大家详细介绍了HTML表格布局简单实例，HTML表格布局是HTML入门学习中的基础知识，感兴趣的小伙伴们可以参考一下.HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。
但是，我们所见到的Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素<div> 或表格（<table>）来布局Web 页面的内容。
使用表格进行布局，是一种较老的布局解决方案。
并不推荐使用，我们应该总是使用表格来显示表格化的数据。
HTML 文档<!DOCTYPE html>2.<html lang="en">3.<head>4. <meta charset="UTF-8">5. <!-- 链接到外部样式表-->6. <link rel="stylesheet" href="css/mystyle.css">7. <title>Island estaurant</title>8.</head>9.<body>10. <table id="container">11. <!-- 头部-->12. <tr>13. <td id="header" colspan="2">14. <h1>点菜系统</h1>15. </td>16. </tr>17. <!-- 主体-->18. <tr>19. <!-- 菜单-->20. <td id="menu">21. <b>菜品</b><br>22. <div id="dishes">23. 小鸡炖蘑菇<br>24. 家常豆腐<br>25. 酸辣土豆丝<br>26. </div>27. </td>28. <!-- 内容-->29. <td id="content">30. 小鸡炖蘑菇：<br>31. 幼鸡一只32. </td>33. </tr>34. <!-- 尾部-->35. <tr>36. <td id="footer" colspan="2">世俗孤岛的餐厅</td>37. </tr>38. </table>39.</body>40.</html>41.CSS 文件1./*整个点餐系统的界面*/2.#container3.{4. width: 600px;5. margin: 100px;6. /*取消单元格边框之间的边距*/7. border-spacing: 0;8.}9./*点餐系统界面的头部*/10.#header11.{12. background-color: red;13. text-align: center;14.}15.h116.{17. margin-bottom: 0px;18.}19./*点餐系统界面的菜单*/20.#menu21.{22. background-color: #FFD700;23. height: 200px;24. width: 150px;25.}26.#dishes27.{28. padding-top: 10px;29. padding-left: 10px;30. line-height: 20px;31.}32./*点餐系统界面的菜品详情*/33.#content34.{35. background-color: gray;36. height: 200px;37. width: 450px;38.}39./*点餐系统界面的尾部*/40.#footer41.{42. background-color: blue;43. height: 25px;44. text-align: center;45.}。
HTML语言 使用TABLE排版
本篇先介绍一个如何 table 进行排版。
对于没有基础的朋友来说，使用 table 排版是最为简单易行的。
Table 排版可以理解为，将整个网页放在一个大的表格内。调正没个单元格的大小，使其在
合适的位置，显示需要显示的内容。最后将表格的边框宽度设为 0（即 border = “0”，默认
为 1）。
Table 的一般格式如下：
以上为整个 table 的事例。
读者很容易猜到，在<table width="960" height="500" border="1">处，定义了 table 的长 和高，以及表格边框的宽度。除了这三个属性之外，还有一个重要的属性就是定义表格背景
色，可以将其定义为一个不同于网页的颜色，可以在<table>中填写代码 <table bgcolor = “red”>（将背景色设为红色为例）。
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> </table>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
HTML5+CSS3网页设计与制作实用教程单元3 表格应用与制作购物车页面
进行美化。
网页030101.html. 的浏览效果如图3-2 所示。
图3-2 网页030101.html. 的浏览效果
【任务3-1-1】在网页中插入与设置表格
任 务 实 施
1．创建网页文档且保存
在站点“易购网”中创建文件夹“03 表格应用与制作购物车页面”，在该文件夹中创 建文件夹“0301”，并在文件夹“0301”中创建子文件夹“CSS”和“image”，将所需要的图 片文件拷贝到“image”文件夹中。 在【文件】面板中，用右键单击文件夹“0301”， 在弹出的快捷菜单中选择菜单命令【新建文件】，如图
3-6 所示。
图3-6
表格标题行的属性设置
【任务3-1-1】在网页中插入与设置表格
5．设置表格第2行至第9行的行高
将鼠标指针指向表格的第2 行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键
拖动鼠标到第9 行，选中第2 行至第9 行。然后在表格【属性】面板的“高”文本框中输入“25”。
6．设置表格各列的对齐方式 将鼠标指针指向表格的第1 列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
图3-5 9 行4 列表格的属性设置
【任务3-1-1】在网页中插入与设置表格
4．设置表格第1行的属性 （1）选择表格行
将鼠标指针指向表格的第1 行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
左键即可选中该行。 （2）设置表格行的属性 设置表格第1 行的水平对齐方式为“居中对齐”，垂直对齐方式为“居中”，在“高”文 本框中输入“30”，选中“标题”复选框，其他属性保持其默认值，第1 行对应的属性设置如图
表格便插入到网页中。 （6）保存网页中所插入的表格。
图3-4
HTML——使用表格进行页面布局
HTML——使⽤表格进⾏页⾯布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格布局</title></head><body bgcolor="white" leftmargin="0" topmargin="0"><!--外层表格開始--><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center"><!--中层表格開始--><table width="800" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0"><tbody><tr align="center"><!--内层表格開始--><table width="600" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="200"/></td></tr><tr height="50"><td colspan="3">username：______ password：______</td><td colspan="2" align="right"><a href="">帮助</a></td></tr><tr height="2"><td colspan="5" background="⿊线.png"</td></tr><tr valign="top"><td width="140"><h3 align="center">你喜欢海吗</h3><ul><li>写信告诉我今天</li><li>海是什么颜⾊</li><li>夜夜陪着你的海</li><li>⼼情⼜如何</li><li>灰⾊是不想说</li><li>蓝⾊是忧郁</li><li>⽽漂泊的你</li><li>狂浪的⼼</li><li>停在哪⾥</li></ul></td><td width="1" background="⿊线.png"></td><td width="300"><h3 align="center">我爱的⼤海</h3><img src="20120804021257_W3hWC.jpg" width="300" height="300"/><h3 align="center">你在哪呢</h3><ul><li>写封信给我就当最后约定</li><li>说你在离开我的时候是如何的⼼情</li></ul></td><td width="1" background="⿊线.png"></td><td width="140"><h3 align="center">你会喜欢的</h3><ul><li>写信告诉我你想要</li><li>梦什么</li><li>梦⾥外的我是否</li><li>都让你⽆从选择</li><li>我揪着⼀颗⼼</li><li>整夜都闭不上眼睛</li><li>为何你明明动了情</li><li>却⼜不靠近</li></ul></td></tr><tr><td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="100" /></td></tr><tr height="40"><td colspan="5" align="left">版权全部，翻录必究 ©1999-2014</td> </tr></tbody></table><!--内层表格结束--></td></tr></tbody></table><!--中层表格结束--></td></tr></tbody></table><!--外层表格结束--></body></html>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验内容:
1.创建名为ex3的文件夹，在该文件夹里面创建一个网页文件sales.html，网页的标题为“ACME公司2013年销售输入”，使用HTML 4 Transitional文档类型声明，使用合适的表格标记及属性显示ACME公司2013的5种产品4个季度的销售额。显示效果如下（单元格数据为随机值）：
<html xmlns="/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ACME公司2013年销售输入</title>
</head>
<body>
<table border="1">
<tr>
<th>产品/季度</th>
三实验步骤
第一题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en">
</tr>
<tr>
<td><label for="suggestion">您的建议：</label></td>
<td><textarea name="suggestion" id="suggestion"cols="45" rows="5">请留下您的宝贵意见</textarea></td>
</tr>
<body>
<h1>请正确填写您的个人信息，以方便我们及时与您联系！！！！</h1>
<form id="form1" name="form1" method="post">
<table>
<tr>
<td><label for="username">姓名：</label></td>
<td><input type="text" name="username" id="username"/></td>
<td><input type="password" name="pass2" id="pass2"/></td>
</tr>
<tr>
<td><label for="sex">性别：</label></td>
<td><input type="radio" name="sex" id="radio" value="radio">男
<tr>
<th>X-Super</th>
<td>32345</td>
<td>34655</td>
<td>4345</td>
<td>34534</td>
</tr>
<tr bgcolor="#66FFCC">
<th>Compact2x</th>
<td>234324</td>
<td>7876</td>
<td>53434</td>
产品/季度
一季度
二季度
三季度
四季度
Helix
20000
565454
5654
334543
X-Super
32345
34655
4345
34534
Compact2x
234324
7876
53434
43543
MiniXooper
7867
5465
6763443
354366
2.使用表格对教材64页图2-26的表单使用表格进行布局，保存为profile.html。
3.使用W3C在线HTML验证工具验证上述文档的合法性，修改验证结果中出现的错误。
实验要求：
（1）需要每个同学独立完所有的实验步骤，
（2）要求使用label标记对相关的表单元素进行说明，即：<label for=”elementId”>Label</label>
（3）下课之前将实验报告的电子文档提交至教学平台。
<label><input type="radio" name="degree[]" id="radio5" value="bs"/>学士及以下</label>
</td>
</tr>
<tr>
<td>您的头像:</td>
<td><input type="image" src="image/55.jpg"name="imgael"alt="您的头像"/></td>
<option selected="selected">18-35岁</option>
<option>36-50岁</option>
<option>50岁以上</option>
</select>
</td>
</tr>
<tr>
<td>最喜爱的语言:</td>
<td>
<label><input type="checkbox" name="html-lang">HTML</label>
</tr>
<tr>
<td><label for="pass">密码：</label></td>
<td><input type="password" name="pass"id="pass"/></td>
</tr>
<tr>
<td><label for="pass2">确认密码：</label></td>
<label><input type="checkbox" name="css-lang">CSS</label>
<label><input type="checkbox" name="js-lang">Javascript</label>
</td>
</tr>
<tr>
<td>最高学历：</td>
<td>
<tr>
<td>您的上传：</td>
<td>
<input type="file" name="document" size="20" maxlength="500"/></p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="button" id="button" value="提交"/>
<td>43543</td>
</tr>
<tr>
<th>MiniXooper</th>
<td>7867</td>