列表和表格

最新推荐文章于 2022-07-15 23:22:49 发布

端脑

最新推荐文章于 2022-07-15 23:22:49 发布

阅读量417

点赞数

分类专栏：前端文章标签： HTML列表和表格

本文链接：https://blog.csdn.net/qq_43776742/article/details/95349607

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

列表

无序列表
有序列表
自定义列表

表格

简单表格制作
表格的表头
表格中单元格的合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>你喜欢去旅游的城市</h2>
	<ul>
		<li>北京</li>
		<li>杭州</li>
		<li>西藏</li>
		<li>
			苏州
			<ul>
				<li>苏州园林</li>
			</ul>
		</li>
	</ul>
</body>
</html>

返回列表目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li>中国</li>
		<li>英国</li>
		<li>马来西亚</li>
	</ol>
</body>
</html>

返回列表目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<dl>
		<dt>北京</dt>
		<dd>海淀</dd>
		<dd>修正</dd>
		<dd>顺义</dd>
		<dt>杭州</dt>
		<dd>区一</dd>
		<dd>区二</dd>
	</dl>
	<dl>
		<dt>雍正</dt>
		<dd>甄嬛</dd>
		<dd>皇后</dd>
		<dd>沈眉庄</dd>
	</dl>
</body>
</html>

返回列表目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>我开始做一个三行三列的表格</h3>
	
	<table  width="500" align="center" cellspacing="0" height="300" border="1">
		<!-- 标题：用以描述表格内容，标题的显示位置：表格上方。 -->
		<caption>这是一个标题</caption>
		
		<!--tr表示一行-->
		<tr>
			<!--td表示列  单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<!--td表示列  单元格-->
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
		<tr>
			<!--td表示列  单元格-->
			<td>李四</td>
			<td>女</td>
			<td>16</td>
		</tr>
	</table>
</body>
</html>

返回表格目录

<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>	
<table border="1">
  <thead><!-- 定义表格的页眉 -->
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  
  <tbody>	<!-- 定义表格的主体 -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  
  <tfoot>	<!-- 定义表格的页脚 -->
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

返回表格目录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>我开始做一个三行三列的表格思密达</h3>
	<table  width="500" align="center" cellspacing="0" height="300" border="1">
		<caption>学生信息表</caption>
		<thead>
		<!--tr表示一行-->
			<tr>
				<!--td表示列  单元格-->
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<!--td表示列  单元格-->
				<td>张三</td>
				<td>男</td>
				<td rowspan="2">40</td><!--rowspan 属性规定单元格可横跨的行数。-->
			</tr>
			<tr>
				<!--td表示列  单元格-->
				<td>李四</td>
				<td>女</td>
			</tr>
		</tbody>
		<tfoot>
			
		</tfoot>
	</table>
	<table  width="500" align="center" cellspacing="0" height="300" border="1">
		<caption>学生信息表</caption>
		<thead>
		<!--tr表示一行-->
			<tr>
				<!--td表示列  单元格-->
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<!--td表示列  单元格-->
				<td>张三</td>
				<td>男</td>
				<td>40</td>
			</tr>
			<tr>
				<!--td表示列  单元格-->
				<td>李四</td>
				<td colspan="2">女</td><!--colspan 属性规定单元格可横跨的列数。-->
			</tr>
		</tbody>
		<tfoot>
			
		</tfoot>
	</table>
</body>
</html>