ขนาดตาราง
ตัวเลือกสไตล์
แก้ไข Cell
| 1 | ||||
| 2 | ||||
| 3 | ||||
| 4 |
Preview สด
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
โค้ด HTML
เกี่ยวกับเครื่องมือสร้างตาราง HTML
สร้าง HTML table แบบเห็นภาพโดยไม่ต้องเขียนโค้ด กำหนดแถว คอลัมน์ header และตัวเลือกสไตล์ จากนั้นคัดลอกหรือดาวน์โหลด HTML ที่สร้างขึ้นได้ทันที
คู่มือ HTML Table
เครื่องมือสร้าง HTML Table ออนไลน์ฟรี
สร้าง HTML table แบบมืออาชีพโดยไม่ต้องเขียนโค้ด เครื่องมือนี้ช่วยกำหนดแถว คอลัมน์ header border แถบสี hover effect และ responsive wrapper พร้อม preview สดที่อัปเดตทันที
คุณสมบัติหลัก
ตัวแก้ไขแบบเห็นภาพ
- คลิกเพื่อแก้ไขเนื้อหาใน cell
- เพิ่มหรือลบแถวและคอลัมน์
- เปิดปิด header row
- รองรับสูงสุด 50 แถวและ 20 คอลัมน์
- เพิ่ม caption ให้ตารางได้
ตัวเลือกสไตล์
- ตารางมี border หรือไม่มี border
- แถวสลับสีให้อ่านง่าย
- highlight เมื่อ hover
- padding แบบ compact หรือสบายตา
- header สีเข้ม
Preview สด
- ดูตัวอย่างตารางแบบเรียลไทม์
- เห็นการเปลี่ยนสไตล์ทันที
- ทำงานแบบ WYSIWYG
- preview แบบ responsive
- render เหมือนในเบราว์เซอร์
การส่งออก
- คัดลอก HTML ไปยังคลิปบอร์ด
- ดาวน์โหลดเป็นไฟล์ .html
- โค้ดอ่านง่าย
- รวม inline styles แล้ว
- พร้อมนำไปวางใช้งาน
HTML Table คืออะไร?
HTML table ใช้แสดงข้อมูลแบบมีโครงสร้างในรูปแถวและคอลัมน์บนเว็บเพจ โดยใช้ element เช่น <table>, <tr>, <th> และ <td> เหมาะกับข้อมูลตาราง เช่น ตารางเวลา รายงาน การเปรียบเทียบ และสถิติ
Element ของ HTML Table:
<table>: container ของโครงสร้างตารางทั้งหมด
<thead>: รวมแถว header เพื่อความหมายเชิง semantic
<tbody>: รวมแถวข้อมูลหลักของตาราง
<tr>: กำหนดแถวของตาราง
<th>: กำหนด cell ส่วนหัว
<td>: กำหนด cell ข้อมูลทั่วไป
<caption>: ให้ชื่อหรือคำอธิบายของตาราง
งานที่นิยมใช้
ตารางราคา: แสดงแพ็กเกจ subscription ฟีเจอร์ และราคา
รายงานข้อมูล: นำเสนอสถิติ ข้อมูลการเงิน ผลสำรวจ และ analytics
ตารางเวลา: แสดงตารางเรียน ปฏิทินกิจกรรม เวลาประชุม และกะงาน
เปรียบเทียบสินค้า: เปรียบเทียบฟีเจอร์ สเปก และราคาแบบเคียงข้างกัน
เอกสารอ้างอิง: แสดง API reference ตัวเลือก config shortcut และ parameter
อีเมล HTML: ตารางยังใช้งานได้ดีใน email client จำนวนมาก
วิธีใช้เครื่องมือนี้
- ตั้งขนาดตาราง: เลือกจำนวนแถวและคอลัมน์ด้วย control
- ปรับสไตล์: เปิดปิด border, striped rows, hover effect, compact mode, responsive wrapper และ dark header
- แก้ไข cell: คลิก cell ใน editor grid แล้วพิมพ์เนื้อหา
- เพิ่ม caption: เพิ่ม caption เพื่อ accessibility และบริบทของตารางได้
- Preview: ดูตารางที่ render แล้วอัปเดตแบบเรียลไทม์
- ส่งออก: คัดลอก HTML ที่สร้างขึ้นหรือดาวน์โหลดเป็นไฟล์ HTML
คำอธิบายตัวเลือกสไตล์
Bordered: เพิ่มเส้นขอบรอบ cell เหมาะกับตารางข้อมูลหนาแน่น
Striped rows: สลับสีพื้นหลังของแถวเพื่อให้อ่านตารางกว้างได้ง่ายขึ้น
Hover effect: highlight แถวที่เมาส์ชี้อยู่
Compact: ลด padding ของ cell เพื่อให้ใส่ข้อมูลได้มากขึ้น
Responsive: ห่อตารางด้วย container ที่เลื่อนแนวนอนได้บนหน้าจอเล็ก
Dark header: ใช้ header สีเข้มเพื่อแยกส่วนหัวให้ชัดเจน
แนวทางที่ดีสำหรับ HTML Table
- ใช้ markup เชิง semantic เช่น <thead>, <tbody> และ <th>
- เพิ่ม caption เมื่อตารางต้องการบริบท
- ใช้ข้อความ header ที่สั้นและสื่อความหมาย
- ทำตารางกว้างให้ responsive สำหรับมือถือ
- ใช้ table กับข้อมูลตาราง ไม่ใช้จัด layout หน้าเว็บ
- จำกัดจำนวนคอลัมน์เพื่อให้อ่านง่าย
- จัดตัวเลขชิดขวาเพื่อเปรียบเทียบได้ง่ายขึ้น
ปกป้องความเป็นส่วนตัวอย่างเต็มที่
การสร้างตารางทั้งหมดทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ข้อมูลตารางจะไม่ถูกอัปโหลด จัดเก็บ บันทึก หรือส่งต่อให้บุคคลที่สาม
เครื่องมือสำหรับนักพัฒนาที่เกี่ยวข้อง
จัดรูปแบบ JSON
จัดรูปแบบ ตรวจสอบ และทำให้ JSON อ่านง่ายแบบเรียลไทม์
แปลง JSON/CSV
แปลงระหว่าง JSON และ CSV พร้อม delimiter ที่กำหนดเองและ preview
แก้ไข Markdown
เขียนและ preview Markdown พร้อม live rendering และ export HTML
เปรียบเทียบโค้ด
เปรียบเทียบข้อความหรือโค้ดสองชุดแบบเคียงข้างกัน
แก้ไขข้อความ Pro
แก้ไขข้อความขั้นสูงพร้อมค้นหา แทนที่ จัดรูปแบบ และแปลงข้อมูล
เข้ารหัส Base64
เข้ารหัสและถอดรหัสข้อความหรือไฟล์เป็น Base64 และกลับกัน