【HTML】表格

msmxsd

已于 2022-07-14 15:44:03 修改

阅读量873

点赞数

分类专栏： web前端开发文章标签：前端 html vscode

于 2022-03-15 11:09:40 首次发布

本文链接：https://blog.csdn.net/qq_45943210/article/details/123488847

版权

根据MDN网站学习记录笔记

HTML表格

表格
HTML练习三：构建行星数据

表格

是由行和列组成的结构化数据集(表格数据)，能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。

表格标签

所有表格内容都包含在<table></table>标签中，<tr>代表一行，<td>一般表示一行中的单元格，一行中有几个<td>就有几列，<th>与<td>相似，th用于添加标题，肉眼看就是加粗的效果。

允许单元格跨越多行和列

      <tr>
        <th colspan="2">Hippopotamus</th>
      </tr>
      <tr>
        <th rowspan="2">Horse</th>
        <td>Mare</td>
      </tr>
      <tr>
        <td>Stallion</td>
      </tr>

在这里插入图片描述

为表格中的列提供共同的样式

<col>和<colgroup>元素，<col>元素需要放在<colgroup>元素里面， <colgroup>就在 <table> 标签的下方,如果要应用到每一列<col style="" span="">

高级特性

用<caption>元素添加标题
使用 <thead>, <tfoot>,和 <tbody>把表格中的部分标记为表头、页脚、正文部分，使表格更加结构化。
还可以嵌套表格。
在<th>元素中添加scope属性

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

如果要替代 scope 属性，可以使用 id 和 headers 属性来创造标题与单元格之间的联系。使用方法如下:

为每个<th> 元素添加一个唯一的 id 。
为每个 <td> 元素添加一个 headers 属性。每个单元格的headers 属性需要包含它从属于的所有标题的id，之间用空格分隔开。

HTML练习三：构建行星数据

项目概述

目前，你的学生正在学习太阳系的行星，然后你想为他们提供一份简单的易于追踪的数据集合，来查找有关行星的数字和情况。

项目要求

打开在你本地环境中的 blank-template.html副本，提供一个外部容器来初始化表格，一个表格 header，一个表格 body。在这个例子中，你不需要表格 footer 。
为你的表格添加我们提供的标题。
在表格的 header 中添加一行，用来包括所有列的标题。
在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。
确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。
添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联，使用 rowgroups 让子标题和父标题也进行关联。
为包含所有行星标题的行标题的那一列数据，添加一个黑色边框

代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>太阳系行星数据</title>
    <link href="minimal-table.css" rel="stylesheet">
  </head>
  <body>
    <h1>太阳系行星数据</h1>
    <table>
        <</

最低0.47元/天解锁文章

msmxsd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML】表格

HTML表格表格表格标签允许单元格跨越多行和列为表格中的列提供共同的样式高级特性HTML练习三：构建行星数据项目概述项目要求表格是由行和列组成的结构化数据集(表格数据)，能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。表格标签所有表格内容都包含在<table></table>标签中，<tr>代表一行，<td>一般表示一行中的单元格，一行中有几个<td>就有几列，<th>与<td>相似，th用于添加标题
复制链接

扫一扫

专栏目录