โค้ดตาราง: การสร้างตารางสวยบนเว็บไซต์ด้วยภาษาไทย

การสร้างตารางใน HTML

HTML หรือ HyperText Markup Language เป็นภาษาที่ใช้สร้างและแสดงผลเว็บเพจบนอินเทอร์เน็ต ความสามารถในการสร้างตารางเป็นหนึ่งในความสามารถของ HTML ที่มีประโยชน์ในการแสดงข้อมูลให้กับผู้ใช้งาน ตารางมีโครงสร้างที่ช่วยให้สามารถจัดการและเรียกดูข้อมูลได้อย่างมีประสิทธิภาพ

การสร้างตารางใน HTML นั้นใช้แท็ก `

` เพื่อกำหนดให้รูปแบบตาราง รูปแบบตารางประกอบด้วยแถว `

` และเซลล์ `

` และ `

` เพื่อกลุ่มเซลล์ส่วนหัวและเซลล์ข้อมูล และใช้แท็ก `

` เพื่อกลุ่มเซลล์ส่วนท้าย เซลล์ในแถวสุดท้ายใช้ `colspan` เพื่อรวมเซลล์ให้กับสองคอลัมน์

ตัวอย่างการสร้างตารางด้วย HTML

เพื่อให้เข้าใจและสามารถใช้งานตาราง HTML ได้อย่างถูกต้อง ต้องมีการฝึกฝนและทดลองเขียนโค้ดเพิ่มเติม ดังตัวอย่างต่อไปนี้:

“`html

`: ใช้สำหรับเพิ่มข้อความคำอธิบายตารางเพิ่มเติม ที่จะแสดงด้านบนตาราง

ตัวอย่างโค้ด HTML การใช้งานแท็กเพิ่มเติมในตาราง:

“`html

ตารางเมืองหลวงในสหรัฐอเมริกา

รัฐ	เมืองหลวง	ประชากร (หมื่นคน)
แคลิฟอร์เนีย	แซคราเมนโต	400
เคนตักกี้	โอลิมเปีย	470

“`

ในตัวอย่างข้างต้น โดยใช้แท็ก `

` จะเพิ่มข้อความ “ตารางเมืองหลวงในสหรัฐอเมริกา” เหนือตาราง เซลล์ส่วนหัวจะใช้แท็ก `

` โดยทุกแถวของตารางจะประกอบด้วยเซลล์ที่มีความกว้างเท่ากัน และแต่ละเซลล์ในแถวจะอยู่ในบริเวณเดียวกัน โค้ดสร้างตาราง HTML โค้ด HTML สำหรับสร้างตารางมีรูปแบบดังนี้: “`html เนื้อหาเซลล์ที่ 1 เนื้อหาเซลล์ที่ 2 เนื้อหาเซลล์ที่ 3 เนื้อหาเซลล์ที่ 4 เนื้อหาเซลล์ที่ 5 เนื้อหาเซลล์ที่ 6 “` โค้ดด้านบนจะสร้างตารางที่ประกอบด้วย 2 แถวและ 3 เซลล์ในแต่ละแถว แต่ละเซลล์จะมีเนื้อหาที่กำหนดไว้ภายในแท็ก `	` การจัดแสดงข้อมูลในตาราง ในการจัดแสดงข้อมูลในตาราง สามารถใช้แท็กอื่นๆ เพิ่มเติมเพื่อตกแต่งรูปแบบตารางได้ เช่น – `	`: ใช้สำหรับสร้างเซลล์ส่วนหัวของตาราง ซึ่งจะมีลักษณะต่างจากเซลล์ข้อมูลปกติ โดยอาจใส่สีพื้นหลังหรือตัวหนังสือพิเศษได้ – `
` และเซลล์ข้อมูลปกติจะใช้แท็ก `	` การกำหนดขอบและลักษณะตาราง เพื่อกำหนดลักษณะตารางและขอบ เราสามารถใช้ CSS (Cascading Style Sheets) สำหรับการกำหนดคุณสมบัติเสริมของตารางได้ โดยใช้คุณสมบัติที่มีชื่อว่า `border`, `border-collapse`, `padding`, `background-color` เป็นต้น ตัวอย่างโค้ด CSS การกำหนดคุณสมบัติตาราง: “`html “` ในตัวอย่างข้างต้น เราใช้ CSS กำหนดให้ตารางแสดงผลเท่ากับตารางปกติ และเพิ่มลักษณะต่างๆ โดยสั่งให้ขอบเซลล์มีความหนา 1px และใส่สีพื้นหลังแถวหัว การใช้งานแท็กต่างๆในการสร้างตาราง HTML มีแท็กต่างๆ ที่ใช้สร้างตารางได้อย่างหลากหลาย นอกจากแท็ก ` ` ` ` และ ` `: ใช้สำหรับกลุ่มเซลล์ส่วนหัวของตาราง – ` `: ใช้สำหรับกลุ่มเซลล์ส่วนท้ายของตาราง – ` `: ใช้สำหรับกำหนดรูปแบบและลักษณะของคอลัมน์ในตาราง ตัวอย่างโค้ด HTML การใช้งานแท็กเพิ่มเติมในตาราง: “`html ` ที่เราได้กล่าวถึงไปแล้ว เรายังสามารถใช้งานแท็กอื่นๆ เพื่อกำหนดรูปแบบหรือตกแต่งตารางได้ เช่น – ` เลขที่ ชื่อสินค้า ราคา (บาท) 1 เสื้อยืด 300 2 กางเกงยีนส์ 800 รวม 1100 “` ในตัวอย่างข้างต้น เราใช้แท็ก `

Categories: นับ 46 โค้ด ตาราง

ลำดับ	จังหวัด	พื้นที่ (ตารางกิโลเมตร)	ประชากร (หมื่นคน)
1	กรุงเทพมหานคร	1,568.737	5,815
2	นครราชสีมา	20,494.683	2,634

` เพื่อกำหนดการเริ่มต้นและสิ้นสุดของตาราง
2. ใช้แท็ก `

` ในการกำหนดแถวของตาราง
3. ใช้แท็ก `

` `

` และ `

` เพื่อแบ่งกลุ่มและจัดการกับส่วนต่างๆ ของตาราง

