การใช้ table บน css ไม่ใช่เรื่องที่ผิด แต่เราควรจะนำมาใช้ให้มันเเหมาะสม ที่ชาว css หลีกหนีจาก table มาใช้ div กันแทน เพราะเว็บไซต์ที่ดี นอกจากหน้าตาภายนอกจะสวยงามแล้ว ภายในพวกโค้ดต่างๆ ก็ควรถูกหลักด้วยเช่นกัน ถ้าถามว่าถูกยังไง ง่ายๆ ลองไปดูเว็บที่ใช้ css เขียน แล้วลองเอาไฟล์ css ออก จะเห็นว่าข้อมูลจะเรียงเป็นระเบียบ อ่านแล้วเข้าใจได้ง่าย ส่วน table ถ้าเอาดีไซน์ออก ก็อาจจะอ่านรู้เรื่อง แต่ข้อมูลไม่เป็นระเบียบ อ่านยากกว่า
ข้อมูลแบบไหนที่เหมาะกับการใช้ table?
ข้อมูลที่มันเป็นตาราง เช่น ข้อมูลของนักเรียน ที่ต้องใส่ ชื่อ-นามสกุล ส่วนสูง น้ำหนัก
ถ้าข้อมูลมันเป็นตาราง ก็ใช้ table ไปเถอะ ถึงจะไม่ชอบก็ยอมขัดใจตัวเองหน่อย
รูปแบบของ table
<table>
<thead>
<tr>
<th scope=”col”>หัวข้อ(1)</th>
<th scope=”col”>หัวข้อ(2)</th>
</tr>
</thead>
<tbody>
<tr>
<td>เนื้อหา(1)</td>
<td>เนื้อหา(2)</td>
</tr>
<tr>
<td>เนื้อหา(1)</td>
<td>เนื้อหา(2)</td>
</tr>
</tbody>
</table>
thhead คือ ส่วนของ table header
thbody คือ ส่วนของ table body
th ใน thhead ก็เปรียบได้กับ td
scope=”col” ใส่เพื่อบอกว่าคอลัมน์ที่อยู่ข้างล่างของ head นี้ คือ ข้อมูลของของ head นั้น
ถ้าไม่ใส่คอมพิวเตอร์จะอ่านข้อมูลจากซ้ายไปขวา ถ้าเป็นตัวอย่างด้านบนก็จะอ่านได้ว่า
หัวข้อ(1) หัวข้อ(2)
เนื้อหา(1) เนื้อหา(2)
เนื้อหา(1) เนื้อหา(2)
ซึ่งจริงๆแล้วมันควรอ่าน
หัวข้อ(1) เนื้อหา(1) เนื้อหา(1)
หัวข้อ(2) เนื้อหา(2) เนื้อหา(2)
ก่อนจบวันนี้มีเว็บมาฝาก แน่นอนว่าต้องเกี่ยวข้องกับเนื้อหาของวันนี้ มันคือ….
Top 10 CSS Table Designs รูปแบบตาราง 10 แบบยอดนิยมที่มักจะใช้กัน
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/