当前位置:首页 >> 电脑基础知识 >>

HTML基础标签-表格练习

《前端开发基础》

专业:

学号:

姓名:

实 验 实验二 Html 基本标签—表格 名称

实 验 掌握 html 表格的创建和设置方法;使用表格显示数据;使用表格实现页面布局 目的

1、表格基础结构

<table>

<tr>

<td>第 1 个单元格的内容</td> <td>第 2 个单元格的内容</td>

......

</tr>

<tr> <td>第 1 个单元格的内容</td> <td>第 2 个单元格的内容</td>

......

</tr>

</table>

2、表格标签

标签

描述

知 识 <table> 提 示 <th>

定义表格 定义表格的表头。此 th 元素内部的文本通常会呈现为粗



<tr>

定义表格的行

<td>

定义单元格

<caption>

定义表格标题

<colgroup>

定义表格列的组

<col>

定义用于表格列的属性

DQ 2018-03-05

-1-

<thead> <tbody> <tfoot> 3、表格属性

《前端开发基础》
定义表格的页眉 定义表格的主体 定义表格的页脚

效果图:
实 验 内 容
效果图:

项目 1:简单表格制作
思考:如何去除单元格间的间隔,如何实现细线表格 项目 2:不规则表格制作

DQ 2018-03-05

-2-

《前端开发基础》
部分参考代码:

效果图:

项目 3:表格布局实现-表格嵌套表单-商品信息展示

参考网格线:

DQ 2018-03-05

-3-

参考代码:

《前端开发基础》

效果图:

项目 4:表格布局实现-表单嵌套表格-注册页面

框线参考图:

部分参考代码:

DQ 2018-03-05

-4-

《前端开发基础》

课后思考练习: 效果图:

项目五:分组标签实现数据报表

表格数据的分组标签<thead>、<tbody>、<tfooter>配合使用,对报表数据进行逻辑分组 参考代码:

项目 6:表格实现整体页面布局 分析学院旧版页面,如何用表格布局自己的页面。

DQ 2018-03-05

-5-

《前端开发基础》

实验 总结 教师 评阅

DQ 2018-03-05

-6-


相关文章:
HTML语言基础练习题.doc
HTML语言基础练习题 - 第一部分:基础词汇 1、单词 head,头 char
网页设计HTML表格基础与布局_图文.ppt
标签: 网页设计| 布局| 网页设计HTML表格基础与布局_IT/计算机_专业资料。网页设计 HTML 表格基础与布局 表格基础与布局 LOGO 本课内容 1、表格标记基础 2、...
《HTML基础试题》.doc
HTML基础试题》 - 《HTML基础试题》里面包含常用到的一些HTML试题考点及经典用法。... 2. HTML 表格有 3 个基本组成部分:行、列和: ___ 。 3.HTML 文档标...
对口升学HTML练习表格标签.doc
对口升学HTML练习表格标签_化学_自然科学_专业资料。我从事计算机对口升学7年的经验,分析口升学高考出题习惯和思路,自己总结出来的关于HTML知识的习题!比较有针对...
HTML及网页制作练习题-完整版.pdf
以下几种基本元素(ABCD ) A.文本(Text) B.图像(Image) C.表格(Table) D....种特殊的HTML网页 30关于标签,以下说法不正确的是(BC) Ainput 标签用于设定...
HTML专项练习题.doc
HTML专项练习题 - 有关HTML的一些练习题,有一定的难度... HTML 常用标记练习试题一、选择题 6.关于表格的描述...</div> 9.下面哪一项是换行符标签?() D.<p>...
01.第一章 HTML基本标签及表格标签分析_图文.ppt
一流的培训基地 第一章 HTML基本标签、字体设置 标签、表格标签 本章学习任务 ...正文结束标签 //HTML结束标签 网页正文 </body> </html> 注意事项与练习 ? ...
html练习题.doc
.type="reset" C.type="image" D.type="button" 2、在以下 HTML 中,表 ...5. 文件头标签包括关键字、描述、 编码 、基础和链接等。 6. “高级”CSS ...
html练习题答案.doc
结束标签 C.Html 就是超文本标记语言的简写,是最基础的网页语言 D.标签的属性...head><body></body></html> D 24 题干 HTML 语言中,设计中文字与表框...
HTML练习题.doc
〈caption 表格〉 C.〈head〉 D.〈html〉 27、(...文本或图片居中 58、创建最小的标题的文本标签是( ...html习题 18页 1下载券 HTML基础练习题 84页 5...
HTML制作表格_图文.ppt
HTML制作表格 - HTML 表格制作 制作人:追梦天马 本章目标 ? 会使用表格基本结构实现简单表格 ? 会使用表格相关标签实现跨行、跨列的复杂表格 ? 会使用表格...
WEB编程基础练习题及答案.doc
标签: 编程基础| WEB编程基础练习题及答案_IT/计算机_专业资料。WEB 编程基础...标注文本以原样显示的是<PRE></PRE> B 13、HTML 表格在默认情况下没有边框...
html基础第二天模板_图文.ppt
html基础第二天模板 - Html基础 Html 复习 -html概念:hyper Text Markup Language (超文本标记语 言) -Html标签分类:1双标签 2 单标签...
HTML5前端页面开发基础表格_图文.ppt
HTML5前端页面开发基础表格 - WEB与 HTML5 知识点 与开发要素 。... 标签: 页面| HTML5前端页面开发基础表格_互联网_IT/计算机_专业资料。WEB与 HTML5 知识点...
HTML第一部分练习题.pdf
〈p〉 B.〈html〉 C.〈table(表格)〉 15、一...文本或图片居中 58、创建最小的标题的文本标签是( ...HTML基础练习题 84页 5下载券 第一部分html篇 90...
零基础学习PHP-HTML的表格标签_图文.pdf
基础学习PHP-HTML表格标签 - 兄弟连PHP视频教程,专注PHP教程,提供专业的php视频教程下载。PHP基础教程-零基础学习PHP-PHP基础教程-兄弟连PHP教程。lampbrot...
对口升学HTML练习 表单和框架.pdf
对口升学HTML练习 表单和框架 - HTML 练习三 表单和框架 一、单选题 跨多行表格是在单元格里用哪个属性进行设置( C. colspan D. tr二、多选题 )A....
1-HTML基础应用之table表格入门到精通.doc
HTML 基础应用之 table 表格入门到精通表格是在论坛做帖的重要武器。这原因是,...以下是一个完整的表格标签代码框架,为了能够一目了然,各元 素尚未引入它们的...
html练习题.doc
C.Html 就是超文本标记语言的简写,是最基础的网页语言 D.标签的属性必须使用...head><body></body></html> 24 题干 HTML 语言中,设计中文字与表框距离的...
网页设计HTML表格基础与布局_图文.ppt
网页设计HTML表格基础与布局 - 表格基础与布局 LOGO 本课内容 1、表格标记基础 2、表格布局及应用 3、HTML总结及编写注意事项 带着求知好学的态度,超越自己,完善...
更多相关标签: