【คัดลอกและวางก็ใช้งานได้เลย】มาสร้างเว็บแอปเพื่ออ่านและแสดงข้อมูล CSV ด้วย Python กันเถอะ!

บทนำ: เมื่อไม่กี่เดือนก่อน ผมก็เหมือนกับพวกคุณทุกคน

สวัสดีครับ! ผมผู้เขียนบทความนี้ เมื่อไม่กี่เดือนก่อนยังเป็นมือใหม่ที่ไม่รู้อะไรเกี่ยวกับการเขียนโปรแกรมเลย ทุกครั้งที่เจอข้อผิดพลาดก็ต้องปวดหัว และเคยท้อใจหลายครั้งจนคิดว่า "เราคงไม่เหมาะกับทางนี้..."

แต่ด้วยการลองผิดลองถูกโดยมี AI (ปัญญาประดิษฐ์) เป็นคู่หู ผมก็ค่อยๆ เริ่มอ่านโค้ดเข้าใจขึ้น และในเวลาเพียงหนึ่งเดือนครึ่ง ผมก็สามารถสร้างเว็บไซต์ 2 แห่ง (buyonjapan.com, copicode.com) ได้ด้วยตัวเอง

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

ขั้นตอนที่ 1: เตรียมการสำหรับการพัฒนาแอป (การตั้งค่าสภาพแวดล้อม)

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

1. การเตรียม Python และ Flask

แอปนี้สร้างขึ้นโดยใช้ภาษาโปรแกรมที่ชื่อว่า Python และเครื่องมือที่เรียกว่า Flask (ในทางเทคนิคเรียกว่า "เว็บเฟรมเวิร์ก")

Flask เปรียบเสมือนกล่องวิเศษที่ช่วยให้การสร้างเว็บแอปด้วย Python เป็นเรื่องง่ายอย่างไม่น่าเชื่อ ก่อนอื่น เรามาติดตั้ง Flask บนคอมพิวเตอร์ของคุณกัน

เปิด "Terminal" บนคอมพิวเตอร์ของคุณ (ถ้าเป็น Windows ก็คือ "Command Prompt" หรือ "PowerShell") แล้วคัดลอกคำสั่งข้างล่างนี้ไปวางและรันได้เลย

pip install Flask

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

2. การเตรียมโฟลเดอร์และไฟล์สำหรับทำงาน

ต่อมา เราจะสร้างพื้นที่ (โฟลเดอร์) สำหรับเก็บแบบแปลนและส่วนประกอบของแอปกัน สร้างโฟลเดอร์ใหม่ชื่อ "csv_app" ในตำแหน่งที่คุณต้องการบนคอมพิวเตอร์

จากนั้น สร้างไฟล์ 3 รายการต่อไปนี้ภายในโฟลเดอร์ "csv_app" นั้น

• app.py: ไฟล์ Python ที่เป็นแบบแปลนหลักซึ่งกำหนดการทำงานของแอป
• data.csv: ไฟล์ CSV ที่มีข้อมูลที่คุณต้องการแสดงบนเบราว์เซอร์
• โฟลเดอร์ templates
  • ข้างในโฟลเดอร์นี้ ให้สร้าง index.html ซึ่งเป็นไฟล์ที่กำหนดหน้าตาของเพจที่จะแสดงบนเบราว์เซอร์

โครงสร้างของโฟลเดอร์จะเป็นดังนี้:

csv_app/
├── app.py
├── data.csv
└── templates/
    └── index.html

【ข้อสำคัญ】คุณต้องวางไฟล์ HTML ไว้ในโฟลเดอร์ที่ชื่อว่า "templates" เท่านั้น นี่เป็นกฎของ Flask ซึ่งเป็นข้อตกลงเพื่อบอก Flask ว่า "ไฟล์หน้าตาของเพจอยู่ที่นี่นะ" หากใช้ชื่ออื่นจะเกิดข้อผิดพลาด โปรดระวัง

ขั้นตอนที่ 2: เตรียมข้อมูลที่จะแสดง (data.csv)

ต่อไป เรามาเตรียมข้อมูล CSV สำหรับแอปของเรากัน คัดลอกและวางเนื้อหาต่อไปนี้ลงในไฟล์ data.csv ที่คุณสร้างไว้แล้วบันทึก

สำหรับตัวอย่างนี้ เราจะใช้รายชื่อสมาชิกอย่างง่าย

ID,ชื่อ,อีเมล,วันที่ลงทะเบียน
1,สมชาย ใจดี,somchai.jaidee@example.com,2024-05-01
2,สมหญิง รักไทย,somying.rakthai@example.com,2024-05-15
3,มานี มีนา,manee.meena@example.com,2024-06-03
4,ปิติ ยินดี,piti.yindee@example.com,2024-06-21
5,วีระ กล้าหาญ,veera.klahan@example.com,2024-07-10

ข้อควรระวัง: การเข้ารหัสตัวอักษร (Character Encoding)

เมื่อบันทึกไฟล์ เราขอแนะนำให้ตั้งค่า การเข้ารหัสตัวอักษร เป็น "UTF-8" นี่เปรียบเสมือนกฎสากลเพื่อให้คอมพิวเตอร์เข้าใจตัวอักษร การใช้ UTF-8 จะช่วยป้องกันปรากฏการณ์ "ตัวอักษรเพี้ยน" ซึ่งอาจทำให้ข้อความแสดงเป็น "???"

ตอนที่ผมเป็นมือใหม่ ผมเคยเสียเวลากับปัญหานี้เป็นชั่วโมง... หากแอปของคุณทำงานไม่ถูกต้องและเห็นข้อความที่อ่านไม่ออก สิ่งแรกที่ควรตรวจสอบคือการเข้ารหัสของไฟล์ CSV นี้

ขั้นตอนที่ 3: เขียนโปรแกรม Python เพื่อรันเซิร์ฟเวอร์ (app.py)

มาถึงโปรแกรมหลักกันแล้ว! คัดลอกและวางโค้ดทั้งหมดด้านล่างนี้ลงในไฟล์ app.py ของคุณ ผมจะอธิบายความหมายของแต่ละส่วนอย่างละเอียดหลังโค้ดบล็อก

# นำเข้าเครื่องมือ (ไลบรารี) ที่จำเป็น
from flask import Flask, render_template
import csv

# สร้างอินสแตนซ์หลักของแอป Flask
app = Flask(__name__)

# กำหนดกระบวนการเมื่อมีการเข้าถึง URL ที่ระบุ
@app.route('/')
def index():
    # เตรียมเปิดและอ่านไฟล์ CSV
    # ระบุ encoding='utf-8' เพื่อป้องกันปัญหาตัวอักษรเพี้ยน
    with open('data.csv', 'r', encoding='utf-8') as file:
        # ใช้ reader ของโมดูล csv เพื่ออ่านข้อมูลที่คั่นด้วยจุลภาค
        csv_reader = csv.reader(file)
        
        # อ่านบรรทัดแรก (หัวเรื่อง) ก่อน
        header = next(csv_reader)
        
        # อ่านข้อมูลบรรทัดที่เหลือลงในลิสต์
        data = [row for row in csv_reader]

    # ส่งข้อมูลไปยัง HTML และสร้างหน้าเว็บ
    return render_template('index.html', header=header, data=data)

# หากไฟล์นี้ถูกรันโดยตรง ให้เริ่มเว็บเซิร์ฟเวอร์
if __name__ == '__main__':
    # การตั้งค่า debug=True สะดวกเพราะเซิร์ฟเวอร์จะรีสตาร์ทอัตโนมัติเมื่อแก้ไขโค้ด
    app.run(debug=True)

คำอธิบายโค้ด (ภาพรวมคร่าวๆ)

• from flask import ..., import csv
  เปรียบเสมือนคาถาเพื่อเปิดใช้งานกล่องเครื่องมือที่มีประโยชน์ชื่อ "Flask" และ "csv" ที่เรากำลังจะใช้
• app = Flask(__name__)
  เป็นการสร้างส่วนหลักของแอป Flask นี่เป็นรูปแบบมาตรฐาน ดังนั้นตอนนี้แค่ยอมรับว่า "ต้องเขียนแบบนี้" ไปก่อน
• @app.route('/')
  เปรียบเสมือนใบสั่งงานที่บอกว่า "เมื่อมีการร้องขอมาที่หน้าแรกของเว็บไซต์ ('/') ให้รันฟังก์ชันที่อยู่ด้านล่างทันที (index())"
• def index():
  นี่คือกระบวนการที่ทำงานจริงเมื่อมีการเข้าถึงหน้าแรก
  • with open(...): เป็นการเปิดไฟล์ CSV ส่วน encoding='utf-8' เป็นจุดสำคัญในการป้องกันปัญหาตัวอักษรเพี้ยน การใช้ with สะดวกเพราะมันจะปิดไฟล์โดยอัตโนมัติหลังจากทำงานเสร็จ
  • csv.reader(file): เป็นฟังก์ชันที่รับไฟล์ CSV ที่เปิดอยู่และแบ่งข้อมูลด้วยเครื่องหมายจุลภาค ทำให้ Python จัดการได้ง่าย
  • header = next(csv_reader): เป็นการดึงบรรทัดแรกของไฟล์ CSV (ID, ชื่อ, ...) และเก็บไว้เป็น "หัวเรื่อง"
  • data = [row for row in csv_reader]: เป็นการดึงข้อมูลที่เหลือทั้งหมดและเก็บไว้ในลิสต์ (ชุดข้อมูล) ที่ชื่อว่า "data"
• return render_template(...)
  นี่คือส่วนที่สำคัญที่สุด เป็นคำสั่งให้ Flask ว่า "โปรดสร้างหน้าเว็บโดยใช้ไฟล์เลย์เอาต์ที่ชื่อ index.html! และไหนๆ ก็ทำแล้ว ฉันจะส่งข้อมูล header และ data ที่เพิ่งอ่านมาให้ด้วยนะ เอาไปใช้ได้เลย!"
• if __name__ == '__main__': ...
  เป็นวลีมาตรฐานสำหรับเริ่มเว็บเซิร์ฟเวอร์เพื่อการพัฒนาเมื่อไฟล์ Python นี้ถูกรันโดยตรง

ในตอนแรกอาจจะดูเหมือนคาถาเยอะแยะไปหมด แต่ถ้าคุณเข้าใจขั้นตอนง่ายๆ ของ "การอ่านไฟล์" และ "การส่งต่อไปยัง HTML" แล้วล่ะก็ ไม่มีปัญหาแน่นอน!

ขั้นตอนที่ 4: สร้างหน้าตาสำหรับแสดงผลข้อมูล (HTML) (templates/index.html)

