๏ palermos cafe ๏

สำหรับเอนทรี่นี้นะครับ ผมจะมานำเสนอ (ไม่ใช่คำว่าสอนนะ)  เทคนิคการใช้ css เพื่อตกแต่งตารางที่สร้างด้วย tag <table><table>ซึ่งการใช้ตารางในการออกแบบเว็บ หรือบล็อกมันก็ไม่ได้เป็นสิ่งที่น่ารังเกียจในการออกแบบเว็บมาตรฐาน 2.0 นะ หลายๆคนพอคล่องการใช้ div แล้ว ก็จะไม่สนใจการสร้างตารางด้วย table ซึ่งการใช้ตารางมันก็ไม่ได้เป็นข้อห้ามของ w3 นะครับ ตรงกันข้ามมันก็ใช้งานง่าย (แต่โค้ดยาว...เท่านั้นแหละ) ซึ่งถ้าเราสร้างตารางด้วย div มากกว่า 1คอลัมน์ ในคลาสเดียวกันนั้น เวลาสั่งให้เรียงคอลัมน์กัน ก็ต้องพิมพ์ค่า display กับ float ไม่เช่นนั้นกล่อง div มันจะขี่คอกัน

อ่านพื้นฐานการสร้าง div เป็นตารางกันได้ที่เว็บนี้ครับ

• จัดตำแหน่งด้วย float กับ clear
• ทำ layout ให้สูงเท่ากันทุกคอลัมน์

ถ้าเป็นตารางคอลัมน์เดียวผมว่าใช้ div ง่ายกว่าเยอะแต่ถ้ามากกว่า 2 ก็ต้องใส่ propertiesกันอุตลุต งั้นกลับไปเล่นเบสิคๆด้วย table ดู

สำหรับโครงสร้าง html ตารางจะมีลักษณะอย่างรูปนี้นะครับ (ตาม มาตรฐาน xhtml1.0 ซึ่ง  iDoctype แบบ html 4.01 ใน exteen ก็ใช้ได้เหมือนกัน)

<table id="ใส่กรณีที่เรียกจาก# " class="ใส่กรณีที่เรียกจาก. ">
<!-- Table header -->
    <thead>
        <tr>
        <th scope="col">หัวตาราง1</th>
        <th scope="col">หัวตาราง2</th>
        </tr>
    </thead>
    <!-- Table footer-->
        <tfoot>
       <tr>
            <td>ท้ายตาราง1</td>
        <td>ท้ายตาราง2</td>
        </tr>
    </tfoot>
<!-- Table body -->
    <tbody>
        <tr>
            <td>เซลล์1</td>
        <td>เซลล์2</td>
        </tr>
        <tr>
            <td>เซลล์3</td>
        <td>เซลล์4</td>
        </tr>
    </tbody>
</table>   

ข้างต้นเป็นโค้ดhtmlทั่วไปของตาราง3*2 และท่านสามารถหาอ่านพื้นฐานภาษา HTML table  เพิ่มเติมทีนี่ครับ

ในแท็ก html แบ่งเป็นสามส่วน คือ

• thead คือ ตัวหัวตาราง
• tbody คือ ตัวเนื้อตาราง
• tfoot คือ ท้ายตาราง

ปกติผมไม่ค่อยเห็นใครใส่ thead กับ tfoot กันเท่าไหร่นะ สงสัยคงจะโค้ดตารางใน Dreamweaverจนเคยตัวกัน ซึ่งโค้ดผ่านโปรแกรมที่ว่า บางทีเราก็ได้โค้ดแบบรกๆ มาเยอะเหมือนกันนะครับ

ลองมาดูตารางตัวนี้ี ที่ผ่านการตกแต่งด้วย css

โค้ด html ของตัวอย่างข้างต้น

ซึ่ง css โค้ดตัวนี้คือ

.simply{
font:14px Trebuchet MS, Tahoma;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
.simply th{
font:normal 16px Trebuchet MS, Tahoma;
color: #222;
background:#cbeffd;
padding: 10px 8px;
border-bottom: 2px solid #ccc;
}
.simply td{
border-bottom: 1px solid #ccc;
color: #666;
background: #fff;
padding: 5px;
}
.simply tbody tr:hover td{
color: #222;
background: #eee;
}

ลองเอาไปประยุกต์ใช้กันดูนะครับ เพิ่มค่า class="simply" ใน แท็ก html <table class="simply">ที่บรรทัดแรก แล้วก็ปรับเปลี่ยนค่าในแต่ละคลาสตามความต้องการ จะใส่ตารางขอบโค้งก็สามารถทำได้เช่นกัน หรือจะใส่รูปพื้นหลังในตารางก็ปรับค่าใน .simply ได้เลย แค่พอมีพื้นฐานการเขียน css เท่านั้นครับ

ปล. เอนทรี่นี้นั่งเขียนให้เป็นเรื่องเป็นราวอยู่สองวันแหนะ...  บ้าพลังชิบ