เครื่องมือสร้างตาราง HTML
สร้างตาราง HTML ด้วยตัวแก้ไขแบบภาพและคัดลอกโค้ดได้ทันที
ผลลัพธ์ HTML
<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 8px; text-align: left;">Header 1</th>
<th style="padding: 8px; text-align: left;">Header 2</th>
<th style="padding: 8px; text-align: left;">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">Cell 1,1</td>
<td style="padding: 8px;">Cell 1,2</td>
<td style="padding: 8px;">Cell 1,3</td>
</tr>
<tr>
<td style="padding: 8px;">Cell 2,1</td>
<td style="padding: 8px;">Cell 2,2</td>
<td style="padding: 8px;">Cell 2,3</td>
</tr>
<tr>
<td style="padding: 8px;">Cell 3,1</td>
<td style="padding: 8px;">Cell 3,2</td>
<td style="padding: 8px;">Cell 3,3</td>
</tr>
</tbody>
</table>เกี่ยวกับเครื่องมือนี้
เครื่องมือสร้างตาราง HTML ให้คุณตั้งค่าจำนวนแถวและคอลัมน์ แก้ไขเซลล์โดยตรง และรับโค้ด HTML ตารางพร้อมใช้งาน คุณสามารถกำหนดค่าแถวส่วนหัว เส้นขอบ แถวลาย และการเติมเซลล์แบบภาพได้
HTML ที่สร้างขึ้นปฏิบัติตามการมาร์กอัปเชิงความหมายด้วยโครงสร้าง thead และ tbody ที่เหมาะสม ซึ่งดีกว่าสำหรับการเข้าถึงและโปรแกรมอ่านหน้าจอ โค้ดอัปเดตแบบเรียลไทม์ขณะแก้ไข
วิธีใช้งาน
- ตั้งค่าจำนวนแถวและคอลัมน์
- สลับแถวส่วนหัว เส้นขอบ และแถวลายด้วยช่องทำเครื่องหมาย
- ปรับค่าการเติมเซลล์
- คลิกที่เซลล์ใดก็ได้เพื่อพิมพ์เนื้อหาโดยตรง
- คัดลอกโค้ดใต้ "ผลลัพธ์ HTML" และใช้ในโปรเจกต์ของคุณ
กรณีการใช้งาน
เหมาะสำหรับตารางเปรียบเทียบข้อมูล ตารางราคา ตารางเวลา ตารางข้อกำหนดผลิตภัณฑ์ และข้อมูลใดๆ ที่แสดงในรูปแบบตารางบนหน้าเว็บ
คำถามที่พบบ่อย
- สามารถกำหนดสไตล์ตารางโดยไม่ใช้ CSS ได้ไหม? — ได้ HTML ที่สร้างมีแอตทริบิวต์ border และ cellpadding ดังนั้นสไตล์พื้นฐานจึงถูกนำไปใช้โดยไม่ต้องใช้ CSS
- สามารถเพิ่ม colspan หรือ rowspan ได้ไหม? — เครื่องมือนี้สร้างโครงสร้างตารางพื้นฐาน แก้ไขโค้ดที่สร้างโดยตรงเพื่อเพิ่มแอตทริบิวต์ colspan/rowspan
- จะทำให้ตาราง responsive ได้อย่างไร? — ห่อตารางในแท็ก div ที่มี overflow-x: auto หรือใช้ CSS media queries เพื่อให้เลื่อนในแนวนอนได้บนหน้าจอขนาดเล็ก