สร้างตารางด้วย DIV ใครว่ายาก
.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>
ผลลัพท์จะได้ดังด้านล่างนะครับ ผมใส่สีสันนิดหน่อยเพื่อให้ดูง่าย
TH
TH
TD
TD
จะเห็นว่าการใช้ DIV แทนตารางไม่ได้ยุ่งยากอย่างที่คิด เพียงแค่เราสร้าง class เตรียมไว้หลังจากนั้นเมื่อต้องการให้ส่วนใดแสดงผลเหมือนตารางก็เพียงแค่กำหนด class ให้มันเท่านั้น
คำแนะนำเพิ่มเติม
- ควรสร้าง DIV ให้ถูกต้องตามโครงสร้างด้านบน เพื่อให้การแสดงผลเหมือนๆกันในทุก Browser
- อย่าลืมว่าโค้ดด้านบน "ไม่ใช่ตาราง" ดังนั้นการตีความข้อมูลในส่วนนี้จาก Search Engine หรือ อุปกรณ์อ่านสำหรับผู้พิการ จะไม่ถูกตีความว่าเป็น "ข้อมูลในตาราง" ดังนั้น ให้เลือกใช้ให้ถูก กาละเทศะ ด้วย ถ้าสิ่งที่คุณต้องการสื่อสารเป็นข้อมูล จงใช้ตารางเถอะ