6月7日

最新推荐文章于 2025-12-10 17:22:48 发布

原创最新推荐文章于 2025-12-10 17:22:48 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文详细介绍了HTML中的三种列表类型：有序列表、无序列表和定义列表，包括如何更改样式。此外，还讲解了HTML表格的创建，包括基本结构、属性设置以及跨行跨列的实现，并提到了表格的对齐和填充等样式调整。

html之列表和表格

1.列表分为三种：有序列表，无序列表，定义列表

有序列表：

有序列表：
<ol>
	<li>第一行</li>
	...
	<li>第n行</li>
</ol>

有序列表整体被ol包裹起来，每一行被li单独包裹。有序列表默认从1开始，样式也为默认样式，可用如下方法修改。

更改起始序号：
<ol start="2">
	<li>第一行</li>//此时序号从2开始。
	...
	<li>第n行</li>
</ol>
更改样式：
li{
	list-style-type: upper-roman;//样式有： decimal，数字；
                                           upper-alpha，大写字母；
                                           lower-alpha，小写字母；
                                           upper-roman，大写罗马字母；
                                           lower-roman，小写罗马字母；
}

无序列表：

无序列表：
<ul>
	<li>第一行</li>
	...
	<li>第n行</li>
</ul>

无序列表整体被ul包裹起来，每一行被li单独包裹。也可更改序号样式。

更改样式：
li{
	list-style-type: disc;//disc，圆点
                            circle，圆圈
                            square，方块
}

定义列表：

定义列表：
<dl>
	<dt>名称</dt>
	<dd>值</dd>
	...
	<dt>名称</dt>
	<dd>值</dd>
</dl>

定义列表用dl包起来，每一组名称和值对分别用dt和dd包起来。

2.表格

表格：
   <!--table：表格标签；boder：代表表格边框大小；
       cellpadding：表格与外层边框的间距；
       cellspacing:表格与表格之间的间距-->

	<table border="2" cellpadding="30" cellspacing="0" align="center">
		<caption>表格的标题</caption>  //表格标题
			<tr>                  //代表每一行，行标签
				<td>...</td>      //代表每一格，列标签
				...
				<td>...</td>
			<tr>
			<tr>
				<th>...</th>      //代表每一格，内容会自动居中，字体自动加粗
				...
				<th>...</th>
			<tr>
	</table>

表格可以跨行和跨列进行显示；

       <!--rowspan:跨行;colspan:跨列 -->
		<table >
		    <tr>
				<td rowspan="2">表格1</td>
				<td>表格2-1</td>
				<td rowspan="3">表格3</td>
			</tr>
			 <tr>
				<td>表格2-2</td>
			</tr>
			 <tr>
				<td colspan="2">表格1</td>
			</tr>
		</table>

表格的其余属性：

width,height：宽高，可以作用在table、tr、td
bordercolor：边框颜色，只能作用在table上
bgcolor：背景颜色，作用在table、tr、td
align：水平对齐方式，作用在table、tr、td
           center:居中对齐
           left:左对齐
           right:右对齐
valign：垂直对齐方式，作用在tr、td上
           middle:居中对齐
           top:居上对齐
           bottom:居下对齐