Force page break after so many lines? - html

we're using Coldfusion and SQL and are trying to make a page with a query with only one tablr with one row and need it to force a page break after so many rows. We could also have it force a page break after 8x11 page is filled. I'm using a header and it will never show the header on page 2 sense it can't figure out where the page break is. Any help would be great.
Thanks
<head>
<script>
thead {
position: sticky;
top: 0px;
}
</script>
</head>
<thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<td bgcolor="#EDE9C6" width="5px">
<div align="center"><nobr><font size="-2">fmt</font></div>
</td>
<td style="overflow:hidden;" bgcolor="#EDE9C6" width="23px">
<div align="center"><strong><font size="-2"> <nobr> category </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><nobr><font size="-2"> SKU </font></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><strong><nobr><font size="-2"> artist </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><nobr> <font size="-2"> title </font></div>
</td>
<td bgcolor="EDE9C6" width="5px">
<div align="center"><strong><nobr><font size="-2"><strong>qs </strong></font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">fa </font></div></td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><strong><font size="-2"><strong>ts </strong> </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">wtd </font></div>
</td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><strong><font size="-2">mtd </font></strong></div></td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><font size="-2">ytd </font></div></td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><font size="-2"><strong>price</strong></font>
</div></td>
<td bgcolor="EDE9C6" width="15px">
<div align="center"><font size="-2">check</font>
</div></td>
</table></thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<tbody>
<cfoutput query="myquery">
<tr>
<td bgcolor="ffffff" width="5px">
<div align="center"><nobr><font size="-2">#fmt#</font></div>
</td>
<td style="overflow:hidden;" bgcolor="ffffff" width="50px">
<div align="center"><strong><nobr><font size="-2">#Left(catdesc,20)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="20px">
<div align="center"><nobr><font size="-2">#fsku#</font></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><strong><nobr><font size="-2">#Left(artist,25)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><nobr><em><font size="-2">#Left(title,25)#</font> </em></div>
</td>
<td bgcolor="ffffff" width="8px">
<div align="center"><strong><nobr><font size="-2">#fUpStkQty#</font> </strong></div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2"><cfif #Fas# is not "">X<cfelseif #Fas# is ""> </cfif></font></div></td>
<td bgcolor="ffffff" width="12px">
<div align="center"><strong><font size="-2">#fStockQty#</font></strong> </div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2">#fNSWTD1#</font></div>
</td>
<td bgcolor="ffffff" width="12px"><div align="center"><strong><font size="-2">#fNSMTD1#</font></strong></div></td>
<td bgcolor="ffffff" width="12px"><div align="center"><font size="-2">#fNSYTD1#</font></div></td>
<td bgcolor="ffffff" width="20px">
<div align="center"><strong><font size="-2">$#fcost#</font></strong>
</div></td>
<td bgcolor="ffffff" width="15px">
<div align="center"><font size="-2"> </font>
</div></td>
</cfoutput></tbody>
</table>

Related

improve html to improve performance of itextsharp

