第3章 HTML表格与表单-【好程序员成长】HTML5从入门到精通

第3章 HTML表格与表单 HTML表格 HTML表单 HTML表格 HTML表单 目 录 CATALOUGUE 01 02 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握HTML表格的基本使用 掌握HTML常用表单元素 掌握HTML表单的基本使用 了解前端与后端交互与通信 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.1 表格基本结构 3.1.2 表头与标题 3.1.3 表格语义化 3.1.4 合并行与列 3.1.5 单元格边距与间距 3.1.6 表格其他属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.1 表格的基本结构 每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，其语法格式如下： 上面三个标签是创建表格的基本标签，其中<table></table>标签用于定义一个表格。<tr>标签用于定义表格中的一行，必须嵌套在<table></table>标签中，在<table></table>标签中包含几对<tr></tr>，表示该表格有几行。<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr></tr>包含几对<td></td>，表示该行中有多少个单元格（列）。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.1 表格的基本结构 表格内除了可以添加文本外，还可以添加其它标签元素，如：图片、列表、段落等。 默认情况下表格没有边框，如果想要给表格添加边框，可以设置表格的border属性，数值为边框的宽度。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.2 表头与标题 为了使表格的格式更清晰方便读者查阅，应用表格时经常需要为表格设置表头，表头<th>是<td>单元格的一种标题，其本质还是一种单元格，一般位于表格的第一行或第一列，用来表明这一行或列的内容类别。浏览器会将表头默认以粗体居中的样式显示在网页中。 <th>标签和<td>在本质上都是单元格，但这两种不可以互换使用。th即“table header（表头单元格）”。而td即“table data（单元格）”。 表格一般都有一个标题，用来表明表格的内容，一般位于整个表格的第一行，使用<caption>标签。一个表格只能含有一个表格标题。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.3 表格语义化 为了使网页内容更好的被搜索引擎理解，在使用表格进行布局时，HTML中引入了<thead>、<tbody>和<tfoot>这三个语义化标签，用来将表格划分为头部、主体和页脚三部分。 <thead></thead>标签：用于定义表格的头部，位于<table></table>标签中，一般包含网页的logo和导航等头部信息。 <tfoot></tfoot>标签：用于定义表格的页脚，位于<table></table>标签中。<thead></thead>标签之后，一般包含网页底部的企业信息等。 <tbody></tbody>标签：用于定义表格的主体，位于<table></table>标签中<tfoot></tfoot>标签之后，一般包含网页中除头部和底部以外的其他内容。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.4 合并行与列 在Word中设计表格时，有时需要将两个或多个的相邻单元格组合成一个单元格，即合并单元格的操作。在HTML中，也需要用到“表格合并行”和“表格合并列”。 合并行使用<td>标签的rowspan属性，而合并列则用到<td>标签的colspan属性。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.5 单元格边距与间距 表格还有用于控制单元格边距与间距的属性，即cellpadding和cellspacing属性，cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，默认为1px.，cellspacing属性用于设置单元格与单元格边框之间的空白间距，默认为2px。 下面通过案例演示cellpadding属性，如例所示。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.1 HTML表格 3.1.6 表格其他属性 HTML为表格提供了一系列的属性，用于控制表格的显示样式，