Facts First

การสร้างตาราง Html: ขั้นตอนง่ายสำหรับผู้เริ่มต้น

Posted on by Hạnh Hồng

การสร้างตาราง Html

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

การสร้างตาราง HTML
สร้างตาราง HTML ง่ายมาก ทำได้โดยใช้แท็ก

ใน HTML และแท็ก

ในการสร้างแถว และ

ในการสร้างคอลัมน์ของตาราง ตัวอย่างของคำสั่งสร้างตาราง 3 คอลัมน์ 1 แถว แสดงดังนี้:

“`html

คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3

“`

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

เพื่อแสดงว่าเรากำลังสร้างตาราง และ

เพื่อแสดงแถวในตาราง และ

เพื่อแสดงคอลัมน์ในแต่ละแถว

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

“`css
table {
border-collapse: collapse; /* เพื่อให้เส้นขอบหมดลง */
width: 100%; /* กำหนดความกว้างของตาราง */
}

td, th {
border: 1px solid black; /* กำหนดเส้นขอบให้กับคอลัมน์และแถว */
padding: 8px; /* กำหนดระยะห่างภายในคอลัมน์และแถว */
text-align: left; /* จัดการข้อความในคอลัมน์ */
}

th {
background-color: #4CAF50; /* กำหนดสีพื้นหลังให้กับส่วนหัวคอลัมน์ */
color: white; /* กำหนดสีข้อความในส่วนหัวคอลัมน์ */
}
“`

โดยในตัวอย่างข้างต้น เราใช้ตัวเลือก CSS เพื่อกำหนดลักษณะตาราง และคอลัมน์และแถวที่อยู่ข้างใน นอกจากนี้ เรายังใช้ตัวเลือกคอลัมน์เริ่มต้น th เพื่อกำหนดสีพื้นหลังและสีข้อความในส่วนหัวของตาราง

การเพิ่มขอบและสีพื้นหลังให้กับตาราง
หากคุณต้องการเพิ่มขอบและสีพื้นหลังให้กับตาราง HTML ของคุณ เพียงแค่เพิ่มบล็อก CSS ต่อไปนี้ลงในส่วนของการปรับแต่งรูปแบบของตาราง:

“`css
table {
border: 1px solid black; /* เพิ่มเส้นขอบ */
background-color: #f1f1f1; /* เพิ่มสีพื้นหลังของตาราง */
}
“`

โดยในตัวอย่างข้างต้น เราใช้ส่วนปรับแต่ง CSS เพื่อเพิ่มเส้นขอบและสีพื้นหลังให้กับตาราง โดยกำหนดค่าเส้นขอบเป็นสีดำ (black) และสีพื้นหลังเป็นสีเทาอ่อน (f1f1f1)

การจัดกฏในตารางที่ละเอียดและสูงสุด
HTML นั้นมีความยืดหยุ่นในการจัดกฏในตาราง คุณสามารถกำหนดความกว้างและความสูงของตาราง แถว และคอลัมน์ได้ตามต้องการ ตัวอย่างเช่น เราสามารถใช้ส่วนปรับแต่ง CSS เพื่อกำหนดความกว้างและความสูงแบบตายตัวสำหรับตาราง โดยใช้คำสั่ง height และ width เพื่อกำหนดขนาดของตาราง:

“`css
table tr td {
width: 20%; /* กำหนดความกว้างของคอลัมน์ให้เป็น 20% ของความกว้างของตาราง */
height: 30px; /* กำหนดความสูงของแถวให้เป็น 30px */
}
“`

กำหนดค่า width และ height แบบตายตัวในตัวอย่างด้านบน เรากำหนดความกว้างของคอลัมน์ให้เป็น 20% ของความกว้างของตารางและความสูงของแถวให้เป็น 30px

การใส่ข้อความและรูปภาพในตาราง
อีกหนึ่งฟีเจอร์สำคัญของตาราง HTML คือคุณสามารถใส่ข้อความและรูปภาพในตารางได้ ใช้แท็ก

เพื่อแทรกข้อความหรือรูปภาพในแต่ละคอลัมน์ ตัวอย่างเช่น เราสามารถใส่ข้อความลงในคอลัมน์ดังนี้:

“`html

ข้อความ 1 ข้อความ 2 ข้อความ 3

“`

หรือหากคุณต้องการใส่รูปภาพลงในตาราง HTML ให้ใช้แท็ก และกำหนด URL สำหรับรูปภาพในแท็ก src ตัวอย่างเช่น:

“`html

รูปภาพ รูปภาพ รูปภาพ

“`

การจัดวางข้อมูลแบบเป็นแถวหรือคอลัมน์ย่อย
คุณสามารถจัดวางข้อมูลในตารางแบบเป็นแถวหรือคอลัมน์ย่อยได้ ใช้ colspan เพื่อรวมคอลัมน์หรือแถวเข้าด้วยกัน หรือใช้ rowspan เพื่อรวมแถวหรือคอลัมน์ของตาราง ตัวอย่างเช่น เราสามารถใช้ colspan เพื่อรวมคอลัมน์ดังนี้:

“`html

คอลัมน์ 1 คอลัมน์ 2
คอลัมน์ 3 คอลัมน์ 4 คอลัมน์ 5

“`

ในตัวอย่างข้างต้น เราใช้ colspan=”2″ เพื่อรวมคอลัมน์แรกและคอลัมน์ที่สองเข้าด้วยกัน

การใส่ลิงค์ในตารางและการกำหนดการกระทำเมื่อกดลิงค์
การใส่ลิงค์ในตาราง HTML สามารถทำได้โดยใช้แท็ก และกำหนด URL สำหรับลิงค์ในแท็ก href ตัวอย่างเช่น:

“`html

ลิงค์ 1 ลิงค์ 2 ลิงค์ 3

“`

เมื่อคุณกำหนด URL สำหรับลิงค์ในแท็ก href และคลิกที่ลิงค์ เว็บเบราว์เซอร์จะเปิด URL นั้นในหน้าต่างเว็บเพจใหม่

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