一、表格标签
表格是一种组织整理数据的手段,在HTML当中表格使用<table> 标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
1、标记说明
表格标记:<table></table>标记表示整个表格。<table>标记中有很多属性,例如 width 属性用来设置表格的宽度,border 属性用来设置表格的边框,align 属性用来设置表格的对齐方式,cellspacing是表格里单元格之间的距离, cellpadding是表格里单元格内的空白部分。
标题标记:<caption>标题标记,给表格设置标题
表格行标记:<tr>标记表示表格中的一行。嵌套在<table>标记中使用,该标记也具有 algin、background 等属性。
表头标记:表格的表头使用 <th> 标签进行定义,在浏览器中会显示为粗体居中的文本
单元格标记:<td>单元格标记,又称为列标记,一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有 algin、background、valign 等属性。
1.1利用表格标签形成一个简单的表格
页面展示:
2、单元格的合并
通过colspan和rowspan属性,实现单元格跨行以及跨列的操作。
2.1colspan实现单元格跨列
在<th>或者<td>中添加colspan="2",可以合并两列单元格,colspan后填写的值指的是合并单元格的列数。
页面效果:
2.2rowspan实现单元格跨行
在<th>或者<td>中添加rowspan="2",可以合并两行单元格,rowspan后填写的值指的是合并单元格的行数。
页面效果: