HTML table adds background image syntax

 HTML table syntax generally increased background picture is divided into two, the first is the traditional HTML background attribute directly apply the background image on the form, the second way is to use CSS 's background-image property for the table to increase the background image, What is the difference between the two? Traditional HTML background is easy to use, but more difficult with background images with the size of the table, while the CSS of background-image can make the picture very easily and width of the table, the perfect combination of height, is divided into the following two examples designed to give you a way of For reference, in principle, it is recommended to use CSS design syntax, after all, CSS has replaced traditional HTML design patterns on a large scale .

Example 1: Use HTML background to add a background image to the table

<table background="background image URL" style="width:200px;height:133px;" border="1">
<tr><td></td><td></td></tr>
<tr ><td></td><td></td></tr>
</table>

Example presentation effect

Example 1 is a simple four-column table. We use HTML background to insert a background image with a width of 200px and a height of 133px. If you simply insert the background image into the table, the effect will not be so good, because the table has default columns bit is also not such a big grid, so we followed by the CSS of style to declare the width and height of the table, so that the size of the background image of the entire table match, look more prettier, HTML background attribute and CSS mix together The design is also quite easy. If you are interested in the design rules of web forms or traditional HTML background design, please refer to these two articles.

• HTML table
• HTML background color bgcolor and background image background settings

Then let's take a closer look at how to use CSS to complete the background image of the table in Example 2 .

Example 2: Use CSS background-image to add a background image to the table

<table style="background-image:url (background image URL);width:200px;height:133px;" border="1">
<tr><td></td><td></td></ tr>
<tr><td></td><td></td></tr>
</table>

Example presentation effect

The biggest difference between the second example and the first example is that the HTML backgroucd is cancelled and the background-image standard background image design attributes are declared directly in the CSS style, which can be compared with the width (width:200px;) and height (height:133px; ) Perfect combination, CSS is more rigorous in designing the size of web elements than traditional HTML . There are several background design series about CSS , it is recommended to study carefully.

• CSS background-image background image
• CSS background-color background color
• CSS background-position background image position

With the above several CSS background design techniques, it can be used not only on web forms, but also many other web elements such as DIV blocks, span areas and even the background images of the entire web page (body). The application range is quite wide. , This is also the advantage of CSS design.