บทความนี้จะอธิบายขั้นตอนการเพิ่มรูปภาพภายในเซลล์ตารางใน HTML
จะเพิ่มรูปภาพภายในเซลล์ตารางใน HTML ได้อย่างไร
HTML “ แท็ก ” ใช้เพื่อแทรกรูปภาพลงในเซลล์ตาราง
ไวยากรณ์
ทำตามไวยากรณ์เพื่อฝังรูปภาพภายในเซลล์ตาราง:
< td >< img src = '' ทุกอย่าง = '' ความกว้าง = '' >< / td >
ที่นี่:
- “
องค์ประกอบ ” ระบุเซลล์ตารางที่ต้องการเพิ่มรูปภาพ - “
แท็ก ” ใช้เพื่อระบุรูปภาพ
- “ src แอตทริบิวต์กำหนดเส้นทางของภาพ
- “ ทุกอย่าง ” หมายถึงข้อความที่จะแสดงบนหน้าจอในกรณีที่โหลดภาพไม่สำเร็จ
- “ ความกว้าง ” กำหนดความกว้างของภาพ
ตัวอย่าง
ในไฟล์ HTML ให้สร้างตารางโดยทำตามคำแนะนำที่ให้ไว้:
- “ <ตาราง> ” ใช้องค์ประกอบในการสร้างตาราง
- “
” องค์ประกอบระบุแถว - “
” ปรับหัวเรื่องโดยที่ “ คอลสแปน คุณสมบัติ ” หมายถึงจำนวนคอลัมน์ที่เซลล์ควรครอบคลุม - “
” สร้างเซลล์ตารางสำหรับข้อมูล “ ” แท็กที่มีแอตทริบิวต์ที่จำเป็นจะถูกแทรกภายในแท็กนี้เพื่อฝังรูปภาพในเซลล์ตาราง: < ตาราง >
< ท >
< ไทย คอลสแปน = '3' สไตล์ = 'ขนาดตัวอักษร: 28px;' >ผักและผลไม้< / ไทย >
< / ท >
< ท >
< ไทย >ชื่อ< / ไทย >
< ไทย สไตล์ = 'ความกว้าง: 250px;' >รูปภาพ< / ไทย >
< ไทย > ผลไม้ / ผัก< / ไทย >
< / ท >
< ท >
< td >แอปเปิ้ล< / td >
< td >< img src = '/images/apple.jpg' ทุกอย่าง = 'แอปเปิ้ล' ความกว้าง = '200' >< / td >
< td >ผลไม้< / td >
< / ท >
< ท >
< td >แครอท< / ไทย >
< td >< img src = '/images/carrot.jpg' ทุกอย่าง = 'แครอท' ความกว้าง = '200' >< / ไทย >
< td >ผัก< / ไทย >
< / ท >
< ท >
< td >ส้ม< / ไทย >
< td >< img src = '/images/orang.jpg' ทุกอย่าง = 'ส้ม' ความกว้าง = '200' >< / ไทย >
< td >ผลไม้< / ไทย >
< / ท >
< / ตาราง >สังเกตได้ว่าตาราง HTML ถูกสร้างขึ้นพร้อมกับรูปภาพที่ฝังสำเร็จแล้ว:
ซีเอสเอส
ตอนนี้เราจะหารือเกี่ยวกับคุณสมบัติ CSS ที่ใช้ในการตั้งค่าเค้าโครงของตาราง
สไตล์องค์ประกอบ 'ตาราง'
ขั้นแรก ให้เข้าไปที่ “ <ตาราง> ” ตามชื่อแท็กและใช้คุณสมบัติต่อไปนี้:
ตาราง {
จัดข้อความ : ศูนย์กลาง ;
ความกว้าง : 800px ;
ยุบชายแดน : ทรุด ;
ขอบ : อัตโนมัติ ;
ขนาดตัวอักษร : 20px ;
}คำอธิบายของรหัสด้านบนได้รับด้านล่าง:
- “ จัดข้อความ ” กำหนดการจัดตำแหน่งข้อความ
- “ ความกว้าง ” กำหนดความกว้างของตาราง
- “ ยุบชายแดน ” คุณสมบัติกำหนดว่าเส้นขอบยุบหรือไม่
- “ ขอบ ” เพิ่มพื้นที่รอบโต๊ะ
- “ ขนาดตัวอักษร ” กำหนดขนาดตัวอักษรของตาราง
สไตล์องค์ประกอบ 'th' และ 'td'
ไทย , td {
ชายแดน : 1px แข็ง สีม่วง ;
}ที่นี่ “ ชายแดน คุณสมบัติ ” ปรับเส้นขอบรอบ ๆ องค์ประกอบโดยระบุค่าสำหรับความกว้างของเส้นขอบ สไตล์ และสี
เอาต์พุต
โพสต์นี้เกี่ยวกับการแทรกรูปภาพในเซลล์ตารางใน HTML
บทสรุป
ในการเพิ่มรูปภาพภายใน “ <ตาราง> ” เซลล์ ใช้ปุ่ม “
” แท็กภายใน HTML “
' องค์ประกอบ. องค์ประกอบ “ ” ระบุ “ src แอตทริบิวต์ ” เพื่อระบุ URL รูปภาพ โดยเฉพาะอย่างยิ่งในการปรับขนาดภาพให้เพิ่ม ' ความสูง ' และ ' ความกว้าง แอตทริบิวต์ภายในแท็ก '
' บล็อกนี้ได้แสดงขั้นตอนการเพิ่มรูปภาพในเซลล์ตาราง HTML
- “
- “