HtmlToPdf Constructor |
Namespace: MailBee.Pdf
Exception | Condition |
---|---|
MailBeeLicenseException | MailBee.NET PDF not licensed. |
This overload requires the license key be already set (such as with MailBee.Global.LicenseKey property, app.config, web.config, or in Windows registry).
To use international charsets or the fonts besides built-in ones, use HtmlToPdf(bool, Encoding, string, string) overload. See DefaultFont property for the list of built-in fonts.
All the samples assume LicenseKey property is set.
The first sample shows how to convert HTML invoice without CSS to .pdf file and send it via e-mail.
Please save the HTML code below as "C:\Temp\invoice543.html". It's used by the code samples.
using System; using System.IO; using System.Xml; using MailBee.Pdf; using MailBee.Mime; using MailBee.SmtpMail; using iTextSharp.text; class Sample { static void Main(string[] args) { HtmlToPdf conv = new HtmlToPdf(); conv.DefaultFontSize = 7; // Uncomment to use black-and-white colors only. //conv.UseBlackAndWhiteStyle = true; // Uncomment to use Windows fonts instead of built-in fonts (requires permissions to access Windows folder). //FontFactory.RegisterDirectory(Environment.SystemDirectory + @"\..\Fonts"); //conv.DefaultFont = FontFactory.GetFont("Arial", "windows-1252", true, (float)8, iTextSharp.text.Font.NORMAL); //conv.DefaultFont = FontFactory.GetFont("Times New Roman", "windows-1255", true, (float)8, iTextSharp.text.Font.NORMAL); // To save .pdf file use this code. conv.ConvertFile(@"C:\Temp\invoice543.html", @"C:\Temp\invoice543.pdf"); // Or uncomment to send .pdf file as message attachment. /*MemoryStream memStream = new MemoryStream(); conv.ConvertFile(@"C:\Temp\invoice543.html", memStream); MailMessage msg = new MailMessage(); msg.From = new EmailAddress("bill1@domain1.com", "Bill Goodwin"); msg.To.AddFromString("John Smith <john@host.com>"); msg.Subject = "Invoice 534"; msg.BodyPlainText = "See attached invoice"; msg.Attachments.Add(memStream, "invoice543.pdf", null, "application/pdf", null, NewAttachmentOptions.None, MailTransferEncoding.Base64); Smtp mailer = new Smtp(); mailer.SmtpServers.Add("smtp.domain1.com", "jdoe", "secret"); mailer.Message = msg; mailer.Send();*/ } }
<body> <h1>Invoice Samples</h1> <p> <strong>HTML Invoice (with shading)</strong> </p> <br /> <p> <!-- begin invoice --> <div> <table width="620" border="0" cellpadding="5" cellspacing="0"> <tbody> <tr bgcolor="#FFBF00"> <td> </td> </tr> <tr bgcolor="#FFBF00"> <td align="center" valign="middle"> <table width="600" border="0" cellpadding="3" cellspacing="2" style="color:black;"> <tbody> <tr><td colspan="5"><img src="http://www.afterlogic.com/images/logo-transparent.png" border="0"></td></tr> <tr bgcolor="#FFBF00"> <td width="300" colspan="3"> <strong>AfterLogic Inc. </strong> </td> <td width="300" colspan="2" align="right"> <strong>Invoice #543</strong> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="3"> 1234 Main St. </td> <td align="right" colspan="2"> Apr 12, 2011 </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="3"> Seattle, WA 98103 </td> <td align="right" colspan="2"> Client: John Smith </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="3"> 206-123-4567 </td> <td align="right" colspan="2"></td> </tr> <tr bgcolor="#FFBF00"> <td colspan="3"> </td> <td align="right" colspan="2"> Terms: Due On Receipt </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> <b>Project:</b> Smith Remodel </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> <b>Hours Detail:</b> (4.00 Hours) </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td width="125"> <strong>Date</strong> </td> <td width="250"> <strong>Description</strong> </td> <td width="75"> <strong>Hours</strong> </td> <td width="75"> <strong>Price</strong> </td> <td width="75" align="right"> <strong>Amount</strong> </td> </tr> <tr bgcolor="#999999" style=""> <td valign="top"> Jun 2, 2011 </td> <td valign="top"> Software project development. WebMail customization for ISP. </td> <td valign="top"> 4.00 </td> <td valign="top"> $100.00 </td> <td valign="top" align="right"> $400.00 </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> <b>Items Detail:</b> (1.00 Items) </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td width="125"> <strong>Date</strong> </td> <td width="250"> <strong>Description</strong> </td> <td width="75"> <strong>Quantity</strong> </td> <td width="75"> <strong>Price</strong> </td> <td width="75" align="right"> <strong>Amount</strong> </td> </tr> <tr bgcolor="#999999"> <td valign="top"> Oct 15, 2011 </td> <td valign="top"> 12v Halogen bulbs </td> <td valign="top"> 4.00 </td> <td valign="top"> $3.99 </td> <td valign="top" align="right"> $15.96 </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="2" width="300"> </td> <td colspan="2" width="225" align="right"> <strong>Subtotal:</strong> </td> <td width="75" align="right"> <strong>$415.96</strong> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="2" width="300"> </td> <td colspan="2" width="225" align="right"> <strong>Discount -5.00%:</strong> </td> <td width="75" align="right"> <strong>($20.80)</strong> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="4" width="525" align="right"> <strong>Total:</strong> </td> <td width="75" align="right"> <strong>$395.16</strong> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="2" width="300"> <dl> <dt> <strong>Payment Details:</strong> </dt> <dd> May 20, 2011 Check #11223 - $2000.00 </dd> </dl> </td> <td colspan="2" width="225" align="right" valign="bottom"> <strong>Total Payments:</strong> </td> <td width="75" align="right" valign="bottom"> <strong>$2000.00</strong> </td> </tr> <tr bgcolor="#FFBF00"> <td colspan="2" width="300"> Thanks for your business! </td> <td colspan="2" width="225" align="right"> <strong>Amount Due:</strong> </td> <td width="75" align="right"> <strong>$195.16</strong> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table></div> <!-- end invoice --> </p> <p> <strong>HTML Invoice (without shading)</strong> </p> <br /> <p> <!-- begin invoice --> <div> <table width="600" border="0" cellpadding="3" cellspacing="2" style="color:black;"> <tbody> <tr><td colspan="5"><img src="http://www.afterlogic.com/images/logo-transparent.png" border="0"></td></tr> <tr bgcolor="#FFFFFF"> <td width="300" colspan="3"> <strong>AfterLogic Inc. </strong> </td> <td width="300" colspan="2" align="right"> <strong>Invoice #543</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="3"> 1234 Main St. </td> <td align="right" colspan="2"> Apr 12, 2011 </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="3"> Seattle, WA 98103 </td> <td align="right" colspan="2"> Client: John Smith </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="3"> 206-123-4567 </td> <td align="right" colspan="2"></td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="3"> </td> <td align="right" colspan="2"> Terms: Due On Receipt </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> <b>Project:</b> Smith Remodel </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> <b>Hours Detail:</b> (20.00 Hours) </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="125"> <strong>Date</strong> </td> <td width="250"> <strong>Description</strong> </td> <td width="75"> <strong>Hours</strong> </td> <td width="75"> <strong>Price</strong> </td> <td width="75" align="right"> <strong>Amount</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td valign="top"> Jun 2, 2011 </td> <td valign="top"> Software project development. WebMail customization for ISP. </td> <td valign="top"> 4.00 </td> <td valign="top"> $100.00 </td> <td valign="top" align="right"> $400.00 </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> <b>Items Detail:</b> (1.00 Items) </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="125"> <strong>Date</strong> </td> <td width="250"> <strong>Description</strong> </td> <td width="75"> <strong>Quantity</strong> </td> <td width="75"> <strong>Price</strong> </td> <td width="75" align="right"> <strong>Amount</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td valign="top"> Oct 15, 2011 </td> <td valign="top"> 12v Halogen bulbs </td> <td valign="top"> 4.00 </td> <td valign="top"> $3.99 </td> <td valign="top" align="right"> $15.96 </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="5"> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="2" width="300"> </td> <td colspan="2" width="225" align="right"> <strong>Subtotal:</strong> </td> <td width="75" align="right"> <strong>$415.96</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="2" width="300"> </td> <td colspan="2" width="225" align="right"> <strong>Discount -5.00%:</strong> </td> <td width="75" align="right"> <strong>($20.80)</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="4" width="525" align="right"> <strong>Total:</strong> </td> <td width="75" align="right"> <strong>$395.16</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="2" width="300"> <dl> <dt> <strong>Payment Details:</strong> </dt> <dd> May 20, 2011 Check #11223 - $2000.00 </dd> </dl> </td> <td colspan="2" width="225" align="right" valign="bottom"> <strong>Total Payments:</strong> </td> <td width="75" align="right" valign="bottom"> <strong>$2000.00</strong> </td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="2" width="300"> Thanks for your business! </td> <td colspan="2" width="225" align="right"> <strong>Amount Due:</strong> </td> <td width="75" align="right"> <strong>$195.16</strong> </td> </tr> </tbody> </table></div> <!-- end invoice --> </p> </body>
using System; using System.IO; using System.Xml; using System.Drawing; using MailBee.Pdf; using MailBee.Mime; using MailBee.SmtpMail; using iTextSharp.text; using iTextSharp.text.pdf; class Program { static IElement ProcessDelegate(XmlNode xmlNode, IElement pdfChunk) { if (pdfChunk is PdfPCell) { ((PdfPCell)pdfChunk).BorderColor = iTextSharp.text.Color.WHITE; ((PdfPCell)pdfChunk).BorderWidth = 2; ((PdfPCell)pdfChunk).VerticalAlignment = Element.ALIGN_MIDDLE; ((PdfPCell)pdfChunk).HorizontalAlignment = Element.ALIGN_CENTER; if (xmlNode.Attributes["rowspan"] != null && xmlNode.Attributes["rowspan"].Value == "2") { ((PdfPCell)pdfChunk).VerticalAlignment = Element.ALIGN_TOP; ((PdfPCell)pdfChunk).BackgroundColor = new iTextSharp.text.Color(0xF2F3EF); } if (xmlNode.Name == "th") { ((PdfPCell)pdfChunk).BackgroundColor = new iTextSharp.text.Color(0xF2F3EF); } else { ((PdfPCell)pdfChunk).FixedHeight = 15f; if (xmlNode.Attributes["colspan"] != null && xmlNode.Attributes["colspan"].Value == "17") { ((PdfPCell)pdfChunk).BackgroundColor = iTextSharp.text.Color.WHITE; ((PdfPCell)pdfChunk).HorizontalAlignment = Element.ALIGN_LEFT; } else if (xmlNode.Attributes["class"] != null && xmlNode.Attributes["class"].Value == "comp test") { ((PdfPCell)pdfChunk).BackgroundColor = new iTextSharp.text.Color(0xBBBBBB); } else if (xmlNode.InnerText == "No") { ((PdfPCell)pdfChunk).BackgroundColor = new iTextSharp.text.Color(0xCB000F); } else if (xmlNode.InnerText == "Yes") { ((PdfPCell)pdfChunk).BackgroundColor = new iTextSharp.text.Color(0x00882D); } else if (xmlNode.InnerText.StartsWith("Incom")) { ((PdfPCell)pdfChunk).BorderWidthLeft = 1; ((PdfPCell)pdfChunk).BorderWidthRight = 2; ((PdfPCell)pdfChunk).BorderWidthTop = 1; ((PdfPCell)pdfChunk).BorderWidthBottom = 2; ((PdfPCell)pdfChunk).BorderColorLeft = new iTextSharp.text.Color(0x00882D); ((PdfPCell)pdfChunk).BorderColorRight = new iTextSharp.text.Color(0x00882D); ((PdfPCell)pdfChunk).BorderColorTop = new iTextSharp.text.Color(0x00882D); ((PdfPCell)pdfChunk).BorderColorBottom = new iTextSharp.text.Color(0x00882D); } else if (xmlNode.InnerText.StartsWith("Incor")) { ((PdfPCell)pdfChunk).BorderWidthLeft = 1; ((PdfPCell)pdfChunk).BorderWidthRight = 2; ((PdfPCell)pdfChunk).BorderWidthTop = 1; ((PdfPCell)pdfChunk).BorderWidthBottom = 2; ((PdfPCell)pdfChunk).BorderColorLeft = new iTextSharp.text.Color(0xCB000F); ((PdfPCell)pdfChunk).BorderColorRight = new iTextSharp.text.Color(0xCB000F); ((PdfPCell)pdfChunk).BorderColorTop = new iTextSharp.text.Color(0xCB000F); ((PdfPCell)pdfChunk).BorderColorBottom = new iTextSharp.text.Color(0xCB000F); } } } else if (pdfChunk is PdfPTable) { ((PdfPTable)pdfChunk).SetWidthPercentage(new float[] { 40, 20, 20, 20, 20, 20, 20, 20, 20, 20, 30, 30, 30, 30, 30, 30, 30, 50}, PageSize.A4); } else if (pdfChunk is Anchor) { ((Anchor)pdfChunk).Font.Color = iTextSharp.text.Color.BLUE; ((Anchor)pdfChunk).Font.SetStyle(iTextSharp.text.Font.BOLD | iTextSharp.text.Font.UNDERLINE); } return pdfChunk; } static void Main(string[] args) { HtmlToPdf conv = new HtmlToPdf(); conv.OnConvertXmlNodeToPdf = new ConvertXmlNodeToPdfDelegate(ProcessDelegate); FontFactory.RegisterDirectory(Environment.SystemDirectory + @"\..\Fonts"); conv.DefaultFont = FontFactory.GetFont("Arial", "windows-1252", true, 5, iTextSharp.text.Font.NORMAL); // Uncomment to change page size from default A4 format. //conv.PageRectangle = PageSize.A3; //conv.PageRectangle = new iTextSharp.text.Rectangle(500, 400); // Save .pdf file to disk. conv.ConvertFile(@"C:\Temp\table1.html", @"C:\Temp\table1.pdf"); // To send .pdf file as message attachment uncomment the following block of code. /*MemoryStream memStream = new MemoryStream(); conv.ConvertFile(@"C:\Temp\table1.html", memStream); MailMessage msg = new MailMessage(); msg.From = new EmailAddress("bill1@domain1.com", "Bill Goodwin"); msg.To.AddFromString("John Smith <john@host.com>"); msg.Subject = "Comparison table 1"; msg.BodyPlainText = "See attached table"; memStream.Position = 0; msg.Attachments.Add(memStream, "table1.pdf", null, "application/pdf", null, NewAttachmentOptions.None, MailTransferEncoding.Base64); Smtp mailer = new Smtp(); mailer.SmtpServers.Add("smtp.domain1.com", "jdoe", "secret"); mailer.Message = msg; mailer.Send();*/ } }
<style> /* COMPATIBILITY TABLES */ table.compatibility { margin-left: -233px; margin-right: -30em; line-height: 140%; border-bottom: 1px dotted #9198C1; border-spacing: 0.5em; position: relative; /* for IE6; if this declaration isn't there the links in the leftmost tds are unclickable */ } table.compatibility caption { border-top: 1px dotted #9198C1; padding: 10px 0; text-align: left; } table.compatibility caption select { width: 221px; margin-left: 5px; margin-right: 7px; border: 1px dotted #9198C1; } tr { width: 100%; } table.compatibility ul,table.compatibility ol { border: none; margin-bottom: 0; } table.compatibility td { vertical-align: top; } col { width: 2em; } col[span="5"] { width: 2.5em; } col[span="4"] { width: 3em; } col[span="3"] { width: 4em; } col[span="2"] { width: 6em; } col[span="1"] { width: 12em; } tr.compheader { background-color: #F2F3EF; } tr.compheader th { font-weight: normal; font-size: 80%; color: #666666; border-top: 1px solid #666666; } tr.compheader th:first-child { text-align: right; padding: 1em; } tr.compheader th[colspan] { text-align: center; } tr.compheader:last-child th { border: none; } td.header { background-color: #F2F3EF; padding: 0.3em; } td.header h3,td.header h4 { margin-top: 0.5em; text-align: center; } td.declaration { background-color: #F2F3EF; text-align: right; padding-right: 10px; color: #666666; width: 209px; } td.declaration a { text-decoration: none; } div.name { width: 209px; font-weight: bold; margin-bottom: 1em; margin-top: 1em; } td.comp { font-family: verdana,sans-serif; font-size: 95%; text-transform: lowercase; text-align: center; height: 3em; vertical-align: middle !important; } table.keepCaps td.comp { text-transform: none; } td.yes { background-color: #00882D; color: #ffffff; } td.almost { background-color: #40A662; color: #ffffff; } td.incomplete { color: #00882D; border: 1px solid #00882D; } td.alternative { color: #666666; border: 1px solid #666666; } td.untestable { color: #006699; } td.minimal { color: #CB000F; } td.incorrect { color: #CB000F; border: 1px solid #CB000F; } td.toomany { /* for events comp table */ background-color: #CCE7D5; } td.buggy { background-color: #DA4C57; color: #ffffff; } td.severebug { background-color: #82000A; color: #ffffff; } td.no { background-color: #CB000F; color: #ffffff; } td.crash { background-color: #535353; font-weight: bold; text-transform: uppercase; color: #ffffff; } td.test { background-color: #bbbbbb; color: #ffffff; } b.warning { display: block; color: #F2F3EF; padding: 0.5em; margin-right: -10px; margin-top: 0.5em; background-color: #999999; } td pre { padding: 0; } td pre + p { margin-top: 2px; } td th,td td { padding: 1px !important; vertical-align: top; color: #666666; } td th { text-align: left !important; width: 8em; } </style> <body> <table class="compatibility wide" cellspacing="5"> <col /> <col span="5" class="IE" /> <col span="4" class="FF" /> <col span="2" class="Saf" /> <col span="2" class="Chrome" /> <col span="3" class="Op" /> <col span="1" class="Rest" /> <tr class="compheader"> <th>Selector</th> <th>IE 5.5</th> <th>IE 6</th> <th>IE 7</th> <th>IE8</th> <th>IE9 pr3</th> <th>FF 3.0</th> <th>FF 3.5</th> <th>FF 3.6</th> <th>FF 4b1</th> <th>Saf 4.0 Win</th> <th>Saf 5.0 Win</th> <th>Chrome 4</th> <th>Chrome 5</th> <th>Opera 10.10</th> <th>Opera 10.53</th> <th>Opera 10.60</th> <th>Konqueror 4.x</th> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#block" class="page">block</a></div> </td> <td class="comp yes" colspan="5">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"> </td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#inline" class="page">inline</a></div> </td> <td class="comp yes" colspan="5">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"> </td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#none" class="page">none</a></div--> </td> <td class="comp yes" colspan="5">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"> </td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#inlineblock" class="page">inline-block</a></div> </td> <td class="comp no">No</td> <td class="comp incomplete" colspan="2">Incom<wbr />plete</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"><ul> <li>IE 6/7 accepts the value only on elements with a natural <code>display: inline</code>.</li> </ul> </td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#listitem" class="page">list-item</a></div> </td> <td class="comp no">No</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"></td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#runin" class="page">run-in</a></div> </td> <td class="comp no" colspan="3">No</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp no" colspan="4">No</td> <td class="comp incorrect" colspan="1">Incor<wbr>rect</td> <td class="comp yes" colspan="1">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"> <ul> <li>Safari, Chrome and Konqueror also support run-in when it occurs before an element with display: inline. This should not happen.</li> </ul> </td> </tr> <tr> <td class="declaration" rowspan="2"> <div class="name"><a href="#table" class="page">table</a></div> </td> <td class="comp no" colspan="3">No</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="4">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="2">Yes</td> <td class="comp yes" colspan="3">Yes</td> <td class="comp test">To be tested</td> </tr> <tr> <td colspan="17"><p>Safari 3 and Chrome 1 require elements with <code>display: table</code> and <code>display: table-row</code> to show the cells correctly. The other browsers, including Safari 4 and Chrome 2, don't.</p></td> </tr> <tr class="compheader"> <th>Selector</th> <th>IE 5.5</th> <th>IE 6</th> <th>IE 7</th> <th>IE8</th> <th>IE9 pr3</th> <th>FF 3.0</th> <th>FF 3.5</th> <th>FF 3.6</th> <th>FF 4b1</th> <th>Saf 4.0 Win</th> <th>Saf 5.0 Win</th> <th>Chrome 4</th> <th>Chrome 5</th> <th>Opera 10.10</th> <th>Opera 10.53</th> <th>Opera 10.60</th> <th>Konqueror 4.x</th> </tr> </table> </body>