Question 220351 in Html Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0
    1. Add border-collapse: collapse to the <table>
    <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; border-collapse: collapse;" cellpadding="10" cellspacing="10">

    1. Add padding: 0; line-height: 0; to the <td> with the image
    <td colspan="3" style="padding: 0; line-height: 0;">

    1. Remove the embedded table to remove additional spacing
    <td colspan="3" style="padding: 0; line-height: 0;">
  <img width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
</td>

    <!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; border-collapse: collapse;" 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" style="padding: 0; line-height: 0;">
        <img width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
      </td>
    </tr>


  </table>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search