Tables created programmatically don't appear in WebBrowser control

Question

I'm creating HTML dynamically in a WebBrowser control. Most elements seems to appear correctly, with the exception of a table.

My code is:

var doc = webBrowser1.Document;
var body = webBrowser1.Document.Body;
body.AppendChild(webBrowser1.Document.CreateElement("hr"));

var div = doc.CreateElement("DIV");
var table = doc.CreateElement("TABLE");
var row1 = doc.CreateElement("TR");

var cell1 = doc.CreateElement("TD");
cell1.InnerText = "Cell 1";
row1.AppendChild(cell1);

var cell2 = doc.CreateElement("TD");
cell2.InnerText = "Cell 2";
row1.AppendChild(cell2);

table.AppendChild(row1);
div.AppendChild(table);
body.AppendChild(div);

body.AppendChild(webBrowser1.Document.CreateElement("hr"));

The HTML tags are visible in the OuterHTML property of the body, but all that appears in the browser are the two horizontal rules.

If I replace

div.AppendChild(table);

with

div.InnerHtml = table.OuterHtml

then everything appears as expected.

Answer 1

Use the THEAD, TBODY and TFOOT elements

Answer 2

For table contents to be visible its tags must be inside a < tbody>

var tbody = doc.CreateElement("TBODY");

...

tbody.AppendChild(row1);
table.AppendChild(tbody);
div.AppendChild(table);