HTML学习笔记——05：表格

ruleslol

已于 2024-01-15 16:57:47 修改

阅读量868

点赞数 18

分类专栏： HTML 文章标签：学习笔记 html

于 2024-01-15 16:57:15 首次发布

本文链接：https://blog.csdn.net/qq_31532983/article/details/135526469

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、什么是表格

表格是由行和列组成的结构化数据集（表格数据）

比如：excel中的每一个sheet就是一张表。

二、表格的基础创建

2-1、简单表格的创建

每一个表格的内容都包含在这两个标签中：<table></table>。

在表格中，最小的内容容器是单元格，其中 <td> 元素创建列单元格（其中“td”代表“table data”）；

<tr>元素创建行单元格（其中“tr”代表“table row”）

设置一个2行4列的table：

<!-- table默认是没有边框的，border="1"设置可见边框 -->
<table border="1">
    <tr>
        <td>Hi, I'm your first cell.</td>
        <td>I'm your second cell.</td>
        <td>I'm your third cell.</td>
        <td>I'm your fourth cell.</td>
    </tr>
    <tr>
        <td>Hi, I'm your first cell.</td>
        <td>I'm your second cell.</td>
        <td>I'm your third cell.</td>
        <td>I'm your fourth cell.</td>
    </tr>
</table>

每一行都需要一个额外的 <tr> 元素来包装，每个单元格的内容都应该写在 <td>中。

2-2、表头：<th>

表格中的标题是特殊的单元格，通常在行或列的开始处。

你可以使用 <th> 元素（其中 'th' 代表 'table header'），用法和 <td>是一样的。

<table border="1">
    <tr>
        <!-- 设置标题 -->
        <th width="100px">name</th>
        <th width="100px">age</th>
    </tr>
    <tr>
        <td>lili</td>
        <td>16</td>
    </tr>
    <tr>
        <td>same</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>blue</td>
        <td>19</td>
    </tr>
</table>

即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。居中：align = “center”

单元格空白可以用： 

2-3、表格标题：<caption>

标题意味着包含对于表格内容的描述。

放在<table>标签里面的第一个。

<!-- table默认是没有边框的，border="1"设置可见边框 -->
<table border="1">
    <!-- 表格标题：align默认是top -->
    <caption>姓名-年纪分类表</caption>
    <tr>
        <!-- 设置标题 -->
        <th width="100px">name</th>
        <th width="100px">age</th>
    </tr>
    <tr>
        <td>lili</td>
        <td>16</td>
    </tr>
    <tr>
        <td>same</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>blue</td>
        <td>19</td>
    </tr>
</table>

align 属性规定 caption 元素的对齐方式。

align 属性将 caption 作为块元素向表格的左边、右边、顶部、底部进行对齐。

align:水平移动：left\center\right
valign:垂直移动：top\middle\bottom

2-4、允许单元格跨越多行和列

使用：colspan 和 rowspan 属性。

【注意】：

colspan 和 rowspan 属性，只能放到<td>或者<th>里面！

<!-- table默认是没有边框的，border="1"设置可见边框 -->
<table border="1">
    <!-- 表格标题：align默认是top -->
    <caption align="bottom">姓名-年纪分类表</caption>
    <tr align="right">
        <!-- 设置标题 -->
        <th width="100px">name</th>
        <th width="100px">age</th>
        <th width="100px">sex</th>
    </tr>
    <tr>
        <td>lili</td>
        <td>16</td>
        <td rowspan="3">这一列合并起来了</td>
    </tr>
    <tr>
        <td>same</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2"> 这一行合并起来了 </td>
    </tr>
</table>

2-5、为表格中的列提供共同的样式

HTML 有一种方法可以定义整列数据的样式信息：就是 <col> 和 <colgroup> 元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 <td> 或 <th> 上定义样式

低效的方式：

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

高效的方式：

