วันที่ ศุกร์ กรกฎาคม 2550

พิมพ์หน้านี้  |  ดูบล๊อกอื่นๆ ที่ OKnation

 

...... จับบล็อกเข้าตารางซะ [วิธีจัดการเจ้าตัวยุ่งให้ดูดีค่ะ]


          จั่วหัวเรื่องอย่างนี้ เสี่ยงต่อการโดนค้อนซะแล้วสิ แต่ก็ถือซะว่าเป็นบทเรียนให้บล็อกเกอร์ทั้งหลายได้ดูเป็นตัวอย่าง (แต่จะทำตามหรือไม่ก็แล้วแต่จังหวะและความเหมาะสมนะคะ) โพสนี้กะมอบความรู้คู่คติธรรมในการตั้งชื่อเรื่องด้วยค่ะ

          ตั้งชื่อเรื่องว่า "จับบล็อกเข้าตารางซะ" เพราะต้องการจะเล่นคำว่า 'ตาราง' กับ 'ตะราง' ซึ่งคนที่อ่านเร็วๆอาจจะตื่นตัวขึ้นมาทันที ว่าอะไรกันจะมาจับบล็อกเกอร์เข้าตะราง เพราะเรื่องอะไร และเราจะโดนด้วยรึเปล่า เป็นการกระตุ้นต่อมอะดรีนาลีน ที่ถ้าคนไม่รักกันจริงอาจจะโกรธเอาได้ที่ชื่อเรื่องกับเนื้อเรื่องไม่ตรงกันเลย หรือ จงใจตั้งชื่อให้คนเข้าใจว่าเข้ามาอ่านแล้วจะเจอสิ่งที่ตัวเองคิดไว้หรือสงสัยใคร่รู้ แต่กลับไปเจออีกเรื่องหนึ่งที่ผิดคาด หากเรื่องนั้นเป็นที่น่าสนใจ หรือ มีประโยชน์ ก็คงจะได้รับการอภัย แต่ถ้าไม่เป็นอย่างนั้น ระวังจะโดนเพื่อนแอนตี้ไม่เข้าบล็อก 3 ชั่วโมงนะ คริคริ

       แต่ถ้าใครกดเข้ามาเพราะอยากรู้วิธีใส่ตารางในบล็อก ก็ตามดูต่อไปได้เลยค่ะ


วิธีจับบล็อกเข้าตาราง (ไม่ใช่ ตะราง  อ่านดีดีนะ)

          การเขียนบล็อกให้น่าเข้ามาอ่านนั้น มีองค์ประกอบสำคัญสามส่วนหลักๆคือ

1. เนื้อหาน่าสนใจ
2. วิธีการนำเสนอที่น่าตื่นตา ตื่นใจ ได้อารมณ์ และ
3. การจัดหน้าตาให้น่าอ่าน 

          เสน่ห์ของบล็อกที่ห้ามใจยากก็จากตรงนี้เป็นหลัก บ้านนี้ทดลองใช้ตารางมาก็สองเดือนได้แล้วมังคะ ก็พบว่าช่วยสร้างสีสันได้เยอะทีเดียวค่ะ จะบอกเป็นสองระดับนะคะ คือ
วิธีการแทรกตารางลงบล็อก กับ
วิธีตบแต่งตาราง โดยใช้คำสั่งภาษา html


วิธีแทรกตารางลงบล็อกจากเมนูเขียนบล็อก

          1. Log in เข้าสู่หน้า'เขียนบล็อก'
          2. เลือก 'สร้างเรื่อง' หรือ 'แก้ไข' แล้วแต่กรณี
          3. วางตำแหน่งที่จะแทรกตาราง (Table) โดยวางเม้าส์ตรงตำแหน่งที่ต้องการ แล้วคลิกปุ่ม   ในเมนู

(เครืองหมาย * ที่เห็นในภาพ คือการmark จุดเริ่มต้นและลงท้ายของเรื่อง เมื่อจะแทรกตาราง ก็วางเม้าส์ อย่างเช่นตำแหน่งตรงที่เห็น | ในภาพค่ะ ก่อนจะคลิกปุ่ม  น่ะค่ะ)

          4. กำหนดค่าต่างๆในหน้าต่าง 'Insert Table'


Rows คือ จำนวนแถว
Cols คือ จำนวนคอลัมน์
Width คือ ความกว้างของตารางต่อพื้นที่ เป็น Percent ของพื้นที่ หรือ ใส่จำนวน pixels
Alignment คือ ตำแหน่งที่จะวางตาราง
Border thickness คือ ความหนาของตาราง ว่าจะให้นูนมากหรือน้อย
Cell spacing คือ ระยะห่างระหว่างขอบนอกกับขอบในของตาราง
Cell padding คือ ระยะห่างระหว่างขอบในของตารางกับตัวอักษรในตาราง