i´m converting HTML to PDF with itextsharp, i have improved the the code in itextsharp side, following this thread iTextSharp XMLWorker parsing really slow
but now i need to improve in html too. My goal is reach a time lowest than 0,1 seconds, i'm getting now 0,4 seconds
I don't know what are the rules in html side for a fatest rendering in itextsharp. In my HTML template basically i have style inline html and all is done with tables, here i let you the code
<html>
<head>
<title>DOCUMENT</title>
</head>
<body>
<!-- 2 -->
<table width="100%" cellspacing="0px" cellpadding="0px">
<tr>
<!-- DETALLE DE LECTURA/CONSUMO OK-->
<td width="60%" style="padding-right:5px" valign="top">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">DETALLE DE LECTURA/CONSUMO</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;text-align:center" cellspacing="0px" cellpadding="0px" border="0">
<tr>
<td>Consumo Últimos 13 Meses (KWHs)</td>
</tr>
<tr>
<td width="100%">
<!-- GRAFICO DE CONSUMO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<!--BARRAS-->
<tr>
<td width="100%">
<table width="100%" style="" cellspacing="0" cellpadding="0" align="left">
<tr style="font-size:5pt;height:130px;">
<!-- -->
<td style="font-size:5pt;width:4%"></td>
<!-- MES 1 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-1]</p>
<div style="width:100%; height:[valor-grafico-1-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 2 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-2]</p>
<div style="width:100%; height:[valor-grafico-2-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 3 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-3]</p>
<div style="width:100%; height:[valor-grafico-3-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 4 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-4]</p>
<div style="width:100%; height:[valor-grafico-4-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 5 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-5]</p>
<div style="width:100%; height:[valor-grafico-5-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 6 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-6]</p>
<div style="width:100%; height:[valor-grafico-6-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 7 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-7]</p>
<div style="width:100%; height:[valor-grafico-7-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 8 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-8]</p>
<div style="width:100%; height:[valor-grafico-8-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 9 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-9]</p>
<div style="width:100%; height:[valor-grafico-9-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 10 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-10]</p>
<div style="width:100%; height:[valor-grafico-10-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 11 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-11]</p>
<div style="width:100%; height:[valor-grafico-11-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 12 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-12]</p>
<div style="width:100%; height:[valor-grafico-12-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 13 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-13]</p>
<div style="width:100%; height:[valor-grafico-13-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:4%"></td>
</tr>
</table>
</td>
</tr>
<!-- EJE -->
<tr style="background-color:black; padding: 0; height: 1px">
<td colspan="26" nowrap="" >
<div></div>
</td>
</tr>
<!-- MESES -->
<tr>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:5pt;" width="4%"></td>
<td style="font-size:5pt;" width="5%">[mes-1]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-2]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-3]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-4]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-5]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-6]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-7]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-8]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-9]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-10]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-11]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-12]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-13]</td>
<td style="font-size:5pt;" width="4%"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" style="font-size:8pt;">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%">Datos consumo desde: [fecha-inicio-consumo]</td>
<td width="50%">hasta: [fecha-hasta-consumo]</td>
</tr>
<tr>
<td colspan="2" >
<table width="100%" style="font-size:10pt;text-align:center;" cellspacing="0px" cellpadding="0px">
<tr>
<th>Medidores</th>
<th>Lectura Actual</th>
<th>Lectura Anterior</th>
<th>Diferencia</th>
<th>Constante</th>
<th>KWH</th>
</tr>
<tr>
<td>[medidor-1]</td>
<td>[lectura-actual-1]</td>
<td>[lectura-anterior-1]</td>
<td>[diferencia-1]</td>
<td>[constante-1]</td>
<td>[kwh-1]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:5px" colspan="2">
<table width="100%" style="font-size:8pt;text-align:right" cellspacing="0px" cellpadding="0px">
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia(KWH/mensual)</td>
<td width="20%" style="font-size:10pt;">[consumo-energia]</td>
</tr>
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia Invierno(KWH/mensual)</td>
<td width="20%" ="font-size:10pt;">[consumo-energia-invierno]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída (KW)</td>
<td>[potencia-contratada]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída Horas de Punta(KW)</td>
<td>[potencia-hora-punta]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="40%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td align="center">
<img width="180px" src="http://localhost/FE.images/SEC.jpg" alt="sec"/>
</td>
</tr>
<tr>
<td>
<!-- ACUSE DE RECIBO -->
<table width="100%" style="font-size:8pt;">
<tr>
<td width="40%">Recinto:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Nombre:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Fecha:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>RUT:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td colspan="2" style="border-bottom:1px solid black;">
<br/>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">FIRMA</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 3 -->
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="65%">
<table width="100%" style="padding-right:5px; font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">
DETALLE DE LA CUENTA FACTURACION
</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;line-height:9pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="70%" style="font-size:10pt;" >Cargo fijo mensual</td>
<td width="30%" style="text-align:right;font-size:10pt;">$[cargo-fijo-mensual]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo único del sistema troncal ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-unico]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía base ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-base]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía adicional de invierno ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-invierno]</td>
</tr>
<tr>
<td style="border-top:1px solid black;font-size:10pt;" width="70%">Reliquidaciones</td>
<td style="border-top:1px solid black;text-align:right;font-size:10pt;" width="30%">$[reliquidaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">Calibracion de medidor</td>
<td style="text-align:right;font-size:10pt;">$[calibracion-medidor]</td>
</tr>
<tr>
<td style="font-size:10pt;">Interés por mora</td>
<td style="text-align:right;font-size:10pt;">$[interes-mora]</td>
</tr>
<tr>
<td style="font-size:10pt;">Compensaciones</td>
<td style="text-align:right;font-size:10pt;">$[compensaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-1]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-2]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-3]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-4]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-5]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-6]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-7]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-8]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-9]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-10]</td>
</tr>
<tr>
<td width="70%" style="border-top:1px solid black;padding-top:5px;font-size:10pt;">Total:</td>
<td width="30%" style="border-top:1px solid black;padding-top:5px;text-align:right;font-size:10pt;">$[total-pagar]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- TOTALES -->
<td width="35%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" align="left">
<table width="95%" style="font-size:8pt;border:2px solid black;" cellspacing="0px" cellpadding="0px">
<tr>
<th style="border-bottom:1px solid black;">DETALLE DE ABONOS</th>
</tr>
<tr>
<td>Total Abonados:</td>
<td></td>
</tr>
<tr>
<td>Fecha Abono:</td>
<td></td>
</tr>
<tr>
<td>Comprobante Caja №:</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" style="font-size:10pt;">Fecha vencimiento:</td>
<td width="50%" style="font-size:10pt;">[fecha-vencimiento]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Fecha de corte de suministro:</td>
<td width="50%" style="font-size:10pt;">[fecha-corte]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Último pago realizado:</td>
<td width="50%" style="font-size:10pt;">[fecha-ultimo-pago]</td>
</tr>
<tr>
<table width="100%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" >TOTAL:</td>
<td width="50%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;";>[total-pagar]</td>
</tr>
</table>
</tr>
<tr>
<td align="center">
<img width="280px" src="#" alt="timbre"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

