表格常⽤标签及属性（表格标签基本使⽤，表格结构和常⽤列表,⾃定义列表和表
单，表单输⼊，表单输⼊）
1. 表格常⽤标签及属性
1.1 表格标签基本使⽤
表格的主要作⽤是什么？
以⾏、列的⽅式（表格）整齐地展⽰数据，例如：股票价格
⽤表格布局页⾯
表格的基本语法：
<table>
<tr>
<td>单元格内容</td>
.
.. //重复 td →单元格
</tr>
... //重复 tr →⾏
</table>
常⽤的表格标签有⼏个？分别代表什么含义？
三个基本的表格标签：
序号标签名说明
1table表格标签，⽤于包含多个tr
2tr定义表格中的⾏，⽤于包含多个td
3td定义表格中的单元格，⽤于存放单元格内容
注意:
table 和 tr 是⽤来搭建表格结构的，不能存放实际内容；
td 是⽤来存放单元格数据的。
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>⼥</td>
</tr>
</table>
1.2 表头单元格标签
表头标签的作⽤是什么？
第⼀⾏通常⽤来显⽰标题⽽不是实际的数据，这样可以⽅便⽤户阅读和理解下放表格数据的含义标签是什么？
th同样可以存放内容，但是默认会被加粗并且居中显⽰。
<table>
<th>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</th>
<tr>
<td></td>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>王五</td>
<td>⼥</td>
</tr>
</table>
1.3 表格相关属性
表格属性应该写在哪⼀个标签中？为什么？
属性是⽤来描述标签的特征（显⽰效果）的，因此属性都应该写在 table 标签中
属性语法复习：
<table 属性1="值1" 属性2="值2"></table>
注意：
属性名不需要引号
属性值必须要⽤引号，通常使⽤双引号
属性="值" 这种定义⽅式⼜被称为键值对 —— 属性名：键 / 属性值：值 / 成对出现
每⼀个键值对之间使⽤空格分隔
表格的常⽤属性：
属性名属性值描述
align left、center、right对齐⽅式
border宽度像素值或 “”表格边框，默认 “” ⽆边框
width像素值宽度
height像素值⾼度cellspacing像素值单元格之间的间距，默认 2 像素cellpadding像素值内容与边框之间的距离，默认 1 像素表格居中显⽰，设置表格边框、宽度、⾼度、内容间距和单元格间距。
<table align="center"border="1"cellpadding="20"cellspacing="0"width="500"height="100">html中提交表单用什么属性
<th>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</th>
<tr>
<td></td>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<td></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<td></td>
<td>3</td>
<td>王五</td>
<td>⼥</td>
</tr>
</table>
2. 表格结构和常⽤列表
2.1 表格结构标签
就语义⽽⾔，表格可以被划分成哪两个区域？分别对应什么标签？
就语义⽽⾔，表格可以被划分成以下两个区域：
thead 定义表格头部（标题⾏），必须拥有 tr 标签，⼀般位于第⼀⾏
tbody 定义表格的主体，通常包含标题⾏下⽅的表格数据区域
注意：thead 和 tbody 只是⽤来划分表格结构的，区分标题⾏和数据区域，不能替代原有的 tr、th、td 标签的作⽤。
2.2 合并单元格
合并单元格有那两种⽅式？
合并单元格的⽅式：
跨⾏合并（rowspan），把多个⾏的单元格合并 → 纵向合并
跨列合并（colspan），把多个列的单元格合并 → 横向合并
合并单元格的步骤是什么？
1. 明确合并⽅式（跨⾏ / 跨列）
2. 到⽬标单元格 td，增加合并单元格属性
跨⾏ rowspan="x"（纵向）
跨列 colspan="y"（横向）
<table align="center"width="640"height="240"cellspacing="1"cellpadding="20"border="2">
<thead>
<tr>
<th colspan="4">学⽣信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名：</td>
<td>巨⼩帅</td>
<td>班级：</td>
<td>合肥10期</td>
</tr>
<tr>
<td>出⽣⽇期：</td>
<td>2000-02-14</td>
<td>性别：</td>
<td>⼩帅</td>
</tr>
<tr>
<td>⼿机号：</td>
<td>110</td>
<td>号：</td>
<td>119</td>
</tr>
</tbody>
</table>
3. 删除多余的单元格
2.3 ⽆序列表
列表的主要是⽤来做什么的？
列表就是⽤来布局的，可以整齐、有序的展⽰数据，⽤列表做布局会更加⾃由和⽅便；
我们⼀共要学习⼏种列表？
⽆序列表（ul）
有序列表（ol）
⾃定义列表（dl）
⽆序列表⼀共有⼏个标签？分别是什么，作⽤是什么？有什么注意事项？⽆序列表的的基本语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
两个⽆序列表标签：
ul⽆序列表，只允许包含多个 li 标签
li⽤于存放列表项内容
注意：
ul 是⽤来搭建结构的，不能存放实际内容；
ul 只允许包含多个 li 标签；
li 是⽤来存放列表项数据的
2.4 有序列表
有序列表和⽆序列表有什么区别？
有序列表 ol 会在列表项前⾯⾃动增加数字排序，并且排序依次递增；
有序列表的的基本语法与⽆序列表基本⼀直，只需要把 ul 替换成 ol 即可：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
有序列表除了序号之外，与⽆序列表的使⽤及注意事项有区别吗？
有序列表除了序号之外，与⽆序列表的使⽤及注意事项没有区别。
3. ⾃定义列表和表单
3.1 ⾃定义列表
⾃定义列表的应⽤场景是什么？
⽹站⾸页下⽅的⽹站导航通常可以使⽤⾃定义列表来实现
⾃定义列表的基本语法：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论