Search code examples
htmlcsshtml-table

How can an image be the full width of an HTML table?

Here is JPEG File for Certificate, and I implement it for the backend developers in HTML table format enter image description here

I try to figure out bottom image part full width, but I couldn't implemet as above image!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>LankaBangla Finance</title>
</head>

<body style="background-color: lightgrey">

  <table style="width:794px;height: 800px;margin:1.5% auto;background-color: #ffffff;border:1px solid #ededed; padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h1 style="text-transform: uppercase; letter-spacing: 3px; font-weight: bold;line-height: 48px;margin-bottom: 5px;display:block; font-size: 48px;color: #5d1c58">
          Certificate</h1>
        <h2 style="text-transform: uppercase; font-weight: lighter; color:#f69c38;letter-spacing: 5px; line-height: 34px;margin: 5px;display:block; font-size: 34px">
          of completion</h2>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <strong style="font-size: 22px;font-style:italic; color:#666666">This is to certifies that</strong>
        <h1 style="font-size: 40px; color:#008540">Mr Khairul Hasan</h1>
        <p style="font-size: 20px;color:#737373;">has successfully completed 14 mandatory modules through LBFL e-Learning Academy</p>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <h2 style="text-transform: uppercase;color:#d94579; letter-spacing: 1px; font-weight: bold;line-height: 24px;margin-bottom: 5px;display:block; font-size: 24px">
          MODULE COVERED</h2>
        <strong style="color:#5b5b5b; font-size: 18px; font-weight:bold;display: inline-block;line-height: 1.2">Internal Control And Compliance</strong>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <table width="100%">
          <tr>
            <td><img width="100%" src="https://i.imgur.com/TNICjPS.png" alt=""></td>
          </tr>
        </table>
      </td>
    </tr>


  </table>

</body>

</html>

Solution

  • I think you can fix this by changing the image to a positioned element and ensuring it is positioned relative to the table.

    Set the position CSS attribute on the table to relative

    <table style="position: relative;">
<!-- table content goes here -->
</table>

    Set the position css attribute to absolute, and set the left and bottom attributes to 0 on the image:

    <img 
  style="position: absolute; left: 0; bottom: 0;" 
  width="100%" 
  src="https://i.imgur.com/TNICjPS.png" 
  alt=""
>

    I updated your code snippet to show how this works.

    Hope this helps!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>LankaBangla Finance</title>
</head>

<body style="background-color: lightgrey">
  <table style="position: relative; width:794px;height: 800px;margin:1.5% auto;background-color: #ffffff;border:1px solid #ededed; padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h1 style="text-transform: uppercase; letter-spacing: 3px; font-weight: bold;line-height: 48px;margin-bottom: 5px;display:block; font-size: 48px;color: #5d1c58">
          Certificate</h1>
        <h2 style="text-transform: uppercase; font-weight: lighter; color:#f69c38;letter-spacing: 5px; line-height: 34px;margin: 5px;display:block; font-size: 34px">
          of completion</h2>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <strong style="font-size: 22px;font-style:italic; color:#666666">This is to certifies that</strong>
        <h1 style="font-size: 40px; color:#008540">Mr Khairul Hasan</h1>
        <p style="font-size: 20px;color:#737373;">has successfully completed 14 mandatory modules through LBFL e-Learning Academy</p>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <h2 style="text-transform: uppercase;color:#d94579; letter-spacing: 1px; font-weight: bold;line-height: 24px;margin-bottom: 5px;display:block; font-size: 24px">
          MODULE COVERED</h2>
        <strong style="color:#5b5b5b; font-size: 18px; font-weight:bold;display: inline-block;line-height: 1.2">Internal Control And Compliance</strong>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
    <tr>
      <td colspan="4">
        <img style="position: absolute; left: 0; bottom: 0;" width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
      </td>
    </tr>
  </table>

</body>

</html>

    Edit: Added a version that should be email friendly. This swaps out the use of a positioned element for a div that wraps the table and img as siblings, and uses some hacky negative margin to make it look how you want.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>LankaBangla Finance</title>
</head>

<body style="background-color: lightgrey">
  <div style="width:794px; margin:1.5% auto; background-color: #ffffff; border:1px solid #ededed;">
  <table style="width:794px;height: 800px;padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h1 style="text-transform: uppercase; letter-spacing: 3px; font-weight: bold;line-height: 48px;margin-bottom: 5px;display:block; font-size: 48px;color: #5d1c58">
          Certificate</h1>
        <h2 style="text-transform: uppercase; font-weight: lighter; color:#f69c38;letter-spacing: 5px; line-height: 34px;margin: 5px;display:block; font-size: 34px">
          of completion</h2>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <strong style="font-size: 22px;font-style:italic; color:#666666">This is to certifies that</strong>
        <h1 style="font-size: 40px; color:#008540">Mr Khairul Hasan</h1>
        <p style="font-size: 20px;color:#737373;">has successfully completed 14 mandatory modules through LBFL e-Learning Academy</p>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <h2 style="text-transform: uppercase;color:#d94579; letter-spacing: 1px; font-weight: bold;line-height: 24px;margin-bottom: 5px;display:block; font-size: 24px">
          MODULE COVERED</h2>
        <strong style="color:#5b5b5b; font-size: 18px; font-weight:bold;display: inline-block;line-height: 1.2">Internal Control And Compliance</strong>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
  </table>
  <img style="margin-top: -4rem; margin-bottom: -1rem" width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
  </div>
</body>

</html>