HTML表格的基礎

翻譯不完整。 請幫助我們翻譯這篇文章!

這篇文章將帶你從列、格、標頭,以及將各格以數欄、數列的方式合併等基礎開始探索HTML表格。

先備知識:

HTML的基礎(見介紹HTML)

目標: 對HTML表格有基本的認識

什麼是表格?

表格是一個由列和欄組成的結構化資料(tabular data)。表格能幫助你快速查看不同資料類型間的關聯值。例如人和年紀、一周當中的某天或是地方游泳池的時間表。

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

表格在人類社會當中被廣泛使用且已經有很久的歷史,如下是美國1800年的人口普查紀錄表格。

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

這也難怪HTML的開創者要提供一個在網路建立和呈現表格化資料的方法。

表格是怎麼運作的呢?

表格是精確的,資訊可以透過列和欄位名稱之間的視覺關聯輕鬆呈現。觀察以下表格,利用列和欄目名稱找出有62個衛星的類木行星。

有關太陽系星球的資訊 (真實資料取自 Nasa's Planetary Fact Sheet - Metric. )

名稱 質量(1024kg) 直徑 (km) 密度(kg/m3) 重力(m/s2) 一天的長度(小時) 和太陽的距離(106km) 平均溫度 (°C) 衛星的數目 備註
陸地行星 水星 0.330 4,879 5427 3.7 4222.6 57.9 167 0 最接近太陽
金星 4.87 12,104 5243 8.9 2802.0 108.2 464 0
地球 5.97 12,756 5514 9.8 24.0 149.6 15 1 我們的世界
火星 0.642 6,792 3933 3.7 24.7 227.9 -65 2 紅色星球
類木行星 氣態巨行星 木星 1898 142,984 1326 23.1 9.9 778.6 -110 67 最大的星球
土星 568 120,536 687 9.0 10.7 1433.5 -140 62
冰質巨行星 天王星 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
海王星 102 49,528 1638 11.0 16.1 4495.1 -200 14
矮行星 冥王星 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 在2006年被從行星類別中除名,但這還些爭議

在正確執行之下,就連視障者都可以把表格資料詮釋為HTML格式的表格。一份成功的HTML表格就應該如此提升視障者的使用經驗。

表格式樣

你也可以在 GitHub 上看看實際範例 ! 而你也許會注意到那裡的表格似乎更容易閱讀。那是因為這裡的表格只有加上很少樣式,而GitHub上的版本卻應用上了更多明顯的CSS 。

需要弄清楚的一點是 : 要讓表格在網頁上有效呈現需要提供紮實的HTML架構和CSS樣式資訊,但將在這個模組中聚焦在HTML的部分。若想瞭解CSS的部分,可以在完成這部分閱讀之後造訪表格樣式設計的文章。

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

何時你不該用HTML表格?

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
  3. Tables are not automatically responsive: When you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.

主動學習:建造你第一個表格

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags:
    <td>Hi, I'm your first cell.</td>
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:
    <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>

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

  1. Place the four cells you've already created inside <tr> tags, like so:
    <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>
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.

This should result in a table that looks something like the following:

Hi, I'm your first cell. I'm your second cell. I'm your third cell. I'm your fourth cell.
Second row, first cell. Cell 2. Cell 3. Cell 4.

Note: You can also find this on GitHub as simple-table.html (see it live also).

用 <th> 加上標頭元素

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

Now the actual rendered table:

Knocky Flor Ella Juan
Breed Jack Russell Poodle Streetdog Cocker Spaniel
Age 16 9 10 5
Owner Mother-in-law Me Me Sister-in-law
Eating Habits Eats everyone's leftovers Nibbles at food Hearty eater Will eat till he explodes

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

主動學習 : 表格標頭

Let's have a go at improving this table.

  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

標頭為什麼實用?

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

允許列或欄的儲存格合併

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

The initial markup looks like this:

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

But the output doesn't give us quite what we want:

Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Hen
Rooster

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

Let's use colspan and rowspan to improve this table.

  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
  4. Save and open your code in a browser to see the improvement.

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

Providing common styling to columns

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as :nth-child().

Note: Styling columns like this is limited to a few properties: border, background, width, and visibility. To set other properties you'll have to either style every <td> or <th> in the column, or use a complex selector such as :nth-child().

Take the following simple example:

<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>

Which gives us the following result:

Data 1 Data 2
Calcutta Orange
Robots Jazz

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

<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>

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column.

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

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

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

Active learning: colgroup and col

Now it's time to have a go yourself.

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

Recreate the table by following the steps below.

  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
  3. The first two columns need to be left unstyled.
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).

Summary

That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.