ต่อไป เราจะสร้างไฟล์ HTML ที่จะทำหน้าที่เป็น "ภาชนะ" สำหรับแสดงข้อมูลที่ส่งมาจาก Python คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ index.html ภายในโฟลเดอร์ templates ของคุณ

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แอปแสดงข้อมูล CSV</title>
    <!-- สไตล์อย่างง่ายสำหรับโหมดมืด -->
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        th, td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">รายการข้อมูล CSV</h1>

    <!-- แสดงตารางหากมีข้อมูล -->
    {% if data %}
    <table>
        <thead>
            <tr>
                <!-- แสดงหัวเรื่องที่ส่งมาจาก Python -->
                {% for col in header %}
                    <th>{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            <!-- แสดงข้อมูลที่ส่งมาจาก Python ทีละแถว -->
            {% for row in data %}
            <tr>
                {% for cell in row %}
                    <td>{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>ไม่มีข้อมูลที่จะแสดง</p>
    {% endif %}

</body>
</html>

สัญลักษณ์พิเศษใน HTML: {% ... %} และ {{ ... }}

คุณอาจสังเกตเห็นสัญลักษณ์ที่ไม่คุ้นเคยในโค้ด HTML นี้ เช่น {% ... %} และ {{ ... }} นี่คือ синтаксис (syntax) ของ Jinja2 ซึ่งเป็น template engine ที่ Flask ใช้

• {% for ... %} ... {% endfor %}
  ทำหน้าที่เหมือนกับ "for loop" ใน Python มันหมายความว่า "ให้ทำซ้ำ HTML ที่อยู่ข้างในนี้ตามจำนวนข้อมูลที่ส่งมาจาก Python" ซึ่งช่วยให้คุณสามารถสร้างแถวตาราง 5 แถวได้โดยอัตโนมัติหากมีข้อมูล 5 แถว หรือ 100 แถวหากมีข้อมูล 100 แถว
• {{ ... }}
  เป็นตัวยึดตำแหน่งสำหรับแสดง "เนื้อหา" ของตัวแปรที่ส่งมาจาก Python {{ col }} จะแสดงชื่อคอลัมน์จากหัวเรื่อง และ {{ cell }} จะแสดงเนื้อหาของแต่ละเซลล์ข้อมูล

การแยก Python (การประมวลผลข้อมูล) ออกจาก HTML (การนำเสนอ) แบบนี้ ทำให้โค้ดของคุณจัดการได้ง่ายขึ้นและสร้างแอปที่ซับซ้อนขึ้นได้ง่ายกว่าเดิม นี่คือหนึ่งในประโยชน์หลักของการใช้เฟรมเวิร์กอย่าง Flask

ขั้นตอนที่ 5: มาลองรันแอปกัน!

เอาล่ะ การเตรียมการทั้งหมดเสร็จสิ้นแล้ว! ในที่สุดก็ถึงเวลารันแอป

เปิด Terminal (หรือ Command Prompt) ของคุณอีกครั้งและใช้คำสั่ง cd เพื่อไปยังโฟลเดอร์ "csv_app" ที่คุณสร้างไว้ก่อนหน้านี้

จากนั้น รันคำสั่งต่อไปนี้:

python app.py

หลังจากรันคำสั่ง คุณควรจะเห็นข้อความแบบนี้ใน Terminal ของคุณ:

 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

หากคุณเห็นข้อความว่า "Running on http://127.0.0.1:5000" แสดงว่าสำเร็จ! ตอนนี้เว็บเซิร์ฟเวอร์กำลังทำงานบนคอมพิวเตอร์ของคุณ

เปิดเว็บเบราว์เซอร์ของคุณ (เช่น Google Chrome) และคัดลอกและวาง URL ต่อไปนี้ลงในแถบที่อยู่:

http://127.0.0.1:5000

เป็นอย่างไรบ้าง? เนื้อหาของ data.csv ควรจะแสดงเป็นตารางอย่างสวยงามในเบราว์เซอร์ของคุณแล้ว! นี่คือเว็บแอปพลิเคชันที่คุณสร้างด้วย Python ขอแสดงความยินดีด้วย! 🎉

【ภาคผนวก】ทำให้ง่ายยิ่งขึ้นด้วย Pandas!

วิธีการปัจจุบันก็ใช้งานได้ดี แต่ Python มีไลบรารีที่ทรงพลังอย่างยิ่งสำหรับการวิเคราะห์ข้อมูลที่เรียกว่า Pandas การใช้ Pandas ทำให้การอ่านไฟล์ CSV และการแปลงเป็น HTML ง่ายยิ่งขึ้นไปอีก

หากคุณสนใจ ลองทำตามดูได้เลย

1. การติดตั้ง Pandas

ก่อนอื่น มาติดตั้ง Pandas กันก่อน ใน Terminal ของคุณ (หลังจากหยุดเซิร์ฟเวอร์ด้วย Ctrl+C) ให้รันคำสั่งนี้:

pip install pandas

2. การแก้ไข app.py

เขียน app.py ใหม่ดังนี้ คุณเห็นไหมว่าส่วนที่ใช้อ่าน CSV นั้นสั้นลงอย่างน่าทึ่ง?

from flask import Flask, render_template
import pandas as pd # นำเข้า pandas ในชื่อ pd

app = Flask(__name__)

@app.route('/')
def index():
    # อ่านไฟล์ CSV โดยใช้ Pandas (แค่บรรทัดเดียว!)
    df = pd.read_csv('data.csv', encoding='utf-8')
    
    # แปลง DataFrame เป็นแท็กตาราง HTML (นี่ก็บรรทัดเดียว!)
    # คุณสามารถระบุคลาส CSS ด้วย thuộc tính classes, ลบเส้นขอบด้วย border=0 เป็นต้น
    html_table = df.to_html(classes='data-table', index=False, border=0)
    
    # ส่งข้อมูลตารางไปยัง HTML เพื่อสร้างหน้าเว็บ
    return render_template('index_pandas.html', table=html_table)

if __name__ == '__main__':
    app.run(debug=True)

3. การสร้าง index_pandas.html

เนื่องจาก Pandas สร้าง HTML ทั้งหมดของตารางให้ ไฟล์ HTML เองก็จะง่ายขึ้นด้วย สร้างไฟล์ใหม่ชื่อ index_pandas.html ในโฟลเดอร์ templates ของคุณและวางโค้ดต่อไปนี้

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แอปแสดงข้อมูล CSV (เวอร์ชัน Pandas)</title>
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        /* ใช้สไตล์กับชื่อคลาสที่ระบุใน to_html */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        .data-table th, .data-table td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        .data-table thead th { /* สไตล์ของแถวหัวเรื่อง */
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">รายการข้อมูล CSV (เวอร์ชัน Pandas)</h1>

    <!-- แสดงตาราง HTML ที่ส่งมาจาก Python(Pandas) ตามที่เป็น -->
    {{ table|safe }}

</body>
</html>

ส่วนสำคัญคือ {{ table|safe }} โค้ด HTML ที่สร้างโดย Pandas มีแท็กอย่าง <table> อยู่ด้วย ดังนั้นเราจึงเพิ่มฟิลเตอร์ |safe เพื่อบอก Flask ว่า "นี่เป็น HTML ที่ปลอดภัย โปรดแสดงผลตามที่เป็น"

หากคุณรัน python app.py อีกครั้งและเข้าถึงหน้าเว็บ ตารางที่คล้ายกันควรจะปรากฏขึ้น โค้ดสะอาดขึ้นมาก และประตูสู่การจัดการข้อมูลขั้นสูงก็ได้เปิดออกแล้ว!

สรุป: ความสำเร็จเล็กๆ น้อยๆ คือก้าวที่ยิ่งใหญ่ไปข้างหน้า

ในบทความนี้ เราได้สร้างเว็บแอปอย่างง่ายเพื่อแสดงข้อมูล CSV ในเบราว์เซอร์โดยใช้ Python และ Flask คุณได้สัมผัสกับความรู้สึก "คัดลอก วาง และทำงานได้" แล้วหรือยัง?

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

ผมจะดีใจมากหากความสำเร็จเล็กๆ น้อยๆ ของ "โค้ดที่ฉันเขียน (หรือวาง) ทำให้เว็บแอปทำงานได้!" ที่คุณได้สัมผัสในบทความนี้ จะช่วยให้คุณมีความมั่นใจที่จะก้าวต่อไป

จากนี้ไป ลองปรับเปลี่ยนด้วยตัวเองดูสิ เช่น "เพิ่มฟังก์ชันค้นหา" หรือ "ทำให้ข้อมูลแก้ไขได้" ไม่เป็นไรถ้าเจอข้อผิดพลาด เพราะมันเป็นส่วนหนึ่งของกระบวนการเรียนรู้ ขอให้สนุกกับการสร้างแอปที่เป็นเอกลักษณ์ของคุณเอง พร้อมกับถาม AI หรือค้นหาข้อความแสดงข้อผิดพลาดทางออนไลน์

ของแถม: โค้ด HTML ที่สมบูรณ์และใช้งานได้ทั้งหมด (ผลลัพธ์จากเบราว์เซอร์)

สำหรับอ้างอิง นี่คือซอร์สโค้ด HTML จริงที่ถูกสร้างขึ้นในเว็บเบราว์เซอร์เมื่อคุณรันแอปแรกที่เราสร้าง (เวอร์ชันไลบรารีมาตรฐาน) มันสามารถช่วยให้คุณเห็นภาพว่าโปรแกรม Python สร้าง HTML นี้แบบไดนามิกจากเนื้อหาของไฟล์ CSV ได้อย่างไร

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แอปแสดงข้อมูล CSV</title>
    <!-- สไตล์อย่างง่ายสำหรับโหมดมืด -->
    <style>
        body {
            background-color: #202124;
            color: #e8eaed;
            font-family: sans-serif;
            padding: 2rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        th, td {
            border: 1px solid #5f6368;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #3c4043;
            color: #e8eaed;
        }
    </style>
</head>
<body>
    <h1 style="color: #669df6;">รายการข้อมูล CSV</h1>

    <!-- แสดงตารางหากมีข้อมูล -->
    
    <table>
        <thead>
            <tr>
                <!-- แสดงหัวเรื่องที่ส่งมาจาก Python -->
                
                    <th>ID</th>
                
                    <th>ชื่อ</th>
                
                    <th>อีเมล</th>
                
                    <th>วันที่ลงทะเบียน</th>
                
            </tr>
        </thead>
        <tbody>
            <!-- แสดงข้อมูลที่ส่งมาจาก Python ทีละแถว -->
            
            <tr>
                
                    <td>1</td>
                
                    <td>สมชาย ใจดี</td>
                
                    <td>somchai.jaidee@example.com</td>
                
                    <td>2024-05-01</td>
                
            </tr>
            
            <tr>
                
                    <td>2</td>
                
                    <td>สมหญิง รักไทย</td>
                
                    <td>somying.rakthai@example.com</td>
                
                    <td>2024-05-15</td>
                
            </tr>
            
            <tr>
                
                    <td>3</td>
                
                    <td>มานี มีนา</td>
                
                    <td>manee.meena@example.com</td>
                
                    <td>2024-06-03</td>
                
            </tr>
            
            <tr>
                
                    <td>4</td>
                
                    <td>ปิติ ยินดี</td>
                
                    <td>piti.yindee@example.com</td>
                
                    <td>2024-06-21</td>
                
            </tr>
            
            <tr>
                
                    <td>5</td>
                
                    <td>วีระ กล้าหาญ</td>
                
                    <td>veera.klahan@example.com</td>
                
                    <td>2024-07-10</td>
                
            </tr>
            
        </tbody>
    </table>
    

</body>
</html>