การตั้งค่ารูปภาพเป็นพื้นหลังของตารางบนเว็บเพจ

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

เริ่มต้นใช้งาน

วิธีที่ดีที่สุดในการเพิ่มภาพพื้นหลังลงในตารางคือการใช้ CSS

พื้นหลัง

คุณสมบัติ เพื่อเตรียมพร้อมในการเขียน CSS อย่างมีประสิทธิภาพและเพื่อหลีกเลี่ยงปัญหาการแสดงผลที่ไม่คาดคิดให้เปิดภาพพื้นหลังของคุณและจดบันทึกความสูงและความกว้าง จากนั้นอัปโหลดภาพของคุณไปยังผู้ให้บริการโฮสติ้งของคุณ ทดสอบ URL ของรูปภาพ สาเหตุที่พบได้บ่อยที่สุดว่าทำไมภาพไม่แสดงเป็นเพราะมีการสะกดผิดใน URL หลังจากที่คุณทำขั้นตอนเสร็จสิ้นแล้วให้วางสไตล์ CSS ไว้ในส่วนหัวของเอกสาร:

1. เขียน CSS ของคุณสำหรับพื้นหลังบนโต๊ะของคุณและวางไว้ภายในบล็อกสไตล์:

   ตาราง {background: url (" URL ไปยังรูปภาพ ") no-repeat;}

   1. วางตารางไว้ใน HTML:

   2. เซลล์ 1

   3. เซลล์ที่ 2

   6. เซลล์ 1

   7. เซลล์ที่ 2

2. ตั้งความกว้างและความสูงของตารางให้ตรงกับความกว้างและความสูงของภาพ

   … ​​

หากเนื้อหาในตารางของคุณมีขนาดใหญ่กว่าความสูงและความกว้างของภาพภาพพื้นหลังจะแสดงเพียงครั้งเดียว

วางพื้นหลังไว้บนโต๊ะเดียว

คำแนะนำข้างต้นจะตั้งค่าภาพพื้นหลังเดียวกันในทุกๆตารางในเพจ ถ้าคุณต้องการวางพื้นหลังเฉพาะตารางเฉพาะคุณต้องใช้ a

ชั้น

1. attribute.Change CSS ของคุณเพื่ออ่าน:

   table.background {background: url (" URL ไปยังรูปภาพ ") no-repeat;}

2. เพิ่มชั้นเรียน พื้นหลัง ไปยังตารางใดก็ได้ที่คุณต้องการมีภาพพื้นหลัง กำหนดความกว้างและความสูงสำหรับตารางเหล่านั้น
   class = "พื้นหลัง" style = "width: 400px; height: 500px;> …

ให้ภาพพื้นหลังของตารางซ้ำ

ตารางที่ใหญ่ขึ้นหรือตารางที่มีเนื้อหามากขึ้นอาจต้องมีการทำซ้ำในพื้นหลังเพื่อให้ตารางทั้งหมดเต็มไป เปลี่ยนค่าใน CSS เพื่อให้ภาพเกิดซ้ำบนแกน y, แกน x หรือมีการปูกระเบื้องทั้งสองอย่าง

พื้นหลัง: URL ("URL ไปยังรูปภาพ") ซ้ำ;

โดยค่าเริ่มต้นค่าการทำซ้ำจะถูกปูกระเบื้อง แต่คุณสามารถตั้งค่าซ้ำได้อีกด้วย

ซ้ำ-X

หรือ

ซ้ำ-Y

กับแนวนอนหรือแนวตั้งตามลำดับ

สีพื้นหลังของเซลล์บล็อกภาพพื้นหลังของตาราง

สีพื้นหลังที่ตั้งไว้ในเซลล์ตารางจะแทนที่ภาพพื้นหลังบนโต๊ะ ดังนั้นควรระมัดระวังเมื่อใช้สีพื้นหลังในเซลล์ของคุณร่วมกับภาพพื้นหลังของตาราง

การพิจารณา

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

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