Re: [問題] table 列合併語法

作者: cqwt (tony)   2018-11-06 05:03:32
原 PO:
跟你內文的理解沒關聯。
這幾位可能比較年輕,沒遇上早期的情況,或是最近才接觸相關的東西。
以前 CSS 不完全甚至還沒有的時候,純 Html 是由上到下、照規範渲染的,block 的東西你想要左右並排基本不可能,inline 的東西你想上下排也沒辦法。
任何定位也都沒有。現在做定位可能會用 padding、position 之類的,但這是 CSS,那還沒有 CSS 的時候怎麼辦呢?
沒辦法定位的話,要是想做一個有背景、有圖有文有圓角按鈕的網站怎麼辦呢?
那就是利用表格的天性了。
就像堆積木一樣,每一格都是網站的一小部份,把整個網站堆起來。
舉個例子,現在要做一個圓角矩形方塊背景的文字區塊,會在 text 的外面用 border radius。
但以前沒這東西,我們會用 table 去做出一個 3x3的表格,左上、左下、右上、右下填充圓角的圖片,上下左右是一個方形的圖片、中間就是 text 本身。
用這樣的方式去堆出一個圓角矩形。
在 IE 還不支援透明 png 的時候,還曾出現一格 1px 去堆出圓角的瘋狂行為。
在 IE 還不支援透明 png 的時候,還曾出現一格 1px 去堆出圓角的瘋狂行為。
然後 table 本身就可以再包含 table,你可以想像能這樣一層包一層的堆出有很多設計元素的網站。
如果你用過 PS 之類的切片工具就會知道,切完輸出的東西就是一堆圖塊,然後你按原本的順序填進 table 中,就會變成你原本設計的網站了。
但其實 table 本身不該這樣用,html 設計上也不是這用意,html 不該用於任何樣式用途。但早期為了好看沒辦法。
CSS 2 的時候,還有一些我們想要的東西辦不到,還是會有很多人用 html 做樣式用途,或是用不合規範的方式去做,到 CSS 3 的時候基本就完全沒必要了。
你文中說 table 填 ul ol 再用 CSS 做 layout 這段我沒看懂,什麼情況要這樣用?
用 ul li 再 float 做橫向 nav 以前很常見,現在也滿多的,但這其實不是 layout 用意,ul 這樣用是有意義的。
中間的轉換期很多都是因為 CSS 規範制定了,但瀏覽器還沒實作,或是因為早期的 IE 太特例獨行,導致很多非 html 規範意圖的作法,久而久之很多不是那麼在意這些東西的人就一直用不正確、不嚴謹的方式實作。
有一陣子凡是在寫 html 教學的網站都會特別跟大家說「別再用 html 的 XXX 去做 XXX,請用 CSS 的 XXX」。
※ 引述《ppnow (no ways)》之銘言:
: 豎山
: 我是推文裡發問為何W3S不建議使用
: HTML做table的新手,感謝幾位的指導。
: HTML做table的新手,感謝幾位的指導。
: W3S內的說明跟xd大講的很接近,
: 是指不建議用HTML table “layout“,
: (題外話大家是翻譯成排版還是佈局?)
: 網頁來源
: https://www.w3schools.com/html/html_layout.asp
: 截圖如下
: http://i.imgur.com/8DkoVuo.jpg
: http://i.imgur.com/WrI9JIm.jpg
: 我想了解的是,網站上的table基本上都是
: 要經過layout的,所以習慣的做法是在
: HTML table的ul ol li輸入資料,然後再以
: CSS style來layout這樣嗎?
: 例如把直向列表用float改成橫向,類似nav
: 列表,似乎是目前流行的做法
: 還是有其他主流做法?
: 新手發問可能很蠢很簡單,或問的不好,
: 請大大不吝指導,謝謝
:
作者: pkro12345 (席龍)   2018-11-06 05:06:00
作者: ccw1210 (CC)   2018-11-06 09:09:00
作者: nottt (無)   2018-11-06 11:34:00
歷史課,在css到css2的則是大flash時代
作者: cuxy6705 (cuxy)   2018-11-06 13:39:00
太神了
作者: ppnow (no ways)   2018-11-06 14:18:00
太棒的歷史說明,謝謝。我就是想知道這些,不過知識尚淺還無法完全吸收。我不年輕了只是喜愛學習,哈哈想一想我在唸書的時候,有看過1px堆圓角的圖形,只是當時不懂HTML。所以現在CSS3,基本上就完全可切開了,HTML5寫資料,CSS3做樣式。
作者: j355066   2018-11-06 18:33:00
作者: shter (飛梭之影)   2018-11-06 22:09:00
推,十年前做圓角 Button 真的是這樣堆出來的不過還是很懷念那個做法,直接換 background-image 換造型
作者: pandaz79418 (批炸)   2018-11-07 01:09:00
推一個
作者: zased (我只是上PTT查資料)   2018-11-07 09:22:00
感謝分享。我待兩家企業都是用table排版,有天驚覺div跟css就可以就自己偷偷全部改寫了
作者: xdraculax (首席怪叔叔)   2018-11-07 10:23:00
說起來就覺得好笑,古早圓角困難,大家都愛搞圓角,覺得圓角就是高上大,後來圓角簡單,大家又不愛圓角,說簡約才是時尚,現在圓角又有點死灰復燃了,FB沒底線的圓,時尚真難懂

Links booklink

Contact Us: admin [ a t ] ucptt.com