Summary of methods to prevent tables from being broken on web pages

In web page production, there are 4 ways to prevent the table from being broken, I hope it will be useful to everyone!

1. Use <img src="/images/NullPic.gif" width="400" height="300"> to directly fix the size of the picture.

This method will not cause confusion in the page display, but the displayed pictures are often deformed.

The least recommended.

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

This method will automatically scale down to the specified width when calling the picture, and will not cause the picture to be deformed and will not break the table, so it will not cause the page to be displayed incorrectly.

But there is also a disadvantage. If the image is too large, it will still be displayed in the original size of the image during the display process (download process), which will break the table and the page will be ugly. Of course, the image will automatically shrink when it is fully displayed.

3. In order to prevent the picture from breaking the table, on the basis of the above, restrict the table:

Add some restrictions to the table's tag <table>, and <table width="500" border="0" align="center" cellpadding="0" cellpacing="0"> can effectively prevent the table from being stretched out Now.

4. Going further, using the mouse wheel to reduce the code to enlarge the picture:

<SCRIPT type=text/javascript>
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
</SCRIPT>

How to use it is as follows:

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

Styles can also be used:

img {
max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)
}