การจัดการข้อมูลในตาราง
การเพิ่มข้อมูลลงในตารางสามารถทำได้โดยการใช้แท็ก `

` รูปแบบของโค้ด HTML สำหรับตารางเช่นนี้

“`html

` เพื่อให้มีคำบรรยายตาราง เช่น ชื่อตารางหรือคำอธิบายเพิ่มเติม

เพื่อความถูกต้องและคล้ายกับการออกแบบเว็บไซต์ด้วย CSS แนะนำให้ใช้แท็ก `

` เพื่อกำหนดเซลล์ภายในแถว 4. แท็ก `	` นอกจากเป็นแท็กที่ใช้สำหรับสร้างเซลล์หัวตาราง ยังเป็นแท็กที่ช่วยกำหนดลักษณะตําแหน่งในตารางด้วย เราสามารถครอบตัวอักษรหรือข้อความด้วยแท็ก `
` ภายในแท็ก `

ข้อมูลในเซลล์1	ข้อมูลในเซลล์2
ข้อมูลในเซลล์3	ข้อมูลในเซลล์4

“`

ในกรณีที่ต้องการเน้นข้อมูลในเซลล์หัวตาราง เราสามารถใช้แท็ก `

` แทน `

` โค้ด HTML จะมีลักษณะดังนี้

“`html

หัวเรื่องคอลัมน์1	หัวเรื่องคอลัมน์2
ข้อมูลในเซลล์1	ข้อมูลในเซลล์2
ข้อมูลในเซลล์3	ข้อมูลในเซลล์4

“`

เพื่อความเข้าใจง่ายขึ้นเมื่อต้องการรวมเซลล์ เราสามารถใช้แท็ก `colspan` และ `rowspan` ได้ เหมือนกับการใช้ CSS ในการรวมเซลล์

“`html

หัวเรื่องคอลัมน์1	หัวเรื่องคอลัมน์ที่ 2 และ 3
	คอลัมน์ที่ 2	คอลัมน์ที่ 3
ข้อมูลในเซลล์1	ข้อมูลในเซลล์2	ข้อมูลในเซลล์3

“`

