HTML表格和列表笔记练习!DOCTYPE html html lang=en head meta charset=UTF-8 title关于表格的一些练...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于表格的一些练习</title> 注释:2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后(在table标签里包括),这个表格就要等表格内容全部下载完才会显示 </head><body><p>一个普通基本的表格</p><table border="5" bgcolor="#ffe4c4" background="sun.html" cellpadding="10" cellspacing="10" width="100%" height="200px"><h2>以上属性依次为 边框宽度 背景色 背景图案 字符距边框距离 边框间距 表格宽度 表格像素大小</h2> <caption>我的标题</caption> 注释:这是表格标题元素 <tr background="blue"> <th align="left">姓名</th> <th align="right">电话</th> 注释:表格格式是行元素标签<tr>包括列元素标签<td>其中一种特殊的表头元素标签<th>作为基本的元素标签优先级与列元素标签相同 <th align="">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table><p>一个带有页眉页脚的表格</p><table border="1"> <!--页眉(thead)页脚(tfoot)和(tbody)必须一起使用--> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody></table><h4>横跨两列的单元格:</h4><table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table> <h4>横跨两行的单元格:</h4><table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table> </body></html> 表格标签中的定义表格列组属性的标签<colgroup> 与其类似的定义一个或多个列的属性标签<col> 两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式(注意第一个 colgroup 元素横跨两列):
<table width="100%" border="1"><colgroup span="2" align="left"></colgroup><colgroup align="right" style="color:#0000FF;"></colgroup><tr><th>ISBN</th><th>Title</th><th>Price</th></tr><tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr> </table>
亲自试一试
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
所有主流浏览器都支持 <colgroup> 标签。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
定义和用法
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。
如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。
HTML 与 XHTML 之间的差异
NONE
提示和注释:
提示:请为 <colgroup> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
注释:col 元素是仅包含属性的空元素。如需创建列,您就必须在 tr 元素内部规定 td 元素。
参见:<col> 标签。
可选的属性
属性 | 值 | 描述 |
---|---|---|
align |
|
定义在列组合中内容的水平对齐方式。 |
char | character | 规定根据哪个字符来对齐列组中的内容。 |
charoff | number | 规定第一个对齐字符的偏移量。 |
span | number | 规定列组应该横跨的列数。 |
valign |
|
定义在列组合中内容的垂直对齐方式。 |
width |
|
规定列组合的宽度。 |
关于列表:列表标签三种:无序列表<ul>有序列表<ol>定义列表<dl>
标签 | 描述 |
---|---|
<ol> | 定义有序列表。 |
<ul> | 定义无序列表。 |
<li> | 定义列表项。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义项目。 |
<dd> | 定义定义的描述。 |
一般形式(有序列表)
转载于:https://www.cnblogs.com/kylin-zhang/p/6088577.html
HTML表格和列表笔记练习!DOCTYPE html html lang=en head meta charset=UTF-8 title关于表格的一些练...相关推荐
- HTML+CSS实现(排行榜+棋盘+表格+图片商品列表)
目录 1. 排行榜 2. 棋盘 3. 表格 4. 图片商品列表 1. 排行榜 <!DOCTYPE html> <html lang="en"> <he ...
- 【四】HTML:表格、列表、表单标签
目录 表格标签 表格的基本语法 表头单元格标签 表格属性 小说排行榜案例 表格结构标签 合并单元格 目标单元格 步骤 案例 列表标签 无序列表(重点) 有序列表(理解) 自定义列表 列表总结 表单标签 ...
- HTML5:段落、图片、链接、表格、列表、表单
刚开始接触前端的一枚小菜鸡罢了,一些无用潦草且抽象的笔记. 目录 段落.图片.链接 表格 列表 表单 一个简单的实例 段落.图片.链接 <html lang="zh-CN"& ...
- HTML表格、列表、表单
学习目标: 学会表格的基本语法,了解表格的属性以及合并单元格: 学会三种列表的基本语法,了解三种列表的属性. 学习内容: 一.表格标签 表格的基本语法 <table> <tr> ...
- html表格和列表标签
列表标签 1.有序列表(ol) 使用数字进行标记 开始标签: <ol> 列表项标签: <li>, <ol>是 ordered lists 的缩写 <li&g ...
- day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、 转义(实体)字符、 基本表格、合并表格
HTML 一 HTML概述 超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页 超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
- 软件测试体系学习及构建(8)-HTML之图像,表格,列表,区块
(8)-HTML之图像,表格,列表,区块 1 图像 1.1 图像标签 1.2 使用方法 1.3 Alt属性 1.4 高度和宽度 1.5 举例 1.6 总结 2 表格 2.1 表格标签 2.2 边框属性 ...
- html如何制作一个漂亮的表格?+ 列表制作 + 表单制作(干货!直接收代码)
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
- WPS表格 JSA 学习笔记 - 实现【设置编号】并添加到自定义选项卡
WPS表格 JSA 学习笔记 - 设置编号 0. 纯手工实现: 0.1. 编号使用建议 1. 标题设置编号 2. 遍历所有标题设置编号 添加到自定义选项卡 参考资料 关于编号引用 经常遇到编号设置混乱 ...
最新文章
- Wireless-N Configuration
- MessageDigest简单介绍
- 内网用户之间使用MSN Messenger快速传送文件的小窍门
- MFC拖拽文件到任意EDIT控件
- fastdfs清空_FastDFS安装及使用(开山篇)
- 天猫精灵 AIoT 平台将研发门槛从1000万降至40万,缩减 3 倍研发周期
- Python实验-字典攻击
- MonkeyEye电影售票系统--系统顺序图
- Ubuntu 9.04正式版下安装Sopcast看在线网络电视
- Word删除指定一页的页码
- pycharm条件判断
- oracle的音标,oracle的意思在线翻译,解释oracle中文英文含义,短语词组,音标读音,词源【澳典网ODict.Net】...
- dell电脑驱动安装失败
- 证券从业考试备考经验1115
- MATLAB基础应用精讲-【基础知识篇】脚本文件
- CFS调度器学习总结
- User Registration
- python如何使用geotools_ArcGIS工具之ET GeoWizards、GeoTools、GeoTools
- 个人怎么申请微信小程序开店铺_分享微信小程序开店铺步骤
- 洛谷 P4707 重返现世