สมมติ กำหนดค่าดังภาพตัวอย่างนี้

          5. เมื่อกำหนดเรียบร้อยแล้ว คลิก ok จะได้ตารางดังนี้

          6. หากต้องการจะใส่สีในตาราง หรือปรับแต่งขอบตารางใหม่ ให้กดปุ่ม  เพื่อเข้า html mode
เมื่อดูคำสั่ง html จะเห็นชุดคำสั่ง ตามภาพนี้ค่ะ

(กรุณาอ่านต่อในเรื่องการใช้คำสั่ง html ด้านล่าง)


 

การใช้คำสั่ง HTML

          1. คำสั่ง html ต่อไปนี้ได้เขียนแยกเป็นส่วนๆ แต่เวลาใช้เราสามารถรวมคำสั่งเป็นชุดๆได้ เช่น การกำหนดค่าใดๆที่ใช้คำสั่งเปิดและปิด เหมือนกัน ก็นำมาเขียนรวมกันได้ เช่น

ข้อความ

         

          โปรดดูความแตกต่างของ ชุดคำสั่ง html ที่ได้จากการกำหนดโดยอัตโนมัติในวิธีแรกกับชุดคำสั่งในข้อนี้ จะได้ทราบว่าตวรวางคำสั่งใดตรงตำแหน่งไหน

          2.  กดปุ่ม  เพื่อเข้า html mode ค่ะ แล้วแทรกชุดคำสั่งแต่ละส่วนที่ต้องการเพิ่มเข้าไป  (ดูข้อ 1) - 17) ด้านล่างค่ะ)

          3. ระหว่างกำหนดค่าแต่ละส่วน เราสามารถคลิกปุ่ม  กลับมาดูได้ว่าได้ตารางที่มีหน้าตาอย่างที่ตั้งใจไว้หรือไม่

การสร้างตาราง

เปิดตารางด้วยคำสั่ง

ปิดตารางด้วยคำสั่ง

การกำหนดค่ากรอบตาราง

     สังเกตให้ดีนะคะ คำสั่งที่ 1) ถึง ที่ 5) มีอยู่ในชุดคำสั่งอัตโนมัติที่เรากำหนดค่าไว้โดยคลิกปุ่ม  อยู่แล้วนะคะ แต่เราก็สามารถกลับเข้า htmlmode เพื่อปรับแต่งได้ค่ะ


1) WIDTH, HEIGHT เพื่อกำหนดขนาดความกว้าง ความยาว ของตารางเป็น % ของความกว้างพื้นที่แสดงผล
โดยขยายคำสั่งเปิดตารางเป็น

ปิดคำสั่งด้วย

2) cellspacing เพื่อกำหนดระยะห่างขอบด้านนอกกับขอบด้านในของตาราง โดยขยายคำสั่งเปิดตารางเป็น   ปิดคำสั่งด้วย

ตัวอย่าง การกำหนด cellspacing = 50

3) cellpadding เพื่อกำหนดระยะห่างระหว่างขอบตารางด้านในกับตัวหนังสือในตาราง โดยขยายคำสั่งเปิดตารางเป็น ปิดคำสั่งด้วย

ตัวอย่าง การกำหนด cellpadding = 50

4) align เพื่อจัดวางตำแหน่งตารางว่าจะชิดซ้าย ชิดขวา หรืออยู่กลางพื้นที่แสดงผล โดยขยายคำสั่งเปิดตารางเป็น ปิดคำสั่งด้วย

5) border thickness เพื่อกำหนดความหนาของขอบตารางให้ดูนูนมากหรือน้อยตามขนาดที่ต้องการ โดยขยายคำสั่งเปิดตารางเป็น ปิดคำสั่งด้วย

ตัวอย่างการกำหนด border tickness = 50


การกำหนดค่าพื้นหลังตาราง

6) bgcolor เพื่อกำหนดสีของพื้นที่ด้านหลังรวมทั้งกรอบของตารางด้วย โดยขยายคำสั่งเปิดตารางเป็น ปิดคำสั่งด้วย

ตัวอย่าง การกำหนดสีพื้นหลังเป็นสีแดง