I don't know if this has been addressed in the most recent version but as of 5.5.5 there was an issue in regards to the ImageProvider. If you don't explicitly set an ImageProvider iTextSharp will internally throw an exception, catch it and create an ImageProvider on your behalf. Unfortunately this can happen dozens or hundreds of times depending on how much HTML your are processing.
The quick fix is to just explicitly set your own ImageProvider. This can be just a simple so called "blank image provider" as shown here or you could make a more complex one.
Here's a VB.Net version:
Public Class BlankImageProvider
Implements IImageProvider
Public Function GetImageRootPath() As String Implements IImageProvider.GetImageRootPath
Return ""
End Function
Public Sub Reset() Implements IImageProvider.Reset
End Sub
Public Function Retrieve(src As String) As iTextSharp.text.Image Implements IImageProvider.Retrieve
Return Nothing
End Function
Public Sub Store(src As String, img As iTextSharp.text.Image) Implements IImageProvider.Store
End Sub
End Class
To use it you just need to bind it to your HtmlPipelineContext object using the SetImageProvider method:
htmlContext.SetImageProvider(New BlankImageProvider())
Also, I don't know if this factors in but your HTML is technically not accurate in several places. For instance, you are using px in your HTML attributes but in reality you can only use numbers or numbers with a percent sign. For instance, cellpadding="0px" is invalid and should be cellpadding="0". You also have at least one <table> tag that is directly a child of a <tr> but instead there should be an intermediary <td> or <th> tag. These things may or may not affect iTextSharp's speed but it might make things more future-proof to fix.

in Html table the word not wrapped in firefox alone

In html table,the text is automatically wrapped in IE and chrome. But Firefox it's taking more space and then wrapped.. What was the issue in firefox...Any idea..?. Please find the table below.. Column 1 has bigger text which wrapped and occupies less width in IE & chrome..The same occupies more width in firrefox
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th valign="top" align="center" colspan="5">
Header Col
</th>
</tr>
<tr>
<th valign="top" align="center" cell="1" id="c0">
Col1
</th>
<th valign="top" align="center" cell="2" id="c1">
col2
</th>
<th valign="top" align="center" cell="3" id="c2">
col3
</th>
<th valign="top" align="center" cell="4" id="c3">
col4
</th>
<th valign="top" align="center" cell="5" id="c4">
col5
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" align="left" cell="1">
<table cellspacing="0" cellpadding="0" border="0" class="deffont" style="width: 100%">
<tbody>
<tr>
<td width="15" valign="top" align="left" style="padding-bottom: 0px; margin: 0px;
padding-left: 0px; padding-right: 0px; height: 100%; padding-top: 0px">
</td>
<td valign="top" align="left">
<div>
<div>
<b><a></a><b>H-(D)p-ganeshgkdagkalyal-(D)seryl-(D)tryptophanyl-(D)seryl-(D)haninsdj-(D)cyclohexylalanyl-(D)arginyl-(D)arginyl-(D)arginyl-(D)glutaminyl-(D)arginyl-(D)arginine
acetate salt</b><br>
<br>
</b>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" align="left" cell="2">
<div>
<div>
<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="3">
<div>
<div>
For test in combination with test and test for the test of test with test.<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="4">
<div>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="deffont">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<b></b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="5">
<div>
<div>
DD: 12/22/11 <br>
</div>
</div>
</td>
</tr>
</tbody>
</table>

