การแทรกตารางใน Blogger

-


การแทรกตารางใน Blogger (blogspot.com) อาจจะสับสนเล็กน้อยสำหรับผู้ใช้ใหม่ เพราะในโหมด "เขียน" (Compose view) จะไม่มีปุ่ม "แทรกตาราง" ให้กดโดยตรงเหมือนโปรแกรมอย่าง Word หรือ Google Docs

แต่เรามีวิธีที่ทำได้ง่ายๆ 2-3 วิธีครับ ผมขอแนะนำดังนี้:

1. 📝 วิธีที่ง่ายที่สุด: คัดลอกและวาง (Copy & Paste)

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

  1. สร้างตารางในโปรแกรมอื่น:

    • เปิด Google Docs (แนะนำ) หรือ Microsoft Word

    • สร้างตารางที่คุณต้องการ ใส่ข้อมูลและจัดรูปแบบ (เช่น ทำตัวหนา, ใส่สีพื้นหลัง) ได้ตามปกติ

  2. คัดลอกตาราง:

    • ใช้เมาส์ลากคลุมตารางทั้งหมดที่คุณสร้าง

    • คลิกขวา > คัดลอก (Copy) หรือกด Ctrl+C

  3. วางใน Blogger:

    • กลับมาที่หน้าแก้ไขบทความใน Blogger (ต้องอยู่ในโหมด "มุมมองเขียน" หรือ "Compose view" นะครับ ไม่ใช่มุมมอง HTML)

    • คลิกในตำแหน่งที่ต้องการแทรกตาราง

    • คลิกขวา > วาง (Paste) หรือกด Ctrl+V

Blogger จะพยายามแปลงตารางนั้นมาเป็น HTML ให้โดยอัตโนมัติ ส่วนใหญ่จะแสดงผลได้ค่อนข้างดี แต่อาจจะต้องมีการจัดแต่งเล็กน้อยครับ

2. 💻 วิธีสำหรับมือโปร: แก้ไขใน "มุมมอง HTML"

วิธีนี้จะให้คุณควบคุมตารางได้ 100% แต่ต้องใช้โค้ด HTML เล็กน้อยครับ

  1. สลับไปโหมด HTML:

    • ในหน้าแก้ไขบทความ ให้มองหาไอคอนรูปดินสอ หรือ < > ที่มุมบนซ้าย

    • คลิกและเลือก "มุมมอง HTML" (HTML view)

  2. วางโค้ดตาราง:

    • วางโค้ด HTML ของตารางลงไปในตำแหน่งที่ต้องการ

โค้ดตารางพื้นฐาน (คัดลอกไปใช้ได้เลย):

คุณสามารถคัดลอกโค้ดนี้ไปวาง แล้วเปลี่ยน "หัวข้อ" และ "ข้อมูล" เป็นของคุณได้เลยครับ

HTML
<table style="width:100%; border-collapse: collapse;">
  <tr style="background-color:#f2f2f2;">
    <th style="border: 1px solid #ddd; padding: 8px;">หัวข้อ 1</th>
    <th style="border: 1px solid #ddd; padding: 8px;">หัวข้อ 2</th>
    <th style="border: 1px solid #ddd; padding: 8px;">หัวข้อ 3</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 1.1</td>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 1.2</td>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 1.3</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 2.1</td>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 2.2</td>
    <td style="border: 1px solid #ddd; padding: 8px;">ข้อมูล 2.3</td>
  </tr>
</table>

คำอธิบายโค้ด:

  • <table>...</table>: คือตารางทั้งก้อน

  • <tr>...</tr>: คือแถวแนวนอน (Table Row)

  • <th>...</th>: คือช่องหัวข้อ (Table Header) - ตัวอักษรจะเป็นตัวหนาและอยู่ตรงกลาง

  • <td>...</td>: คือช่องข้อมูล (Table Data)

  • style="...": เป็นการตกแต่ง เช่น border (เส้นขอบ), padding (ระยะห่างขอบใน), width:100% (กว้างเต็มจอ)


สรุปคำแนะนำ

  • ถ้าต้องการความรวดเร็ว ไม่ซับซ้อน: ใช้ วิธีที่ 1 (Copy จาก Google Docs)

  • ถ้าต้องการตารางที่สวยงาม ควบคุมได้: ใช้ วิธีที่ 2 


ความคิดเห็น

แสดงความคิดเห็น