HTML Table Background Image Of A Cell - Plus2net

Trang chủ » Html Fill Table Cell With Image » HTML Table Background Image Of A Cell - Plus2net

Có thể bạn quan tâm

    plus2net Home
  • HOME
      plus2net HOME SQL JavaScript PHP Python ASP jQuery C PhotoShop
  • HTML HTML Home <FORM> Color Chart Calendar Button as Link Type of Tags Scrolling by Marquee Canvas
  • Table
      • Login ×

      Login

      Username Password Login Cancel

      Not a member? Sign Up

      Forgot Password?

    • Contact Us
    HTML table background image
    1. HTML
    2. Page Structure
    3. <BODY>
    4. <TABLE>
    How to add background image to HTML page body elements and tables with repeat and size We can create attractive headers like modern web design sites using background images. We will use one simple image to create one header like this below. To create one image like this please visit our gradient tutorial in our graphics section.
    This is our text over the header
    <table width="100%" border="0" cellspacing="1" cellpadding="0" background="images/bg1.jpg"> <tr> <td> This is our text over the header </td> </tr> </table>

    Adding Background image to table data cell

    This is our text over the header
    <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td background="images/bg1.jpg"> This is our text over the header </td> </tr> </table> In above script we have added background image directly. We can also use style sheet to display images inside table

    Using Style

    Globally ( for the page ) we can declare style of the table like this. table { background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; } All tables of the page will follow this property and all will use the same image as background image. By adding class to it we can define another style to some other tables. table.t1 { background: url("images/bg1.jpg") repeat; } We will add the above code to head section of the page and display two tables with this. demo of Table background image with CSS Here is the script of the above demo <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <title>Demo of table background image</title> <style type="text/css"> table { background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; } table.t1 { background: url("images/bg1.jpg") repeat; } </style> </head> <body> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> <br><br> <table class="t1"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html> Table HTML Page Structure     This article is written by plus2net.com team. plus2net.com

Từ khóa » Html Fill Table Cell With Image