การปรับแต่งและการจัดการตาราง
เมื่อได้สร้างตาราง HTML เรียบร้อยแล้ว เรายังสามารถปรับแต่งรูปแบบและลักษณะต่างๆ ของตารางได้อย่างหลากหลาย โดยใช้ CSS เพื่อให้ตารางแสดงผลอย่างสวยงามและเหมาะสมกับเว็บไซต์ของคุณ

5.1 เปลี่ยนขนาดและความกว้างของตาราง
เราสามารถปรับขนาดและความกว้างของตารางโดยใช้ CSS ได้ หากต้องการเปลี่ยนขนาดตารางให้เล็กลงเพื่อให้พอดูและอ่านได้สะดวก สามารถเพิ่มคุณสมบัติ `width` และ `height` เข้าไปใน CSS ของตารางได้ เช่น

“`html

“`

5.2 การใส่เส้นสีในตาราง
เราสามารถใส่เส้นสีในตารางเพื่อเพิ่มความมีเส้นของตารางโดยใช้ CSS โค้ดตัวอย่างเช่น

“`html

“`

5.3 การจัดให้ตารางแสดงผลอย่างสวยงาม
เราสามารถปรับแต่งตารางอย่างสวยงามโดยใช้ CSS เพื่อเข้าถึงคุณลักษณะและลักษณะต่างๆ ของตาราง เช่น สีพื้นหลัง เส้นขอบ เส้นแบ่งแถว และอื่น ๆ ตัวอย่างโค้ด CSS ที่ใช้ในการปรับแต่งตารางได้แก่

“`html

```

โค้ดดังกล่าวมีการกำหนดสไตล์ CSS ให้กับตาราง ได้แก่ความกว้างของตาราง การสับเปลี่ยนเส้นขอบ และสีพื้นหลังของหัวข้อคอลัมน์และแถว

**FAQ**

1. คำถาม: ตรวจสอบว่าตาราง HTML ของฉันเป็นไปตามมาตรฐานหรือไม่?
- คำตอบ: เพื่อตรวจสอบว่าตารางของคุณถูกต้องตามมาตรฐาน HTML คุณสามารถใช้บริการตรวจสอบรหัส HTML ออนไลน์หรือฟีเจอร์ตรวจสอบรหัสในโปรแกรมสำหรับการพัฒนาเว็บไซต์ได้

2. คำถาม: สามารถใช้บริการใดในการสร้างตาราง HTML ที่มีรูปแบบสวยงาม?
- คำตอบ: มีหลายบริการที่สามารถใช้ในการสร้างตาราง HTML ที่มีรูปแบบสวยงาม เช่น Table Styler, HTML Table Styling Generator, และ W3Schools HTML Table Generator เป็นต้น

3. คำถาม: จะปรับแต่งช่องว่างระหว่างเซลล์ได้อย่างไร?
- คำตอบ: คุณสามารถใช้ CSS เพื่อปรับขนาดและพื้นที่ระหว่างเซลล์ โดยใช้คุณสมบัติ `padding` และ `margin` ในส่วนของแท็ก `

` และ `

`

4. คำถาม: มีวิธีใดในการทำให้ตาราง HTML ดูดีในอุปกรณ์เคลื่อนที่?
- คำตอบ: สามารถใช้ Responsive Web Design (RWD) เพื่อทำให้ตาราง HTML ของคุณปรับตามขนาดหน้าจอของอุปกรณ์เคลื่อนที่ได้ เพื่อให้ตารางแสดงผลอย่างสวยงามและใช้งานได้ง่ายในทุก ๆ อุปกรณ์

5. คำถาม: สามารถปรับแต่งสีพื้นหลังของตารางได้อย่างไร?
- คำตอบ: คุณสามารถใช้ CSS เพื่อเปลี่ยนสีพื้นหลังของตารางและแถว โดยใช้คุณสมบัติ `background-color` ของแท็ก `

` และ `

`

บทความข้างต้นได้ให้ข้อมูลเบื้องต้นเกี่ยวกับตกแต่งและสร้างตาราง HTML อย่างละเอียด เพื่อช่วยเพิ่มอันดับของการค้นหาของ Google ของเว็บไซต์ของคุณ ให้คุณมีความเข้าใจในวิธีการใช้และปรับแต่งตาราง HTML ตามที่คุณต้องการ