HTML中表格、列表和表单的基本⽤法（配合案例说明）
HTML中表格、列表和表单的基本⽤法
1.表格的⽤法
表格不是⽤来布局的，⽽是⽤来显⽰表格式的数据，使得数据的显⽰具有可读性。
下⾯是搜狐财经页⾯中table的⽤法：
1.1 表格标签⽤法
表格主要是⽤来显⽰特殊数据的，⼀个完整的表格有表格标签（table），⾏标签（tr），单元格标签（td）组成，没有列的标签。另外单元格标签中可以容纳其他的所有的元素，如图⽚，链接等。
标签名称⽤法
table表格标签，就是⼀个四⽅的盒⼦
tr定义表格中的⾏，必须嵌套在table中
td⽤于定义表格中的单元格，必须嵌套在⾏标签中
th表头单元格ytd⽤法相同（⼀般表头单元格位于表格的第⼀⾏或者第⼀列，并且⽂本加粗居中）caption表格标题，通常这个标签会被居中显⽰且显⽰于表格之上，该标签必须紧跟在table标签之后。
1.2 表格属性⽤法
属性⽤法
width设置表格宽度
height设置表格⾼度
cellspacing定义表格单元格之间的空间
cellpadding表⽰单元格边框与单元格内容之间的距离
border表⽰围绕表格的边框的宽度
align表⽰表格在页⾯中的位置
表格属性中我们要重点关注的是cellspacing和cellpadding。并且在实际的开发过程中，通常将border，cellspacing和cellpadding设置为0。
下⾯⽤⼀张图来解释上述属性在表格中的具体含义：
下⾯⽤⼀个案例来展⽰上述表格标签和表格属性的⽤法。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1"width="500"height="200"align="center"cellspacing="0"cellpadding="0">
<caption>湖⼈队主要球员</caption>
<tr>
<th>姓名</th>
<th>位置</th>
<th>能⼒</th>
</tr>
<tr>
<td>詹姆斯</td>
<td>⼩前锋</td>
<td>99</td>
</tr>
<tr>
<td>戴维斯</td>
<td>⼤前锋</td>
<td>97</td>
</tr>
</table>
</body>
</html>
显⽰效果如下（这⾥只是单纯的html显⽰效果）：
1.3 合并单元格
1.合并单元格有两种形式：
跨⾏合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
2.合并单元格的顺序，先上后下，先左后右
3.单元格合并的三个步骤
先确定是跨⾏还是跨列
根据合并原则到⽬标的单元格，写上合并⽅式和要合并的单元格数量删除多余的单元格
现在根据上⾯提供的图⽚我们进⾏单元格的合并案例。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1"width="500"height="240"align="center"cellspacing="0">
<caption>个⼈简介</caption>
<tr>
<td>詹姆斯</td>
<td>男</td>
<td>18</td>
<!-- ⽬标单元格先上后下 -->
<td rowspan="2">照⽚</td>
</tr>
<tr>
<td>⾝⾼ 203</td>
<td>湖⼈队</td>
<td>已婚</td>
<!-- <td>照⽚</td> 这个单元格是多余的 -->
</tr>
<tr>
<td>总冠军年份</td>
<!-- 第⼆个单元格是⽬标单元格 -->
<td colspan="3">2012，2013，2016</td>
</tr>
<tr>
<td>mvp年份</td>
<td colspan="3">2009,2010,2012,2013</td>
</tr>
</table>
</body>
</html>
⽹页效果：
此外表格划分结构也需要我们了解⼀下，对于⽐较复杂的表格，结构⽐较复杂，在开发时我们需要将其分成三部分：题头（thead），正⽂（tbody）和脚注（tfoot）。这样可以帮助我们更好的划分表格结构。
2.列表的⽤法
html网页设计 table
前⾯我们知道表格⼀般⽤于数据的展⽰，⽽列表主要⽤于页⾯的布局，以后学习了css后，可以与其配合实现页⾯中的布局。
2.1 ⽆序列表
这是以后我们在开发中⽤得最多得列表形式。
基本语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
2.2 有序列表
使⽤情形少，了解即可。
基本语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
2.3 ⾃定义列表
基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
下⾯⽤⼀个案例介绍上述三种列表的使⽤和⽹页中得效果。
代码如下
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论