Html Tables Using Jpg Images As Borders

June 25, 2024 Post a Comment

I'm trying to create a 'certificate' for use in an email capmaign. We are trying to maintain compatability with Outlook 2007 and that limits us from using the background property t

Solution 1:

You can do it by adding valign="top" and valign="bottom" to the center cells in the top and bottom for the table.

like so:

<tr><tdwidth="74"rowspan="11"><imgsrc="left_image2.jpg"width="70"height="984"align="top" /></td><tdcolspan="5"valign="top"><imgsrc="top_image3.jpg"width="461"height="171"align="left" /></td><tdwidth="87"rowspan="11" ><imgsrc="http:right_image2.jpg"border=0width="71"height="984"align="bottom" /></td></tr>
......
<trvalign="bottom">

Solution 2:

All of your middle column cells have variable heights (not fixed) and so the browser will just try to adjust them to what it thinks is best.

You need to fix their heights by using the style attribute like so:

<tdstyle="height: 171px;">

That would be for the cell containing the top image as the image has a height of 171px.

Also: Do you need 9 rows in the center? Or did you try that to position the borders?

Edit: Or what Re0sless said. ;D

Solution 3:

... there are couple of ways to fix it, one (if it will work in outlook and display in all other mail agents) would be to position the top and bottom border images absolutely in the cells.

Second, I'd restructure the table maybe. Make the top and bottom borders span all the columns, as if they were capping the table from top and bottom and take it from there.

Solution 4:

My suggestions:

Set the image widths to the proper values (top and bottom are 459px wide).
Set the table width to the total value (459 + 71 + 71 = 600).
Create a separate row for the bottom image, and put all of your content in one table cell. You can nest more tables inside if you need to.

<tablewidth="600"height="984"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="74"rowspan="3"><imgsrc="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg"alt="Left Image"width="70"height="984"align="top" /></td><td><imgsrc="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg"alt="Top Image"width="459"height="171"align="left" /></td><tdwidth="71"rowspan="3"><imgsrc="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg"border=0alt="Right Image"width="71"height="984"align="bottom" /></td></tr><tr><td>Put all your content in here.</td></tr><tr><tdvalign="bottom"><imgsrc="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg"alt="Bottom Image"width="459"height="63"align="top" /></td></tr></table>

Solution 5:

Set the top middle cell to vertical align top: .... top_image3.jpg ....

2. Cut a new image to use for the bottom which includes the left, middle, and right columns of the entire table and throw it in a cell with a colspan="7"

Html5 Manual