Skip to main content
Participant
May 17, 2017
Answered

Inserting A Background Image In A Table Using DW CS4

  • May 17, 2017
  • 2 replies
  • 1955 views

Hi Adobe Forum,

   Is there a simple way to insert a Background Image Into a Table, just the table, Not The Entire Document Window, Using DW CS4.  I have been spinning my wheels trying to do it.  All I can do is get the Background Image to fill up the entire document window, not just the table.

THanks,

Ken

    This topic has been closed for replies.
    Correct answer BenPleysier

    In the following, adjust position and size of image as per your requirement

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

      body {

      width: 85%;

      margin: auto;

      }

      table {

      width: 400px;

      background: url(http://loremflickr.com/320/240);

      }

    </style>

    </head>

    <body>

      <table>

      <thead>

      <tr>

      <th>col</th>

      <th>col</th>

      <th>col</th>

      <th>col</th>

      </tr>

      </thead>

      <tbody>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      </tbody>

      </table>

    </body>

    </html>

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    May 18, 2017

    I hope you're not using 20th century Tables for your page layout.

    Tables are for tabular data like charts and spreadsheets only.

    Use CSS to create layouts.

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    May 17, 2017

    In the following, adjust position and size of image as per your requirement

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

      body {

      width: 85%;

      margin: auto;

      }

      table {

      width: 400px;

      background: url(http://loremflickr.com/320/240);

      }

    </style>

    </head>

    <body>

      <table>

      <thead>

      <tr>

      <th>col</th>

      <th>col</th>

      <th>col</th>

      <th>col</th>

      </tr>

      </thead>

      <tbody>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      <tr>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      <td>row</td>

      </tr>

      </tbody>

      </table>

    </body>

    </html>

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!