搜尋
首頁web前端css教學從Table轉換到Css的優缺點比較_經驗交流

CSS版面設計提倡者的聲音正被"表格版面的優點"的聲音所覆蓋。一個荒誕的說法是CSS是難學的。事實上,CSS一點也不比其他網頁技術難。問題在於:對於表格設計已經相當有經驗的web設計師不得不完全放棄他們的思維模式改用CSS方法。

我曾經用表格佈局設計過許多年,當我第一次開始使用CSS佈局時,我也遇到了問題。 "用表格多簡單呀"我想。但是,那隻是因為我已經用慣了表格,我知道如何巧妙的處理它們。任何改變,即使是小小的一點,都會讓我覺得麻煩,更不用說這麼激烈的變化。

回憶起我第一次學習用表格佈局,同樣有一大堆的問題困繞著我。回頭想想那些rowspans, colspans以及空白的GIF圖片,公平的說這兩種佈局方法,用表格佈局更難些。

另一個陳舊的觀點是:CSS設計的頁面(位元組數)非常大,比表格設計的頁面大。理由是:因為你將整個網站所有的樣式都放在一個文件裡,當使用者造訪一個頁面,包含整個網站樣式的樣式表都需要下載,因此頁面非常大。 

那為什麼你要將所有樣式都放在一個CSS檔案裡?沒有人會限制你只能用一個CSS文件,你完全可以為某部分章節的細節樣式設立單獨的子樣式表文件。在我的經驗裡,從簡單的手冊型網站到大型的資料庫驅動,多功能的系統網站,我從來沒有隻用過單獨一個樣式表文件,沒有一個首頁的程式碼比用表格設計的多。那些table,tr,td標籤佔據了大量空間,立刻行動起來吧,用CSS佈局方法將你的檔案尺寸猛砍下來。

當你用表格佈局時,你失去了標籤本身的語意。 web標準方法佈局分離了內容和表現層將帶來巨大的好處。當你用表格鎖定了你的設計,一旦你需要改變它,你必須找到這個頁面,然後再分析出表格結構,再一頁一頁修改,而CSS檔案可以簡單的改變整個網站的設計。用CSS你根本無須考慮設備無關性,無須考慮使用者選擇自己的樣式。

也聽說一個表格的"好處":設計forms。但是forms可以用任何方法實現表格排列。是為了Netscape4? 我從來沒聽過支援這麼老的瀏覽器是一個理由。大部分主流瀏覽器的使用者利益遠大於少數的用不支援樣式表的瀏覽器的使用者的利益(先不說CSS也支援純文字)。

那些"超級表格"支持者的觀點歸結起來就是一點:"表格更容易。"這是胡說!如果你滿足於一個低效率的方法,那就隨你的便。如果你想突破限制,讓頁面內容更通用、更容易用,程式碼更加少,那就努力轉變吧。當然如果你是新學網頁設計,從頭開始,你就不會有這些問題。

"小車不倒只管推","這只是設計師工具箱裡的工具而已。"這是一些討論者的觀點。表格佈局像一把老式的木頭柄螺絲起子,你可以仍舊使用它來鑽進一面牆。而我寧願使用電動的螺絲起子,CSS佈局更有效率,不會讓我的手再起水泡。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
什麼是CSS網格?什麼是CSS網格?Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜,響應式Web佈局的強大工具。它簡化了設計,提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox?什麼是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應?我們如何使用CSS使網站迅速響應?Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

CSS盒裝屬性有什麼作用?CSS盒裝屬性有什麼作用?Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫?我們如何使用CSS動畫?Apr 30, 2025 pm 03:17 PM

文章討論使用CSS,關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎?我們可以使用CSS向我們的項目添加3D轉換嗎?Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換,關鍵屬性,瀏覽器兼容性和性能注意事項的討論。 (角色計數:159)

我們如何在CSS中添加梯度?我們如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度(線性,徑向,重複)來增強網站視覺效果,添加深度,焦點和現代美學。

CSS中的偽元素是什麼?CSS中的偽元素是什麼?Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素,它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),