今天的任务超级简单——在HTML中构建一个表格数据,有大量的元素和属性是来满足这种需求的。当然在此之前我们需要有一定的HTML的基础,以及对HTML的表格基础有了解。
HTML表格基础:
表格是由行和列组成的结构化数据集(表格数据),它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。比如:1800年的美国人口普查表
表格工作的原理:
表格的一个特点就是严格. 通过在行和列的标题之间进行视觉关联的方法,就可以让信息能够很简单地被解读出来。正确完成后, 即使是盲人也可以解析 HTML 表格中的数据,一个成功的 HTML 表格应该做到无论用户是视力正常还是视力受损,都能提高用户的体验。
制作属于自己的第一个表格
- 每一个表格内容都包含在<table></table>中,在我的HTML的<body>中添加这些内容;<table>标签定义HTML表格;<table> 标签支持HTML 中的全局属性、事件属性。
- 如果想让这一行停止增加,并让单元格从第二行开始,可以使用<tr>标签('tr' 代表 'table row');<tr>标签定义HTML表格中的行;tr 元素包含一个或多个 th 或 td 元素。
- 将表格的标题在视觉上和语义上都能被识别为标题,可以使用 <th> 元素 ('th' 代表 'table header');表格中的标题是特殊的单元格,通常在行或列的开始处,定义行或列包含的数据类型:
- 在表格中最小的内容容器是单元格,需要通过<td>元素('td' 代表 'table data')来添加内容;
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表单中有两种类型的单元格:
- 表头单元格 - 包含表头信息(由 th 元素创建)
- 标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。