本文將從HTML表格開始,介紹一些基本的內(nèi)容。
什么是表格?(推薦學(xué)習(xí):HTML入門教程)
表格是由行和列組成的結(jié)構(gòu)化數(shù)據(jù)集(表格數(shù)據(jù)),它能夠使你簡捷迅速地查找某個(gè)表示不同類型數(shù)據(jù)之間的某種關(guān)系的值 。比如說,某個(gè)人和他的年齡,一天或是一周,當(dāng)?shù)赜斡境氐臅r(shí)間表 。
表格在人類社會(huì)中很常見,而且已經(jīng)存在很長時(shí)間了,下面這張1800年的美國人口普查文件中就可以證明:
因此,HTML的創(chuàng)建者們提供了一種方法來構(gòu)建和呈現(xiàn)web上的表格數(shù)據(jù),這也就不足為奇了。
表格如何工作?
表格的一個(gè)特點(diǎn)就是嚴(yán)格. 通過在行和列的標(biāo)題之間進(jìn)行視覺關(guān)聯(lián)的方法,就可以讓信息能夠很簡單地被解讀出來。
正確完成后, 即使是盲人也可以解析 HTML 表格中的數(shù)據(jù),一個(gè)成功的 HTML 表格應(yīng)該做到無論用戶是視力正常還是視力受損,都能提高用戶的體驗(yàn)。
你可以在 GitHub 上找到上面表格的 HTML源碼 ; 先去看看, 你也許會(huì)注意到一件事情,那就是這個(gè)表格看上去可讀性不是很好,那是因?yàn)楝F(xiàn)在這個(gè)頁面上面的那個(gè)表格通過 MDN 站點(diǎn)添加了一些樣式, 而 GitHub 上面的并沒有添加。
不要幻想; 為了能夠讓表格在網(wǎng)頁上有效, 你需要提供一些 CSS 的樣式信息,以及盡可能好的 HTML 固定結(jié)構(gòu). 在這個(gè)模塊中,我們將專注于 HTML 部分; 在你完成這里的內(nèi)容之后,你可以瀏覽 Styling tables 來了解 CSS 的部分。
雖然在這個(gè)模塊中我們不會(huì)專注于 CSS, 但是我們提供了一個(gè)較小的 CSS 樣式表讓你使用,和默認(rèn)的沒有采用任何 CSS 樣式的表相比,表格會(huì)更加可讀。 你可以在 stylesheet here 獲取樣式表,以及在 HTML template 獲取 HTML 文件來應(yīng)用樣式表,這些會(huì)讓你在 “測試 HTML 表格” 中有一個(gè)好的起點(diǎn)。
什么時(shí)候你不應(yīng)該使用 HTML 表格?
HTML 表格 應(yīng)該用于表格數(shù)據(jù) ,這正是 HTML 表格設(shè)計(jì)出來的用途. 不幸的是, 許多人習(xí)慣用 HTML 表格來實(shí)現(xiàn)網(wǎng)頁布局, e.g. 一行包含 header, 一行包含幾列內(nèi)容, 一行包含 footer, etc. 你可以在我們的 Accessibility Learning Module 中的 Page Layouts 獲得