❦❦❦
<table style="background:url('ลิ้งค์รูปจ้ะ'); border:2px outset gold3;" cellspacing="0" cellpadding="35" width="100%">
<tr>
<td>
ข้อความหรือรูปภาพจ้ะ (Object)
</td>
</tr>
</table>
❦❦
มีใครแอบคิดในใจว่า "ไหมมานกวนTeenเนอะ" หรือป่าวน๊า อยากรู้จัง อิอิ... ไหมก็จริงจังเป็นนะจ๊ะ ข้างบนนั่นหน่ะของจริงจ้ะ โครงสร้างของโค้ดมีเพียงแค่นี้เท่านั้นต่อหนึ่งกรอบภาพ และใน Table Style ทุกรูปแบบที่ผ่านมา โครงสร้างก็มีเพียงเท่านี้จริงๆ เหมือนกัน วันนี้ขอถือโอกาสอธิบายย้อนหลังไปด้วยเลย รูปแบบของ Table Style จะประกอบด้วย<table> <tr> <td> ข้อความหรือรูปภาพจ้ะ (Object) </td> </tr> </table> |
เพียงแค่นี้เราก็จะได้กรอบตารางหรือกรอบรูปแล้วจ้ะ แต่...เราไม่สามารถมองมันเห็นได้ด้วยตาเปล่า เพราะว่าเรายังไม่ได้กำหนดคุณลักษณะ (Style) ลงไปในโค้ดนั่นเอง ถึงตรงนี้ไหมจะสรุปได้มั้ยว่า การที่เรามองเห็นกรอบตารางหรือกรอบรูปนั้นเกิดจากการกำหนดคุณลักษณะของ (Style) ทั้งสิ้น เรามาดูโครงสร้างของรูปแบบ Table Style ตัวอย่างนี้กันก่อน❦❦
<table style="background:url(ลิ้งค์ Pic1); border:2px outset gold3;" cellspacing="0" cellpadding="35" width="100%">
<tr>
<td>
<table style="background:url(ลิ้งค์ Pic2); border-right:#C0C0C0 2px inset; border-top:#C0C0C0 2px outset; border-left:#C0C0C0 2px outset; border-bottom:#C0C0C0 2px inset"cellspacing="30" cellpadding="0" width="100%">
<tr>
<td>
<table style="background:url(ลิ้งค์ Pic3); border-right:#C0C0C0 2px inset; border-top:#C0C0C0 2px outset; border-left:#C0C0C0 2px outset; border-bottom:#C0C0C0 2px inset" cellpadding="0" cellspacing="15" width="100%">
<tr>
<td>ข้อความหรือรูปภาพจ้ะ (Object)
<table style="background:url(ลิ้งค์ Pic4); border-right:#C0C0C0 2px inset; border-top:#C0C0C0 2px outset; border-left:#C0C0C0 2px outset; border-bottom:#C0C0C0 2px inset" cellpadding="5" cellspacing="15" width="100%">
<tr>
<td>ข้อความหรือรูปภาพจ้ะ (Object)
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
❦❦
ดูภาพประกอบกับโค้ดด้านบน คงเข้าใจได้ทันทีแล้วว่ารูปแบบโค้ดนั้นประกอบขึ้นอย่างไร ในแต่ละส่วนของโค้ดก็คือ หนึ่งกรอบภาพนั่นเอง มาถึงตรงนี้ถ้าเกิดใคร?บ้าพลัง จะทำกรอบสัก 10 ชั้น ก็ไม่ใช่เรื่องยากอีกต่อไปแล้ว มีหลายท่านสงสัยว่า เวลาที่จะใส่ข้อความหรือรูปภาพเข้าไปในโค้ด ควรใส่ตรงตำแหน่งไหน ดูจากโค้ดจะพบได้ทันทีนะจ๊ะ ว่าเราควรใส่ข้อความหรือรูปภาพในตำแหน่งของ <td>(...ข้อความหรือรูปภาพ) เสมอ
❦❦
ส่วนที่ดูจะยุ่งยากและหลายท่านยังสับสนอยู่ (มาตั้งแต่ Table Style คราวก่อนเลยด้วย) ก็คือส่วนที่เรียกว่า Style นั่นเอง แท้จริงการเขียนคำสั่ง Style ถ้าสังเกตุให้ดี จะเป็นรูปแบบซ้ำๆ กัน ก่อนจะลงรายละเอียด ขอเพิ่มเติมอีกนิด สังเกตุดูจากโค้ดจะเห็นว่า ส่วนของ Style จะปรากฏอยู่แต่เฉพาะ ส่วนของ <table> กับส่วนของ <td> เท่านั้น ส่วนของ <tr> ไม่มีใครทำกันนะจ๊ะ
รูปแบบตัวอย่างนี้ ส่วนของ <td> ไม่มีกำหนด Style แต่ใน Table Style รูปแบบที่แล้ว มีการกำหนดไว้จ้ะ❦❦
การเขียนคำสั่งที่ถูกต้อง
style="...รายละเอียดของstyle..." |
กรณีที่มีรายละเอียดมากกว่าหนึ่งชนิด ให้คั่นด้วยเครื่องหมายเซมิโคลอน(สะกดผิดขอโทดด้วย) (;)
ตัวอย่างเช่น border-right:#C0C0C0 2px inset; border-top:#C0C0C0 2px outset |
รูปแบบการกำหนด style เริ่มจากระบุตำแหน่ง(ของวัตถุนั้น)แล้วจึงระบุรายละเอียดต่อท้าย โดยมีเครื่องหมายโคลอน(สะกดผิดขอโทดด้วย) (:) คั่นระหว่างตำแหน่งกับรายละเอียด ตัวอย่างเช่นborder-right:#C0C0C0 2px inset |
border-right คือตำแหน่งที่ต้องการระบุ style #C0C0C0 2px inset คือรายละเอียดของ style |
การกำหนดส่วน border แบ่งออกได้เป็น
border-right=ขอบขวา border-left=ขอบซ้าย border-bottom=ขอบล่าง border-top=ขอบบน |
ถ้าไม่ได้ระบุแยกย่อย การกำหนดค่า style จะมีผลต่อทุกขอบเช่น(จะกำหนดรูปแบบไหนขึ้นอยู่กับผู้ใช้เป็นสำคัญ)
ค่าที่ใช้ในส่วน border มีดังนี้ (สามารถวางสลับที่กันได้จ้ะ)
สี-ขนาด-ชนิด (color-size-type) |
ตัวอย่างเช่น
border-left:#C0C0C0 2px outset |
สีสามารถใช้รหัส(code)สี หรือชื่อสีก็ได้ เช่น white, green, blue เป็นต้น
ขนาดสามารถระบุได้ตั้งแต่ 0 ขึ้นไป (0 เปรียบได้กับกรอบล่องหน) และต้องลงท้ายด้วย px เสมอ (ต้องติดกันด้วยจ้ะเช่น 20px)
ชนิดของกรอบมี 1. solid 2. double 3. dashed 4. ridge 5. groove 6. inset 7. outset 8. dotted |
(ส่วนหน้าตาเป็นเช่นไร อนุญาตให้ไปลองกันเองนะจ๊ะ)
กรณีไม่ต้องการให้แสดงผลในส่วนหนึ่งส่วนใดของ border หรือทั้งหมด ให้กำหนดดังนี้ border:none border-top:none |
background-color:#000000 - การกำหนดสีพื้นของกรอบ (จะใช้มากใน Table Style รูปแบบที่แล้วมา) ถ้าต้องการให้โปร่งใส ให้ระบุค่าเป็น none จ้ะ❦❦
: หมายเหตุ : รูปแบบ Style มีความหลากหลายมากมาย ที่นำมาอธิบายประกอบความเข้าใจนี้ เน้นแต่ส่วนหลักๆ ที่ใช้กับส่วนของ Table Style ถ้าใครสนใจเกี่ยวกับเรื่อง Style แนะนำให้ศึกษาเพิ่มเติมด้วยตนเองต่อไปจ้ะ❦❦
ลป.#1 สำหรับบางบล๊อกไดอารี่มีปัญหาเวลาแสดงผลออกมาพบว่า กรอบรูปมานหล่นตุ๊บไปอยู่ข้างล่าง ให้ตรวจที่คำสั่งเปิดโค้ด (<..>) หรือปิดโค้ด (</..>) ได้เลยจ้ะ สัณนิษฐานว่า "มันหายไป" จ้า!!
ลป.#2 ก่อนนำโค้ดเข้าสู่ช่องรายละเอียดการสร้างบล๊อก ควรเช็คการขึ้นบรรทัด(Enter)ด้วยนะจ๊ะ การขึ้นบรรทัดโดยไม่ตั้งใจจะมีผลต่อ Table Style อย่างมาก เช่น ภาพขาด ภาพเกิน หรือขอบล้นไปด้านนึง ยกตัวอย่างที่ไหมได้พบมาก็คือ มีเพื่อนๆ ทำกรอบรูปแล้วรูปที่เพื่อนใส่มันไม่ชิดกับขอบของกรอบรูปมองดูเหมือนภาพโหว่งอย่างนั้นล่ะจ้ะ ชัวร์ป้าด!!❦❦
"หลักการทำบล๊อกที่ดี ต้องทำด้วยใจที่เป็นสุขจ้ะ"
❦❦❦
ถ่ายทอดได้ดีมากครับ ดูจากการเรียบเรียงและความตั้งใจแล้ว
ถ้าทำไปเรื่อยๆ รับรองว่าเป็น blog หรือเว็บที่สอนได้ดีมากแห่งหนึ่งเลย