第7章 表格与表单_补充案例.docxVIP

第7章 表格与表单_补充案例 本章节介绍了HTML中常用的表格和表单的标签及属性，可以通过这些标签和属性来创建数据展示、收集或提交的页面。在实际开发中，我们需要灵活运用这些标签和属性来达到我们所需要的效果。下面将结合一个表格和一个表单案例来进行说明。案例一：表格展示假设我们需要创建一个课程列表的表格展示页面，其中需要展示课程名称、课程描述、学习人数、授课教师、课程图标等信息。首先我们需要规划表格的结构和布局：```htmltable thead tr th课程名称/th th课程描述/th th学习人数/th th授课教师/th th课程图标/th /tr /thead tbody tr tdHTML/CSS基础/td td学习前端基础知识/td td1000人/td td张老师/td tdimg src=html.png alt=HTML/CSS基础/td /tr tr tdJavaScript高级/td td学习JavaScript高级特性/td td800人/td td王老师/td tdimg src=javascript.png alt=JavaScript高级/td /tr tr tdVue.js实战/td td学习Vue.js框架实战应用/td td500人/td td李老师/td tdimg src=vue.png alt=Vue.js实战/td /tr /tbody/table```代码中使用了`table`标签来创建表格，其中包括`thead`和`tbody`标签分别表示表头和表体。在表头中使用`tr`和`th`标签来创建表头行和表头单元格，引用的内容是各列的标题。在表体中使用`tr`和`td`标签来创建表体行和表体单元格，引用的内容是各列对应的数据。此时我们可以通过CSS样式来美化表格的样式，增加可读性和美观性。```csstable { width: 100%; border-collapse: collapse; background-color: #f0f0f0;}thead { background-color: #e0e0e0;}th, td { border: 1px solid #ddd; padding: 8px; text-align: center;}th { font-weight: bold;}tbody tr:nth-child(2n) { background-color: #f5f5f5;}img { width: 50px;}```代码中设置了表格的基本样式，包括宽度、边框、背景色等。在表头和表体中设置了单元格的边框和内边距，以及文本对齐方式。在表头中设置了加粗的字体样式。在表体中设置了奇数行的背景色样式。在表格中包含图片时，设置了图片的宽度。案例二：表单提交假设我们需要创建一个注册页面，用户可以输入用户名、密码、确认密码、邮箱、电话等信息进行注册。我们需要使用表单来收集用户信息并提供提交功能。```htmlform action=register.php method=post div label for=username用户名：/label input type=text id=username name=username required /div div label for=password密码：/label input type=password id=password name=password required /div div label for=confirm-password确认密码：/label input type=password id=confirm-password name=confirm-password required /div div label for=email邮箱：/label input type=email id=email name=email required /div div label for=tel电话号码：/label input type=tel id=tel n