สรุปวิธีการป้องกันไม่ให้ตารางแตกบนหน้าเว็บ

สรุป 4 วิธีป้องกันไม่ให้ตารางพังเมื่อทำเว็บเพจ หวังว่าจะมีประโยชน์กับทุกคนนะ!

1. ใช้ <img src="/images/NullPic.gif" width="400" height="300"> เพื่อแก้ไขขนาดของรูปภาพโดยตรง

วิธีการนี้จะไม่ทำให้เกิดความสับสนในการแสดงหน้า แต่รูปภาพที่แสดงมักจะผิดรูป

ไม่แนะนำเลย

2. ใช้ <img src="/images/NullPic.gif">

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

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

3. เพื่อป้องกันไม่ให้รูปภาพแตกตาราง ตามข้างต้น ให้จำกัดตาราง:

เพิ่มรหัสจำกัดลงในแท็กตาราง <table>, <table width="500" border="0" align="center " cellpadding ="0" cellspacing="0"> สามารถป้องกันการยืดตารางได้อย่างมีประสิทธิภาพ

4. ก้าวไปอีกขั้นหนึ่ง คุณสามารถใช้ล้อเลื่อนของเมาส์เพื่อซูมเข้าและออกจากรูปภาพ:

<SCRIPT type=text/javascript>
ฟังก์ชั่น bbimg(o){
var Zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (ซูม>0) o.style.zoom=zoom+'%';
กลับเท็จ;
-
</SCRIPT>

วิธีการใช้งานมีดังนี้:

<img src="/images/NullPic.gif">

คุณยังสามารถใช้สไตล์:

img {
ความกว้างสูงสุด: 500px; width:expression(this.width > 500 ? "500px" : this.width)
-