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

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-


相关文章:
01.第一章 HTML基本标签及表格标签分析_图文.ppt
一流的培训基地 第一章 HTML基本标签、字体设置 标签、表格标签 本章学习任务 ...正文结束标签 //HTML结束标签 网页正文 </body> </html> 注意事项与练习 ? ...
HTML语言基础练习题.doc
HTML语言基础练习题 - 第一部分:基础词汇 1、单词 head,头 char
HTML专项练习题.doc
HTML专项练习题 - 有关HTML的一些练习题,有一定的难度... HTML 常用标记练习试题一、选择题 6.关于表格的描述...</div> 9.下面哪一项是换行符标签?() D.<p>...
《HTML基础试题》.doc
HTML基础试题》 - 《HTML基础试题》里面包含常用到的一些HTML试题考点及经典用法。... 2. HTML 表格有 3 个基本组成部分:行、列和: ___ 。 3.HTML 文档标...
html练习题答案.doc
结束标签 C.Html 就是超文本标记语言的简写,是最基础的网页语言 D.标签的属性...head><body></body></html> D 24 题干 HTML 语言中,设计中文字与表框...
零基础学习PHP-HTML的表格标签_图文.pdf
基础学习PHP-HTML表格标签 - 兄弟连PHP视频教程,专注PHP教程,提供专业的php视频教程下载。PHP基础教程-零基础学习PHP-PHP基础教程-兄弟连PHP教程。lampbrot...
1-HTML基础应用之table表格入门到精通.doc
HTML 基础应用之 table 表格入门到精通表格是在论坛做帖的重要武器。这原因是,...以下是一个完整的表格标签代码框架,为了能够一目了然,各元 素尚未引入它们的...
HTML练习题.pdf
35.主页中一般包含的基本元素有(A ) A 超级链接 C 声音 D 表格 B 图像 ...11. 文件头标签也就是通常所见到的 标签。 <head> 12 .创建一个 HTML 文档...
HTML及网页制作练习题-完整版.pdf
以下几种基本元素(ABCD ) A.文本(Text) B.图像(Image) C.表格(Table) D....种特殊的HTML网页 30关于标签,以下说法不正确的是(BC) Ainput 标签用于设定...
HTML基本标签_图文.ppt
HTML基本标签 本门课程目标学完本门课程后,你能够:了解常用的HTML标签; 利用...表格标签 练习基本标签需求说明:实现简单的商品购买页分析应使用哪些 标签? ...
HTML及网页制作练习题-完整版..doc
以下几种基本元素(ABCD ) A.文本(Text) B.图像(Image) C.表格(Table) D....种特殊的HTML网页 30关于标签,以下说法不正确的是(BC) Ainput 标签用于设定...
html练习题.doc
.type="reset" C.type="image" D.type="button" 2、在以下 HTML 中,表 ...5. 文件头标签包括关键字、描述、 编码 、基础和链接等。 6. “高级”CSS ...
HTML练习.pdf
表格的宽度可以用百分比和 两种单位来设置。 用来输入密码的表单域是 文件头标签...html基本语法上机练习 4页 免费 HTML试题及答案 26页 5下载券 HTML期末复习...
HTML试题及答案.doc
A 框架对整个窗口进行划分 C 表格比框架更有用 HTML 练习题 1(填空题) 二...文件头标签包括关键字、描述、 编码 、基础和链接等。 RGB 方式表示的颜色都是...
网页设计HTML表格基础与布局_图文.ppt
标签: 网页设计| 布局| 网页设计HTML表格基础与布局_IT/计算机_专业资料。网页设计 HTML 表格基础与布局 表格基础与布局 LOGO 本课内容 1、表格标记基础 2、...
web开发基础练习题_图文.ppt
web开发基础练习题 - HTML HTML概念 ? HTML(Hyper Te
HTML语言基础练习题.doc
HTML语言基础练习题 - 如对你有帮助,请购买下载打赏,谢谢! 第一部分:基础词汇 1、单词 head,头 character,字符 textarea,文本域 body,身体 c...
第四讲:HTML实现表格_图文.ppt
第四讲:HTML实现表格 - Dreamweaver设计与制作/HTML 第四讲 HTML 语法-表格基础 信息管理系刘锴 回顾 HTML标签区分大小写吗? HTML基本结构并说明各...
html基础第二天模板_图文.ppt
html基础第二天模板 - Html基础 Html 复习 -html概念:hyper Text Markup Language (超文本标记语 言) -Html标签分类:1双标签 2 单标签...
HTML练习题.doc
HTML 中,下面()不属于 HTML 文档的基本组成部分...19) 在 HTML 中,下面()标签用于定义表的行。 a...(选择一项) a)<HEAD>HTML 练习<HEAD> b)<TITLE...