整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML中的列表与表格

序列表和有序列表

用于呈现逻辑上并列的具有相关性的数据内容.

<ul>

<li></li>

</ul>

ul元素可以用type属性设置不同的列表标记:

disc: 实心圆点

circle: 空心圆圈

square: 实心正方形

<ol>

<li></li>

</ol>

ol元素也可以设置不同的标记:

1: 阿拉伯数字

i: 小写罗马数字

I: 大写罗马数字

A: 大写字母

a: 小写字母

定义列表

适用呈现包含主题及描述的数据内容.

<dl>

<dt>主题</dt>

<dd>描述</dd>

</dl>

表格

<table>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

thead: 表头

tbody: 表体

tfoot: 表脚

th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.

表格的属性控制:

border: 边框

bordercolor: 边框颜色

width: 宽度

height: 高度

cellspacing: 单元格间距(外)

cellpadding: 单元格填充(内)

align: 表格的位置控制

单元格的属性控制:

align

valign

如何合并单元格/跨行或跨列?

<td rowspan="number" colspan="number">

注意: 合并后, 会引发单元格数量的减少!

列表练习案例源码:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h1>我的电脑文件列表</h1>

<ul>

<li>我的电脑

<ul>

<li>本地磁盘(C:)

<ul>

<li>我的文档</li>

<li>我的收藏</li>

</ul>

</li>

<li>本地磁盘(D:)

<ul>

<li>我的游戏</li>

<li>我的资料</li>

<li>我的电影</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

列表是一个接一个显示条目的首选方式,而不是使用<br>标记。完整的列表定义包括开始和结束标记,以及表示列表中每个条目的标记。

有三种类型的列表:有序列表、无序列表和定义列表。

无序列表

无序列表是一个带条目符号的列表,类似于菜单。

无序列表 - <ul> ... </ul>

ul标记定义无序列表的开始和结束,列表项包含在ul标记中。

无序列表项 - <li> ... </li>

li标记添加每个条目的文本,每个列表项必须有自己的li标记。

符号类型 <ul type="disc | circle | square">

默认情况下,浏览器将显示圆形条目符号。这可以通过使用ul标记的type属性来更改,这将更改整个列表的条目符号类型。

条目符号类型 <li type="?">

通过设置li标记的type属性,可以为列表中的某个条目设置不同的符号类型。

例子

以下是无序列表的示例:

浏览器显示内容如下所示:

SS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是:


无序列表


(1)编辑代码

打开记事本,编写代码,并保存为HTML格式文件。代码如下。



(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。