HTML中什么是表格

這篇文章將為大家詳細(xì)講解有關(guān)HTML中什么是表格，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是表格？

表格是由行和列組成的結(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 獲得更多細(xì)節(jié)內(nèi)容和一個(gè)示例。

這種做法以前是很常見的，因?yàn)橐郧?CSS 在不同瀏覽器上的兼容性比較糟糕 ; 表格布局現(xiàn)在不太普遍，但您可能仍然會(huì)在網(wǎng)絡(luò)的某些角落看到它們。

簡單來說, 使用表格布局而不使用 CSS layout techniques 是很糟糕的. 主要的理由有以下幾個(gè):

表格布局減少了視覺受損的用戶的可訪問性: 屏幕閱讀器, 被盲人所使用, 解析存在于 HTML 頁面上的標(biāo)簽，然后為用戶讀出其中的內(nèi)容。因?yàn)閷τ诓季謥碚f，表格不是一個(gè)正確的工具， 使用的標(biāo)記比使用 CSS 布局技術(shù)更復(fù)雜, 所以屏幕閱讀器的輸出會(huì)讓他們的用戶感到困惑。

表格會(huì)產(chǎn)生很多標(biāo)簽: 正如剛才提到的, 表格布局通常會(huì)比正確的布局技術(shù)涉及更復(fù)雜的標(biāo)簽結(jié)構(gòu)，這會(huì)導(dǎo)致代碼變得更難于編寫、維護(hù)、調(diào)試.

表格不能自動(dòng)響應(yīng): 當(dāng)你使用正確的布局容器 (比如 <header>, <section>, <article>, 或是 <div>), 它們的默認(rèn)寬度是父元素的 100%. 而表格的的默認(rèn)大小是根據(jù)其內(nèi)容而定的。因此，需要采取額外的措施來獲取表格布局樣式，以便有效地在各種設(shè)備上工作。

關(guān)于HTML中什么是表格就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。