GORAGOD.com

การสร้างตารางด้วย Div ไม่ใช่เรื่องยากอย่างที่หลายคนคิดนะครับ เราสามารถเขียน CSS สั้นๆง่ายๆ รวมถึงการเขียน HTML ง่ายๆ เพียงไม่กี่บรรทัดเพื่อให้ได้ตารางได้ แถมยังสวยงามกว่าตารางทั่วๆไปได้อีก

.table {
  display: table;
}
.tr {
  display: table-row;
}
.th {
  float: left;
  display: table-cell;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
.td {
  float: left;
  display: table-cell;
  vertical-align: middle;
}

โค้ด HTML แสนง่าย แถมยังใช้ โค้ดน้อยกว่าการใช้ table เสียอีก (ถูกหลัก HTML)

<div class="table">
  <div class="tr">
   <div class="th">TH</div>
   <div class="th">TH</div>
  </div>
  <div class="tr">
   <div class="td">TD</div>
   <div class="td">TD</div>
  </div>
</div>

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

คำแนะนำเพิ่มเติม

• ควรสร้าง DIV ให้ถูกต้องตามโครงสร้างด้านบน เพื่อให้การแสดงผลเหมือนๆกันในทุก Browser
• อย่าลืมว่าโค้ดด้านบน "ไม่ใช่ตาราง" ดังนั้นการตีความข้อมูลในส่วนนี้จาก Search Engine หรือ อุปกรณ์อ่านสำหรับผู้พิการ จะไม่ถูกตีความว่าเป็น "ข้อมูลในตาราง" ดังนั้น ให้เลือกใช้ให้ถูก กาละเทศะ ด้วย ถ้าสิ่งที่คุณต้องการสื่อสารเป็นข้อมูล จงใช้ตารางเถอะ