Add this style to your TD : style="display: inline-block;word-break: break-all;"
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th valign="top" align="center" colspan="5">
Header Col
</th>
</tr>
<tr>
<th valign="top" align="center" cell="1" id="c0">
Col1
</th>
<th valign="top" align="center" cell="2" id="c1">
col2
</th>
<th valign="top" align="center" cell="3" id="c2">
col3
</th>
<th valign="top" align="center" cell="4" id="c3">
col4
</th>
<th valign="top" align="center" cell="5" id="c4">
col5
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" align="left" cell="1">
<table cellspacing="0" cellpadding="0" border="0" class="deffont" style="width: 100%">
<tbody>
<tr>
<td width="15" valign="top" align="left" style="padding-bottom: 0px; margin: 0px;
padding-left: 0px; padding-right: 0px; height: 100%; padding-top: 0px">
</td>
<td valign="top" align="left" style="display: inline-block;word-break: break-all;">
<div>
<div>
<b><a></a><b>H-(D)p-ganeshgkdagkalyal-(D)seryl-(D)tryptophanyl-(D)seryl-(D)haninsdj-(D)cyclohexylalanyl-(D)arginyl-(D)arginyl-(D)arginyl-(D)glutaminyl-(D)arginyl-(D)arginine
acetate salt</b><br>
<br>
</b>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" align="left" cell="2">
<div>
<div>
<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="3">
<div>
<div>
For test in combination with test and test for the test of test with test.<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="4">
<div>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="deffont">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<b></b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="5">
<div>
<div>
DD: 12/22/11 <br>
</div>
</div>
</td>
</tr>
</tbody>
</table>

chrome different than Internet explorer

I looked for a similar question but no solutions.
I have a webpage with a table and a Youtube movie at the middle: http://www.zofim.org.il/magazin_item.asp?item_id=531438084004
it looks good in Chrome, but in Internet explorer the movie is too low and not in the right place.
Here is the code:
<table background="http://www.zofim.org.il/pics/magazin/Page-1 (1).jpg" width="650" height="700" border="0" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<table border="0" width="600">
<tbody>
<tr>
<td colspan="4"><span style="font-size: 8; "> </span>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><br />
</p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "><br />
<br />
<br type="_moz" />
</span></p>
<p> </p>
</td>
</tr>
<tr>
<td height="440" width="23%" rowspan="2">
<table border="0" width="100%" height="430">
<tbody>
<tr>
<td height="131"> </td>
</tr>
<tr>
<td height="63"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="76" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td height="142" width="12%">
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p> </p>
<p> </p>
</td>
<td height="142" width="35%">
<p style="margin-top: 10px; margin-bottom: 0px; text-align: center; "><iframe width="250" height="150" src="http://www.youtube.com/embed/wnBGKeXF8X0?rel=0&controls=0&autoplay=1" frameborder="0" allowfullscreen="" name="I1" scrolling="no" marginheight="2"></iframe></p>
</td>
<td height="142" width="31%">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="285" colspan="3">
<table border="0" width="100%" height="292">
<tbody>
<tr>
<td width="135">
<table border="0" width="100%" height="280">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="104%" height="278">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="175" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td width="153">
<table border="0" width="100%" height="281">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="152" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
thanks!
Dor.

By the looks of the markup you provided you are using tables to layout your website. This is considered bad practice. You should consider changing to using best practices (divs etc) and using CSS to style your layout instead of using inline-styles. When you have done this you can use prefixr.com to create cross-browser friendly CSS.

Canvas inside table

I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?

You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.

top align in html table?

how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>

Some CSS :
table td, table td * {
vertical-align: top;
}

<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>