【攻破html系列——第五天】表格标签和列表标签
文章目录
- 1. 表格标签 <**table**>
- 1.1 定义
- 1.2 基本语法
- 1.3 表头标签 <**th**>
- 1.4 表格属性
- 2. 表格综合案例
- 2.1 要求
- 2.2 图片准备
- 2.3 分析
- 2.4 快捷生成表格
- 2.5 代码
- 2.6 效果
- 2.7 可能出现的疑惑
- 2.8 表格结构标签
- 3. 合并单元格
- 3.1 合并方式
- 3.2 写代码的位置
- 3.3 步骤
- 3.4 合并单元格案例
- 3.5 代码
- 4. 列表标签
- 4.1 定义
- 4.2 无序列表
- 4.3 有序列表
- 4.4 自定义列表
1. 表格标签 <table>
1.1 定义
table 单词，意为表格
tr是单词 table row 的缩写，意为表格的行
td是单词 table data 的缩写，意为表格数据
表格主要用于展现数据，而不是布局
1.2 基本语法
<table><tr><td>单元格内容</td></tr>
</table>
<table> 标签定义一个表格
<tr> 标签定义行，必须嵌套在 <table> 标签
<td> 标签定义单元格，必须嵌套在 <tr> 标签
<td> 标签存放表格的数据
1.3 表头标签 <th>
th的单词缩写为 table head，意为表头。
一般表头单元格位于表格第一行或第一列，它的文本居中加粗显示，更突出了文本的重要性。
表头单元格也是单元格，所以 <th> 和 <td> 功能基本一致，但 <th> 的文本会居中加粗显示。
<body><table><tr><td>姓名</td><td>年龄</td></tr></table><table><tr><th>姓名</th><th>年龄</th></tr></table>
</body>
效果如下：
1.4 表格属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| align | left，right，center | 设置表格相对于周围元素的位置 |
| border | 数值 | 设置表格边框大小，默认为0（没有边框） |
| cellpadding | 像素值 | 设置单元格与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 设置单元格与单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 设置表格的宽度 |
事实上，这边了解他们的属性只是为了更好理解表格，之后这些样式基本都只在 css 设置。
新建一个普通表（无任何属性）
<table><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>左轮</td><td>1024</td><td>学生</td></tr> </table>
border 属性
给 <table> 标签加上 border 属性
<table border="1">
align 属性
给 <table> 标签再加上 align 属性
<table border="1" align = "center">
cellpadding 属性
给 <table> 标签再加上 cellpadding 属性
<table border="1" align = "center" cellpadding = "20">cellspacing 属性
给 <table> 标签再加上 cellspacing 属性
<table border="1" align = "center" cellpadding = "20" cellspacing = "0">
2. 表格综合案例
2.1 要求
完成以下页面
2.2 图片准备
down.jpg
up.jpg
2.3 分析
2.4 快捷生成表格
emmet 插件的语法：
table>(tr>th*6)+tr*7>td*6
2.5 代码
<body><table align="center" border="1" cellspacing="0" width="500px" height="250px"><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="./img/up.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./img/down.jpg" alt=""></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></table>
</body>
2.6 效果
2.7 可能出现的疑惑
可能是不同浏览器的兼容问题，稍微将页面放大这个间隙就会不见。
2.8 表格结构标签
为了更好表示表格的语义，可以把表格分割为表格头部和表格主体两大部分。
- <thead> 标签：表格头部区域，内部必须包含 <tr> 标签，一般放表格第一行
- <tbody> 标签：表格主体区域，主要用于存放除第一行外的数据
以上标签均在 <table></table> 中
无表格结构标签
<table border="1" align = "center" cellpadding = "20" cellspacing = "0"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>左轮</td><td>1024</td><td>学生</td></tr> </table>
有表格结构标签
<table border="1" align = "center" cellpadding = "20" cellspacing = "0"><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>左轮</td><td>1024</td><td>学生</td></tr></tbody></table>
使用 <thead>， <tbody> 这类结构标签，界面并不会发生变化，但结构化和语义更强
3. 合并单元格
3.1 合并方式
- 跨行合并：rowspan = “合并单元格的个数”
- 跨列合并：colspan = “合并单元格的个数”
3.2 写代码的位置
- 跨行合并：在合并的最上面的单元格写
- 跨列合并：在合并的最左边的单元格写
3.3 步骤
- 先确定是跨行合并还是跨列合并
- 找到写代码的目标单元格，即从哪里开始合并
- 去掉多余的单元格
3.4 合并单元格案例
3.5 代码
<body><table cellpadding = "10" cellspacing ="10" border="1"><tr><th colspan="4">1</th></tr><tr><th rowspan="2">1</th><th>1</th><th>1</th><th>1</th></tr><tr><th>1</th><th>1</th><th>1</th></tr><tr><th>1</th><th>1</th><th>1</th><th>1</th></tr></table>
</body>
4. 列表标签
4.1 定义
表格用于展示数据，而列表主要用于布局
根据使用场景的不同，可分为三类列表：
- 无序列表（像现在这样的分类就是无序列表）
- 有序列表（前面标号为1，2，3或 a，b，c 这种有序的标号）
- 自定义列表（用来解释一些术语）
4.2 无序列表
语法形式：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
注意点：
- 无序列表无顺序级别之分，是并列的。
- <ul></ul> 的直接子元素不能是其他元素只能是 <li></li>。
- <li></li> 相当于是一个容器，可以放其他元素
- 无序列表默认的标号为小圆点，这个以后可以通过 css 来设置
4.3 有序列表
语法形式：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
注意点：
- <ol></ol> 的直接子元素不能是其他元素只能是 <li></li>。
- <li></li> 相当于是一个容器，可以放其他元素
- 有序列表默认的标号从1开始，这个以后可以通过css来设置
4.4 自定义列表
语法形式：
<dl><dt>名词</dt><dd>描述1</dd><dd>描述2</dd><dd>描述3</dd>
</dl>
注意点：
- <dl></dl> 的直接子元素不能是其他元素只能是 <dt></dt> 和 <dd></dd>。
- <dt></dt> 和 <dd></dd> 的个数没有限制，一般一个 <dt> 对应多个 <dd>
本文主要学习黑马程序员pink老师的视频
如有错误，敬请指正，欢迎交流
【攻破html系列——第五天】表格标签和列表标签相关推荐
- Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
- HTML 文字标签、段落标签、列表标签、链接标签和表格
文章目录 HTML 一.文字标签 二.段落标签 三.列表标签 1.有序列表 2.无序列表 3.插入列表 四.链接标签 1.文本链接 2.书签链接 五.表格 1.绘制表格 2.行标签属性 3.单元格标签 ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签 在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
- day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、 转义（实体）字符、 基本表格、合并表格
HTML 一 HTML概述 超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页 超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
- HTML 表格标签、列表标签、表单标签（案例： 注册页面）
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
- html标签之列表标签，前端开发资料分享
前言 年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 一.如何入门,学习建议 ...
- HTML常用标签之列表标签
引言: 表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用情景不同,列表可以分为三大类:无序列表.有序列表和自定义列表. 一.无 ...
- Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
最新文章
- css 实现打分效果
- JS-JavaScript String 对象-string对象方法1：fromCharCode()、charCodeAt()
- python学习(2)--变量与表达式
- linux中mpich的运行线程,贝叶斯法构建进化树：MrBayes
- min_25 推导及例题总结
- php中mimes函数,wordpress函数check_upload_mimes()用法示例
- python爬虫requests简单案例_Python小例子：一个最简单的爬虫
- MySQL如何生成idf文件_【IDF2010】释放三大特性 至强7500为MySQL量身定做
- HDU 5514 欧拉函数应用
- 毕设题目：Matlab手写或印刷数字字母识别
- 微会动平台与微云推战略携手赋能企业数字营销推广与业绩增长闭环
- oracle某字段所在的表,在oracle中怎么通过字段名查询其所在的表
- Mybatis 入门到理解篇
- 我写过的软件之TSE-工作流程和实现
- jks证书转为pem证书，TrustedCertEntry not supported的解决办法
- 知网查重提交论文显示服务器错误,知网查重时显示检测失败是什么原因？
- 简述空串和空格串（或称空格符串）的区别。
- Uber是什么 读书笔记
- Oracle批量清空表数据
- oracle中exist什么意思,oracle中not exists 是什么意思 , oracle数据库中exists的作用