ทำไมเราไม่ควรใช้ <table> ในการออกแบบ

41

อะไรคือเหตุผลที่ชัดเจนและมีเหตุผลว่าทำไมเราไม่ควรออกแบบเว็บไซต์ที่มีตาราง ประโยชน์อยู่ที่ไหนสิ่งที่ขับเคลื่อนความคิดนี้ในอุตสาหกรรม? เมื่อไรที่จะใช้โต๊ะได้?

— ไม่ระบุตัวตน
แหล่งที่มา

อภิปรายอย่างกว้างขวางเกี่ยวกับ SO stackoverflow.com/questions/83073/…

— Gabriele Petrioli

Google ใช้ตารางเองภายใน adwords เป็นต้น ด้วยผู้ลงโฆษณาหลายล้านคนกำลังเข้าสู่ระบบและทำงานกับข้อมูลแบบไดนามิกมันง่ายกว่าในการเขียนโค้ดรอบ<table>กริด CSS ฉันใช้ datatables.net สำหรับแอปพลิเคชั่นบางตัวและคุณสามารถดูรายการผู้ใช้ปลั๊กอิน jquery นั้นบนไซต์ของพวกเขา เว็บไซต์จำนวนมากยังคงใช้ตารางด้วยเหตุผลที่ดี ฉันใช้ตารางเท่านั้นเมื่อทำงานกับข้อมูลแบบไดนามิกจำนวนมากที่ต้องเรียงลำดับตามคอลัมน์ให้เลขหน้า ฯลฯ แต่ไม่ใช่สำหรับเค้าโครงหน้ากระดาษซึ่งเป็นสิ่งที่ CSS ใช้

— Anagio

71

1) ไม่ควรใช้ตารางสำหรับเค้าโครงหน้ากระดาษเนื่องจากเป็น:

ช้าในการแสดงผลเนื่องจากเบราว์เซอร์จำเป็นต้องดาวน์โหลดมากที่สุด - หากไม่ใช่ทั้งหมดของตารางเพื่อให้แสดงผลได้อย่างถูกต้อง
พวกเขาต้องการ HTML มากกว่ารูปแบบที่ไม่ใช่ตารางซึ่งหมายถึงการโหลดและเรนเดอร์ที่ช้ากว่ารวมถึงการใช้แบนด์วิดท์ที่เพิ่มขึ้น
พวกเขาอาจเป็นฝันร้ายที่ต้องรักษาเพราะพวกเขาสามารถซับซ้อนได้อย่างรวดเร็ว
พวกเขาสามารถทำลายการคัดลอกข้อความ
พวกเขาส่งผลเสียต่อโปรแกรมอ่านหน้าจอและอาจทำให้ผู้ใช้บางรายเข้าถึงเนื้อหาของคุณไม่ได้
พวกเขาไม่ยืดหยุ่นเท่ากับการใช้มาร์กอัปความหมายที่เหมาะสม
พวกเขาไม่เคยตั้งใจที่จะใช้สำหรับเค้าโครงหน้า
การสร้างตารางลงในเค้าโครงที่ตอบสนองได้ยากมากที่จะควบคุม

2) ใช้ตารางสำหรับข้อมูลตาราง นั่นคือสิ่งที่ตารางมีไว้สำหรับ

ดูเพิ่มเติมที่: ทำไมผู้คนถึงทำโต๊ะกับ div?

— John Conde
แหล่งที่มา

1

ถูกต้องดังนั้นถ้าฉันมีส่วนในรายละเอียดการติดต่อที่ตกลงที่จะมีตารางสำหรับ แต่รูปแบบกราฟิกของหน้าอยู่ใน DIVs หรืออะไรทำนองนั้นพวกเขา ฉันเคยเห็นนักออกแบบบางคนหลีกเลี่ยงพวกเขาทั้งหมดในพื้นที่ที่มีข้อมูลแบบตารางและใช้ DIV

— ไม่ระบุตัวตน

18

นักออกแบบที่หลีกเลี่ยงตารางโดยสิ้นเชิงไม่รู้ว่ากำลังทำอะไรอยู่ พวกเขาเข้าใจผิดว่า "ไม่ใช้ตารางสำหรับการจัดหน้า" หมายความว่าอย่างไร

— John Conde

1

มันโง่ที่จะหลีกเลี่ยงตารางทั้งหมด แต่มีทางเลือกที่ถูกต้องสำหรับตารางในการติดต่อข้อมูล รายการความหมายเป็นทางเลือกที่ดีโดยเฉพาะอย่างยิ่งเมื่อการดำเนินการ hCard: cagintranet.com/archive/...

— หมิ่นฯ

2

@Litso: คุณควรอ่านข้อมูลจำเพาะของ W3C DLก่อนที่คุณจะตัดสินใจว่าอะไรดีหรือไม่ดี

— Lèsemajesté

1

นอกจากนี้ยังมีตำแหน่ง: แท็ก CSS ของตารางสำหรับการสร้างโครงร่างแบบตารางโดยไม่ต้องวางไว้ใน HTML มีกรณีเฉพาะบางกรณีที่ตารางยังคงเป็นตัวเลือกที่ดีที่สุด / ง่ายที่สุดสำหรับเค้าโครง ลองดู @ css-tricks.com/fluid-width-equal-height-columnsเพื่อดูว่าฉันหมายถึงอะไร

— Evan Plaice

8

