HTML制作表格和列表
2021/6/1 18:52:10
本文主要是介绍HTML制作表格和列表,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 一、列表
- 1.1 无序列表
- 1.2 有序标签
- 1.3 自定义列表
- 二、表格
- 2.1.表格定义
- 2.2表格标签
- 2.3表格合并
- 总结
一、列表
1.1 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
无序列表可定义类型:(1)ype=“disc”项目符号为实体圆心;(2)type=“square”项目符号为实体方心;(3)type=“circle”项目符号为空心圆。
如:
<h1>软件编程语言</h1> <ul type="disc"> <li>Java</li> <li>C++</li> <li>Python</li> <li>JavaScript</li> </ul>
结果如下:
1.2 有序列表
有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
有序列表可定义类型:(1)type="1" 使用数字作为项目符合;(2)type=“A/a”使用大小写字母作为项目符号;(3)type=“l/i”使用大小写罗马数字作为项目符号。
如:
<h1>搜索引擎排名</h1> <ol type="1"> <li>Geogle</li> <li>Baidu</li> <li>Bing</li> <li>Sogou</li> </ol>
结果如下:
1.3 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
如:
<h1>健康食品</h1> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> <dt>蔬菜</dt> <dd>西兰花</dd> <dd>菠菜</dd> </dl>
结果如下:
二、表格
2.1 表格定义
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如:
<table border="1" width="100%"> <caption>用户信息表</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </tbody> <tfoot> <tr> <td>平均年龄</td> <td>25</td> </tr> </tfoot> </table>
结果如下:
2.2 表格标签
表格 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格的表头。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
<thead> | 定义表格的页眉。 |
<tbody> | 定义表格的主体。 |
<tfoot> | 定义表格的页脚。 |
<col> | 定义用于表格列的属性。 |
<colgroup> | 定义表格列的组。 |
2.3 表格合并
2.3.1 表格合并列属性 colspan 将多列合并成一列。如:
<table border="1"> <tr> <td colspan=“3”>用户信息表</td> </tr> <tr> <td>张三</td> <td>23</td> <td>上海</td> </tr> <tr> <td>李四</td> <td>29</td> <td>北京</td> </tr> </table>
结果如下:
2.3.2 表格合并行属性 rowspan 将多行合并成一行 。如:
<table border="1"> <tr> <td colspan="3" >用户信息表</td> </tr> <tr> <td>张三</td> <td>23</td> <td rowspan="2">上海</td> </tr> <tr> <td>李四</td> <td>29</td> </tr> </table>
结果如下:
总结
这篇关于HTML制作表格和列表的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程