HTML 表格

HTML 表格 是意义是展示表格数据,仅用来展示可以通过来展示的内容。

It’s like having a spreadsheet in Excel.

看起来像Excel电子表格。

Syntax

语法

在 HTML 创建一个表格需要特殊的结构:

  • 使用 <table>
  • 使用 <tr> 添加行
  • 使用 <td> 添加均匀的列或者标题

创建表格至少要使用这三个元素。

当我们写码的时候,我们需要从左到右,从上到下来定义表格内容。

<table>
  <tr>
    <td>John Lennon</td>
    <td>Rhythm Guitar</td>
  </tr>
  <tr>
    <td>Paul McCartney</td>
    <td>Bass</td>
  </tr>
  <tr>
    <td>George Harrison</td>
    <td>Lead Guitar</td>
  </tr>
  <tr>
    <td>Ringo Starr</td>
    <td>Drums</td>
  </tr>
</table>
John Lennon Rhythm Guitar
Paul McCartney Bass
George Harrison Lead Guitar
Ringo Starr Drums

正如你所看到的,HTML里创建一个表格是比较繁琐的:仅仅创建几行数据就用到了那么多的标签。

thead、 tfoot、 tbody

像网页一样,表格也有 header、foot、body,像HTML一样,这些标签都是纯语义的:为表格提供更多的结构。

<thead> <tfoot> <tbody> 是由组成,都是<table>的子元素,并且它的子元素是一个或多个<tr>。简而言之,它们是table下的第一级元素。

<thead><tfoot> 被用来做每一列的总览

让我们使用head和body升级之前的列表。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Lennon</td>
      <td>Rhythm Guitar</td>
    </tr>
    <tr>
      <td>Paul McCartney</td>
      <td>Bass</td>
    </tr>
    <tr>
      <td>George Harrison</td>
      <td>Lead Guitar</td>
    </tr>
    <tr>
      <td>Ringo Starr</td>
      <td>Drums</td>
    </tr>
  </tbody>
</table>
Name Instrument
John Lennon Rhythm Guitar
Paul McCartney Bass
George Harrison Lead Guitar
Ringo Starr Drums

tfoot particularity

tfoot

添加tfoot给表格

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>John Lennon</td>
      <td>Rhythm Guitar</td>
    </tr>
    <tr>
      <td>Paul McCartney</td>
      <td>Bass</td>
    </tr>
    <tr>
      <td>George Harrison</td>
      <td>Lead Guitar</td>
    </tr>
    <tr>
      <td>Ringo Starr</td>
      <td>Drums</td>
    </tr>
  </tbody>
</table>
Name Instrument
Name Instrument
John Lennon Rhythm Guitar
Paul McCartney Bass
George Harrison Lead Guitar
Ringo Starr Drums

尽管我们把 <tfoot> 添加在 <tbody> 之前,它仍然出现在了表格的最后

<tbody> 可以包含大量的数据,但是浏览器想在接收到所有数据之前先渲染foot。这也是为什么我们把<tfoot>写在前面的原因。

colspan(跨列) 和 rowspan(跨行)

colspan 允许一个单元格跨越多个列,rowspan 允许一个单元格跨越多行。

也就是说,如果你想合并列,你需要使用 rowspan,它允许一跨越多

<table border="1">
  <tr>
    <th colspan="2">Michael Jackson Singles</th>
  </tr>
  <tr>
    <th rowspan="3">1979</th>
    <td>Don't Stop 'Til You Get Enough</td>
  </tr>
  <tr>
    <td>Rock with You</td>
  </tr>
  <tr>
    <td>Off the Wall</td>
  </tr>
</table>
Michael Jackson Singles
1979 Don’t Stop ‘Til You Get Enough
Rock with You
Off the Wall

“Michael Jackson Singles” 行 跨越两列,所以,它下面的一行包括列。

“1979” 跨越了3行,它后面的两行都只有一个单元格,并且给”1979”让出了一列。

一般来说,我们很难去创建一个不规则的表格,一种简单的方式是:先创建2*4的表格,然后删除表格以后添加 colspanrowspan 属性。

在上面这个例子中,我们认为它有8个单元格,我们只写了5个,但是 colspan="2"rowspan="3" 带来了3个单元格。 {: .info}