为了舍弃这种低效做法，我们可以只定义一次，在 <col> 元素中。<col> 元素被规定包含在 <colgroup> 容器中，而 <colgroup>就在 <table> 标签的下方。

<table>
    <!-- 为表格中的列提供共同的样式 -->
    <colgroup>
        <!-- 第一列 -->
        <col />
        <!-- 第二列 -->
        <col style="background-color: yellow" />
    </colgroup>
    <tr>
        <th>Data 1</th>
        <th>Data 2</th>
    </tr>
    <tr>
        <td>Calcutta</td>
        <td>Orange</td>
    </tr>
    <tr>
        <td>Robots</td>
        <td>Jazz</td>
    </tr>
</table>

我们使用了两个 <col> 来定义“列的样式”，每一个 <col> 都会指定每列的样式，对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 <col> 元素，如果不这样做，那么我们的样式就会应用到第一列上，这和我们预想的不一样。

若是想要每一列都是一样的样式，可以只设置一个<col>，不过，需要包含span属性。

<colgroup>
    <col style="background-color: deepskyblue" span="2">
</colgroup>

就像 colspan 和 rowspan 一样，span 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。

三、表格的高级特性

3-1、表头、表体、表尾： <thead>、<tfoot> 和 <tbody>

若是表格在结构上有点复杂，可以把它们定义得更加结构化。一个明确的方法是使用 <thead>、<tfoot> 和 <tbody>，这些元素允许你把表格中的部分标记为表头、表尾、表体三部分。

这些元素不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。

<thead> 元素：

<thead> 元素必须包住表格中作为表头的部分。一般是第一行，往往都是每列的标题。

如果你使用了 <col>/<colgroup> 元素，那么 <thead> 元素就需要放在它们的下面。

<tfoot> 元素：

<tfoot> 元素需要包住表格中作为表脚的部分。一般是最后一行，往往是对前面所有行的总结。

你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)

被<tfoot>元素包含的表格的部分会显现到表格的底部！！！

<tbody> 元素：

<tbody> 元素需要包住表格内容中不在表头或表尾的其他部分。

<tbody> 总是包含在每个表中，如果你没有在代码中指定它，那就是隐式的。可以来验证一下，打开一个你之前没有包含 <tbody> 的例子，然后在你的浏览器开发者工具中观察你的代码，你会看到浏览器为你添加了这个标签。

为什么你应该在所有表中都需要这个元素？
答：因为它可以让你更好地控制表格结构和样式。

3-2、嵌套表格

在一个表格中嵌套另外一个表格。

<table id="table1" border="1">
    <tr>
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
    </tr>
    <tr>
        <td id="nested">
            <!-- 嵌套的表格 -->
            <table id="table2" border="1">
                <tr>
                    <td>嵌套-单元格 1</td>
                    <td>嵌套-单元格 2</td>
                    <td>嵌套-单元格 3</td>
                </tr>
            </table>
        </td>
        <td>单元格 2</td>
        <td>单元格 3</td>
    </tr>
    <tr>
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
    </tr>
</table>

3-3、scope属性

scope 属性标识某个单元是否是列、行、列组或行组的表头。

scope 属性不会在普通浏览器中产生任何视觉变化！！！

<table border="1">
  <tr>
    <th></th>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td scope="row">1 first</td>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td scope="row">2 second</td>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

3-4、id和header属性

可以替代 scope 属性，用id和header属性来创建标题与单元格之间的联系。

不会在普通浏览器中产生任何视觉变化！！！

header属性可使用于以下元素：

用法：

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

<table style="width:100%">
  <tr>
    <th id="name">Name</th>
    <th id="email">Email</th>
    <th id="phone">Phone</th>
    <th id="addr">Address</th>
  </tr>
  <tr>
    <td headers="name">李四</td>
    <td headers="email">someone@example.com</td>
    <td headers="phone">+45342323</td>
    <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
  </tr>
</table>