ตารางใช้สำหรับข้อมูลแบบตารางไม่ใช่การออกแบบ ผู้คนมักเข้าใจผิดแรงจูงใจเบื้องหลังการทำหน้า "tableless"

ผิดที่จะใช้ตารางเพื่อสร้างเค้าโครงของคุณ คุณควรใช้องค์ประกอบอื่น ๆ สำหรับการจัดวาง (divs, list, section, article, header, footers, asides, ฯลฯ ) และคุณสามารถสร้างเอฟเฟ็กต์ที่ยอดเยี่ยมด้วย HTML / CSS ที่น้อยที่สุด (ปล่อยให้โค้ดของคุณมีความหมายเบาและบำรุงรักษาง่าย)

แน่นอนข้อมูลตารางควรอยู่ในองค์ประกอบตาราง หากคุณต้องการคุณสามารถปรับปรุงความหมายของตารางได้โดยการเพิ่ม thead, tfoot, tbody, th, caption เป็นต้นองค์ประกอบเหล่านั้นมีจุดประสงค์เพื่อใช้กับตารางและเชื่อฉันพวกมันสามารถทำให้ตารางของคุณมีความหมายมากขึ้น .

ดังนั้นอย่าไปกับการออกแบบบนโต๊ะและใช้โซลูชัน HTML / CSS ใด ๆ ที่เหมาะกับคุณ เริ่มต้นจากมาร์กอัพ semantic แบบ HTML จากนั้นสร้างการออกแบบด้วย CSS สิ่งนี้จะทำให้ทุกคนปลอดภัย ใช้สิ่งนี้เป็นกฎง่ายๆ

— เดฟ
แหล่งที่มา

3

ตารางควรจะมีข้อมูลและไม่ได้ออกแบบองค์ประกอบ

— sdadffdfd
แหล่งที่มา

3

ควรใช้ตารางเมื่อแสดงข้อมูลแบบตารางเท่านั้น มิฉะนั้นพวกเขามักจะเป็นทางเลือกที่ดีสำหรับการแสดงผล

— Chris Ballance
แหล่งที่มา

ทำไมต้องลงคะแนน

— Chris Ballance

0

สาเหตุที่แท้จริงที่ไม่ใช้ตารางคือ:

เค้าโครงเริ่มต้นของตารางคือ: table-layout:fixed

สิ่งนี้บอกให้เบราว์เซอร์วิเคราะห์ตารางและแก้ไขเซลล์เพื่อให้มีองค์ประกอบอยู่ภายในซึ่งใช้เวลาพอสมควร (นี่คือเหตุผลว่าทำไมตารางจึงดีสำหรับข้อมูลที่ซับซ้อน)

Bottom line: ตารางจะแสดงหลังจากเนื้อหาทั้งหมดที่อยู่ภายในมีการแสดงผลซึ่งตรงข้ามกับการใช้ตัวอย่างองค์ประกอบ DIV

— YardenST
แหล่งที่มา

-3

ฉันใช้ตารางสำหรับโครงสร้างการออกแบบเว็บในของเหลวผสมกับการแก้ไขและฉันรู้ว่าหลายคนบอกว่าตารางสำหรับ noobs คนอื่นบอกว่าพวกเขามีไว้สำหรับพวกโรงเรียนเก่าที่มักจะบอกว่า DIVS ดีที่สุด แต่ความจริงก็คือตารางนั้นดีกว่า สิ่งอื่น ๆ.

ดีกว่า<br>หรือ<p></p>อะไร สิ่งเดียวกัน

ฉันและตารางเก่าของฉันในการออกแบบเว็บไซต์ใหม่ของฉันในปี 2015 สามารถเตะก้นให้กับทุกคนด้วยมือถือที่เป็นมิตรของฉันความกว้าง 100% ผสมกับ 2 คอลัมน์ด้านข้าง 200px แต่ละอัน

เห็นได้ชัดว่าภายในตารางนั้นน่าเกลียดที่จะวางตารางมากขึ้นเรื่อย ๆ นั่นคือสิ่งที่ DIVS มีประโยชน์ ตารางสามารถทำสิ่งต่าง ๆ divs ไม่สามารถและ div สามารถทำสิ่งต่าง ๆ ตารางไม่ได้

รูปแบบตารางเริ่มต้นเหล่านั้นได้รับการแก้ไข ฉันยกตัวอย่างให้คุณ

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

คุณเห็นศักยภาพตอนนี้หรือไม่? ลองดูบนพีซีและโทรศัพท์มือถือ ใช่แล้วและฉันไม่ต้องการรองเท้าบู๊ตด้วยซ้ำ

ทีนี้การทำเช่นเดียวกันกับ divs คุณจะต้องเขียนโค้ด CSS จำนวนมากเพื่อแสดงการเรียงลอยและอึ ใครเขียนรหัสน้อย ฉัน! ลูกค้าต้องการอะไร ผู้ชายกำลังจะจบหน้าใน 1 ปีหรือ 1 เดือน?

ตอนนี้ให้ปรับปรุงการออกแบบด้วย divs

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

รูปแบบการออกแบบ 5 คอลัมน์ที่สวยงามโดยใช้ div และตาราง

คำตอบของคุณคือ: พวกเขาทั้งสองทำงานร่วมกันได้ดีขึ้นและเร็วขึ้นและจะดูดีในการออกแบบใด ๆ แม้แต่ในทีวีและโทรศัพท์มือถือขนาดเล็ก

— Rodrigo Santiaborg
แหล่งที่มา