7) background image เพื่อใส่ภาพเป็นพื้นหลังของตาราง ซึ่งจะกินเนื้อที่มาถึงขอบตารางด้วย โดยขยายคำสั่งเปิดตารางเป็น
ปิดคำสั่งด้วย   เพื่อไม่ให้ยุ่งยากเพราะอธิบายลึกกว่านี้อาจจะงงได้ ขอแนะนำให้ทำภาพใหญ่เท่าขนาดตาราง มิเช่นนั้นจะได้ภาพพื้นหลังซ้ำๆกันหลายๆภาพจนเต็มพื้นที่ค่ะ


การกำหนดสี

สามารถใช้ได้สองรูปแบบคือใส่ hexcode รหัสสี ที่เป็นเลขอารบิค 6 ตัวโดยมีเครื่องหมาย # นำหน้าทุกครั้ง เช่น “#FFFFFF” หรือ “#ffffff” จะหมายถึงสีขาว “#000000” หมายถึงสีดำ
อีกวิธีคือ ใส่ชื่อเรียกของสีลงไปเลยโดยตัดเครื่องหมาย
# ออกไป เช่น “red” “blue” “black” ปิดคำสั่งด้วย

คุณสามารถหา code สี และชื่อเรียกสีสวยๆได้ในตารางที่ โพสนี้ค่ะ ตารางสี + Hex Code (<-- คลิกเพื่อดูสีและจด code)


การกำหนดค่าภายในตัวตาราง

8) tbody เพื่อกำหนดให้รู้ว่าคำสั่งต่อไปจะใช้ในสำหรับภายในตัวตารางไม่ใช่กรอบตาราง เปิดคำสั่งด้วย ปิดคำสั่งด้วย

9) tr เพื่อกำหนดจำนวนแถว เปิดคำสั่งด้วย ปิดคำสั่งด้วย
กำหนดจำนวนแถวก่อนจำนวนคอลัมน์

10) td เพื่อกำหนดจำนวนคอลัมน์ เปิดคำสั่งด้วย ปิดคำสั่งด้วย

ตัวอย่าง

ทำตาราง 2 แถว (แถวบนกับแถวล่าง)

แถวบน
แถวล่าง

ทำตาราง 2 ช่อง (คอลัมน์ซ้ายกับคอลัมน์ขวา)

คอลัมน์ซ้ายคอลัมน์ขวา


การกำหนดรูปแบบตัวอักษร

11) font เพื่อกำหนดรูปแบบอักษรในตารางให้ต่างจากที่กำหนดไว้ใน blog template (กรณีไม่ได้ format ที่ต้นฉบับไว้แล้วก่อนที่จะ copy มา) เปิดคำสั่งโดยใช้ ปิดคำสั่งโดยใช้

12) font color เพื่อกำหนดสีอักษรในตาราง โดยขยายคำสั่งกำหนดรูปแบบตัวอักษรเป็น หรือ เปิดคำสั่งด้วย ปิดคำสั่งด้วย

13) strong เพื่อกำหนดให้ตัวอักษรเป็นแบบเข้ม มีค่าเท่ากับคำสั่ง bold ใน Ms office เปิดคำสั่งด้วย ปิดคำสั่งด้วย โดยข้อความที่ต้องการเน้นจะอยู่ระหว่างคำสั่งเปิดและปิดที่ระบุนี้

14) font size เพื่อกำหนดขนาดตัวอักษร เปิดคำสั่งด้วย ปิดคำสั่งด้วย โดยข้อความที่ต้องการเปลี่ยนขนาดจะอยู่ระหว่างคำสั่งเปิดและปิดที่ระบุนี้

15) em เพื่อกำหนดให้แสดงตัวอักษรเอียง เปิดคำสั่งด้วย ปิดคำสั่งด้วย
โดยข้อความที่ต้องการให้เอียงจะอยู่ระหว่างคำสั่งเปิดและปิดที่ระบุนี้

16) u เพื่อขีดเส้นใต้ตัวอักษร เปิดคำสั่งด้วย ปิดคำสั่งด้วย โดยข้อความที่ต้องการขีดเส้นใต้จะอยู่ระหว่างคำสั่งเปิดและปิดที่ระบุนี้

17) font background-color เพื่อกำหนดสีพื้นหลังตัวอักษร เปิดคำสั่งด้วย

ให้ดูตัวอย่าง การกำหนด ฟ้อนท์ในตารางเป็นภาพรวมๆนะคะ


หากมีข้อสงสัย ฝากคำถามไว้ที่ความคิดเห็นได้นะคะ

ใจเย็นๆนะคะ ค่อยๆอ่าน ลองทำดูสักครั้งสองครั้งก็ทำได้แล้วค่ะ


โดย ปิรันญ่า

 

กลับไปที่ www.oknation.net