為什么說在網(wǎng)頁制作時應(yīng)該避免將表格用于網(wǎng)頁布局

2022-05-15    分類： 網(wǎng)站建設(shè)


如果你做網(wǎng)站建設(shè)開發(fā)已經(jīng)有很多年，比如說2010年以前，一定知道當(dāng)時的網(wǎng)頁排版布局方式多半基于table方式，而不是現(xiàn)在的使用的div+css。顯然，學(xué)習(xí)編寫CSS布局會很棘手，特別是如果您熟悉使用表格來創(chuàng)建精美的Web頁面布局的話?？墒牵m然HTML5允許表格進行布局，但這并不是一個好建議，為什么說在網(wǎng)頁制作時應(yīng)該避免將表格用于網(wǎng)頁布局？無論從網(wǎng)頁加載速度，還是搜索引擎收錄，亦或者網(wǎng)頁的排版局部開發(fā)效率等，我們均不建議使用老舊的table樣式。
table嵌套加載緩慢
就像搜索引擎一樣，大多數(shù)屏幕閱讀器按照網(wǎng)頁在HTML中的顯示順序閱讀網(wǎng)頁，而表格對于屏幕閱讀器來說可能很難解析。這是因為表格布局中的內(nèi)容雖然是線性的，但在從左到右和從上到下閱讀時并不總是有意義的。另外，使用嵌套的表格，以及表格單元格上的不同跨度，可能會使頁面變得非常難以理解。這就是HTML5規(guī)范不建議使用表進行布局的原因，也是HTML4.01不允許這樣做的原因。可訪問的網(wǎng)頁允許更多的人使用它們，并且是專業(yè)設(shè)計師的標志。使用CSS，您可以將一個部分定義為屬于頁面的左側(cè)，但將其放在HTML中的最后一個位置。然后，屏幕閱讀器和搜索引擎都將首先讀取重要部分(內(nèi)容)，然后再閱讀不太重要的部分(導(dǎo)航)。
table布局很麻煩
即使您使用Web編輯器創(chuàng)建表格，您的網(wǎng)頁仍將非常復(fù)雜且難以維護。除了最簡單的網(wǎng)頁設(shè)計之外，大多數(shù)布局表格都需要使用大量的AND屬性和嵌套表。構(gòu)建表格看起來似乎很容易，但一旦完成，您就需要維護它。六個月后，可能不太容易記住為什么嵌套表或一行中有多少個單元格，以此類推。更不用說，如果您作為一個團隊成員維護Web頁面，您必須向每個參與的人解釋這些表是如何工作的，或者希望他們在需要進行更改時花費更多的時間。
CSS也可能很復(fù)雜，但它將表示從HTML中分離出來，并使其更易于長期維護。此外，使用CSS布局，您可以編寫一個CSS文件，并設(shè)置所有頁面的樣式以使其看起來像這樣。然后，當(dāng)您想要更改站點的布局時，只需更改一個CSS文件，整個站點就會發(fā)生變化-不再一次檢查每個頁面來更新表以更新布局。
table布局不靈活
雖然可以創(chuàng)建具有百分比寬度的表布局，但它們的加載速度通常較慢，并且可能會顯著改變布局的外觀。但是，如果您對表使用指定的寬度，則最終會出現(xiàn)一個非常僵硬的布局，在與您自己的大小不同的監(jiān)視器上看起來不會很好。創(chuàng)建在許多顯示器、瀏覽器和分辨率上看起來很好的靈活布局相對容易。事實上，使用CSS媒體查詢，您可以為不同大小的屏幕創(chuàng)建單獨的設(shè)計。
對于相同的設(shè)計，嵌套表的加載速度比CSS慢。創(chuàng)建帶有表的花哨布局的最常見方法是“嵌套”表。這意味著一個(或多個)表被放在另一個表中。嵌套的表越多，Web瀏覽器呈現(xiàn)頁面所需的時間就越長。
在大多數(shù)情況下，表格布局使用比CSS設(shè)計更多的字符來創(chuàng)建。更少的字符意味著更少的下載。
table布局會影響搜索引擎的優(yōu)化
最常見的表格創(chuàng)建布局在頁面左側(cè)有導(dǎo)航欄，在右側(cè)有主要內(nèi)容。在使用表時，這(通常)要求HTML中顯示的第一個內(nèi)容是左側(cè)導(dǎo)航欄。搜索引擎根據(jù)內(nèi)容對頁面進行分類，許多引擎確定顯示在頁面頂部的內(nèi)容比其他內(nèi)容更重要。因此，首先使用左側(cè)導(dǎo)航的頁面所包含的內(nèi)容看起來并不像導(dǎo)航那么重要。使用CSS，您可以將重要內(nèi)容放在HTML中，然后使用CSS確定其在設(shè)計中的位置。這意味著搜索引擎將首先看到重要的內(nèi)容，即使設(shè)計將其放在頁面的下方。
table布局并不總是能很好地打印
許多表格設(shè)計不能很好地打印，因為它們對打印機來說太寬了。因此，為了使它們適合，瀏覽器將剪除表格，并打印下面的部分，從而導(dǎo)致非常不連貫的頁面。有時你得到的頁面看起來還不錯，但整個右邊都不見了。其他頁面將在不同的紙張上打印部分。
使用CSS，您可以創(chuàng)建一個單獨的樣式表，僅用于打印頁面。
用于布局的table在HTML 4.01中無效
HTML4規(guī)范指出：“表不應(yīng)該僅僅用作布局文檔內(nèi)容的一種方式，因為這在呈現(xiàn)到非可視媒體時可能會出現(xiàn)問題?！币虼?，如果要編寫有效的HTML4.01，則不能使用表進行布局。您應(yīng)該只對表格數(shù)據(jù)使用表格，表格數(shù)據(jù)通常看起來像您可能在電子表格或數(shù)據(jù)庫中顯示的內(nèi)容。但是，HTML5更改了規(guī)則，現(xiàn)在用于布局的表雖然不推薦，但現(xiàn)在被認為是有效的HTML。HTML5規(guī)范規(guī)定：“表不應(yīng)用作布局輔助工具。”這是因為屏幕閱讀器很難區(qū)分用于布局的表格，如前所述。使用CSS來定位和布局頁面是獲得用于創(chuàng)建表的設(shè)計的唯一有效的HTML4.01方法，HTML5也強烈建議使用這種方法。
用于布局的表格可能會影響您的工作前景
隨著越來越多的新設(shè)計師學(xué)習(xí)HTML和CSS，您在構(gòu)建表布局方面的技能將越來越少。是的，的確，客戶通常不會告訴您應(yīng)該使用哪種技術(shù)來構(gòu)建他們的網(wǎng)頁，但他們確實會提出以下要求：
  • 可訪問性網(wǎng)頁：許多國家和公司要求可供屏幕閱讀器查看的設(shè)計越來越重要。
  • 可維護的網(wǎng)頁：即使你將來不打算維護它們，它們也可以隨身攜帶設(shè)計。
  • 靈活的設(shè)計：適用于多種瀏覽器、分辨率和設(shè)備的設(shè)計。
  • 快速下載頁面：速度變得越來越重要，甚至對搜索引擎優(yōu)化(SEO)也是如此。
  • 可打印設(shè)計：打印時沒有特殊腳本或額外頁面的頁面。
如果你不能滿足客戶的要求，他們就不會再來找你設(shè)計了-到此為止。你真的能承擔(dān)得起讓你的企業(yè)遭受損失，因為你不愿意學(xué)習(xí)和采用一種自上世紀90年代末以來就一直在使用的技術(shù)嗎？CSS可能很難學(xué)習(xí)，但任何值得付出的努力都是值得的。不要讓你的技能停滯不前。學(xué)習(xí)CSS，并按照構(gòu)建網(wǎng)頁的方式構(gòu)建網(wǎng)頁-使用CSS進行布局。

網(wǎng)頁題目：為什么說在網(wǎng)頁制作時應(yīng)該避免將表格用于網(wǎng)頁布局
文章地址：http://www.muchs.cn/news/153459.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、做網(wǎng)站、靜態(tài)網(wǎng)站、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)