HTML列表与表格详解-优快云博客

(1):列表定义

对应介绍如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习</title>
	</head>
	<body>
		<dl>
			<dt>一个嵌套的列表</dt>
			<ul type="disc">
			<dt>咖啡</dt>
			<dt>茶</dt>
			<dd>红茶</dd>
			<dd>绿茶</dd>
			<dt>牛奶</dt>
			</ul>
		</dl>
	</body>
</html>

对应结果为:

如上图可知:<dl>自定义列表的开始,<dt>每个自定义列表项,<dd>每个自定义列表项的定义.

(2) HTML表格:

对应举例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格属性</title>
	</head>
	<body>
		<table border="2" width="200px" height="200px" align="centre" cellspacing="0px" bgcolor="0F0">
		<thead >
		<caption><h4>学生信息表</h4></caption>
		</thead>
		<tbody></tbody>
		<tr align="center">
			<th><font color="aliceblue">姓名</font></th>
			<th>年龄</th>
			<th>学号</th>
			<th>成绩</th>
		</tr>
			<tr align="center">
			  <td>小明</td>
			  <td>18</td>
			  <td>01</td>
			  <td>77</td>
			</tr>
			<tr align="center">
			  <td>小刘</td>
			  <td colspan="2">被合并了</td>
			  <td>86</td>
			</tr>
			<tr align="center">
			  <td>小张</td>
			  <td rowspan="2">被合并了</td>
			  <td>03</td>
			  <td>88</td>
			</tr>
			<tr align="center">
			  <td>小冯</td>
			  <td>04</td>
			  <td>99</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

对应结果为:

由上可知:<th>:定义表格的表头 ; <tr>:定义行标签 ; <td>:定义单元格标签

对应属性有: border: 边框线 width/height:单元格的宽与高 bgcolor:背景颜色 align:对其方式

<caption>表格标题标签</caption> cellspacing:单元格与边框线之间的距离.

cellpadding:单元格与边框线之间的空间.

rowspans:合并行单元格(<td rowspans = "2")合并行(/rowspans)

colspans:合并列单元格(<td colspans = "2")合并列(/colspans)

(3)上下标标签:

1.sup:上标(x^2   x<sup>2</sup>

2.sub:下标

//上标
x^2 &nbsp; x<sup>2</sup>


//下标

<h3>co2 &nbsp; co<sub>2</sub>;</h3>

对应结果为:

HTML的标签介绍(中)