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