Table not displaying in HTML5 Preview

[Christina]

I was attempting to make my header row have a 14 pt font, and in doing so I somehow messed it up so that now, in my HTML5 Preview, the table shows up as just a grid. In the topic itself, the table looks fine, but in the output, it's all wonky. I've included an image; the header row is too narrow, and somehow, one of the rows in the middle of the table is also narrow....thank you in advance.

[emsachs]

I suggest you look in the text editor. Take out anything about height or font-size in any of the rows in this table. I've had trouble with row height getting hard-coded in the HTML before.

You could also post the html for the table, we might be able to see if you have an error somewhere.

Is there text missing? Is that what you mean by just a grid?

I don't know how much you are using styles. (Highly recommended) If you are, you can set the font style for the table header in the stylesheet for this table style. (Click inside your table, go to Table, Edit Style). In the table style editor, you may need to drag to expand the top half of the dialog (this is a pain), and then go to the Header tab.

Or you could create a table heading paragraph style with the font formatting you want and apply it to all the paragraphs in your heading.

And if truly desperate, re-create the table.

[Christina]

Thank you for your reply. I am using a table style called WebrootBasicTable, where I have (I thought) set the font and size for the Header row. There IS text in the table but it shows only a grid in the Preview. Now, today, there is text in the Header row in the Preview.

The following is the html code for the table.

<table style="width: 100%;margin-left: 0;margin-right: auto;mc-table-style: url('Resources/TableStyles/WebrootBasicTable.css');" class="TableStyle-WebrootBasicTable" cellspacing="0">
<col style="width: 241px;" class="TableStyle-WebrootBasicTable-Column-Column1" />
<col class="TableStyle-WebrootBasicTable-Column-Column1" />
<thead>
<tr class="TableStyle-WebrootBasicTable-Head-Header1">
<th class="TableStyle-WebrootBasicTable-HeadE-Column1-Header1">SETTING</th>
<th class="TableStyle-WebrootBasicTable-HeadD-Column1-Header1">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1"><b>Enable Web Shield</b>
</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>Enable or disable the Web Shield. </p>
<p>This checkbox is selected by default, which is the setting we recommend.</p>
</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Activate browser extensions</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>


Browser extensions provide blocking protection against malicious websites, realtime anti-phishing protection, and safety ratings when using search engines. </p>
<p>Each function can be enabled or disabled separately using the individual controls for each function described below. To completely disable and remove extensions from each supported browser deselect this checkbox.</p>
<p>


</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Block malicious websites</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>Any URLs and IPs you enter in a browser are checked and a block page is presented for known malicious sites. </p>
<p>This checkbox is selected by default, which is the setting we recommend.</p>
</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Enable realtime anti-phishing</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>Protects against zero day phishing sites. Zero day phishing sites are sites that have never been seen before, and their related viruses do not yet have a definition. </p>
<p>This checkbox is selected by default, which is the setting we recommend. </p>
</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Show safety ratings when using search engines </td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>Search result are annotated with an icon and tooltip, indicating the likelihood that a site is malicious. </p>
<p>This checkbox is selected by default, which is the setting we recommend.</p>
</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Enable Web Filtering driver</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
<p>Provides additional protection against malicious connections and in cases where the browser extensions are disabled. </p>
<p>This checkbox is selected by default, which is the setting we recommend. </p>
</td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyE-Column1-Body1">Suppress the user’s ability to bypass blocked websites
(Business versions only)</td>
<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">Prevents users from bypassing the block page presented when a malicious website is detected. This checkbox is selected by default, which is the setting we recommend. </td>
</tr>
<tr class="TableStyle-WebrootBasicTable-Body-Body1">
<td style="font-weight: bold;" class="TableStyle-WebrootBasicTable-BodyB-Column1-Body1">Suppress the user’s ability to request website reviews
(Business versions only)</td>
<td class="TableStyle-WebrootBasicTable-BodyA-Column1-Body1">
<p>Prevents users from submitting website reviews from the block page when a malicious website is detected. </p>
<p>This checkbox is selected by default, which is the setting we recommend. </p>
</td>
</tr>
</tbody>
</table>

[Nita Beck]

Code: Select all

<td class="TableStyle-WebrootBasicTable-BodyD-Column1-Body1">
 <p>


Browser extensions provide blocking protection against malicious websites, realtime anti-phishing protection, and safety ratings when using search engines. </p>
 <p>Each function can be enabled or disabled separately using the individual controls for each function described below. To completely disable and remove extensions from each supported browser deselect this checkbox.</p>
 <p>


 </td>

That bit of code doesn't look right to me. You've got a <p> without a closing </p> before the closing </td>.

I also pasted all of your code into a new topic and Flare reports that the HTML is invalid. And, yep, it's pointing to that same bit of code. As soon as I supply the closing </p> tag, Flare is happy (well, as far as the code goes; I don't have your table stylesheet).

[Christina]

So why would a missing closing </p> would affect the entire table? But I built the table from scratch, and this is what I have in the previewer: ( I even applied a completely different table style)

Update: Other table styles display correctly, so maybe I dinked with the table styles too much? I've included a table made with a table style sheet that I barely updated.....so maybe that's what I need to do, is use the table style sheet that works.....

[Nita Beck]

I don't think the issue is your table stylesheet. I really think it's that malformed code, that missing closing </p>... Somehow, you hosed that bit in the code.

[SteveS]

So why would a missing closing </p> would affect the entire table? ...

Its the rules!
What happens is the XML/ HTML parser needs a closing tag for an element before it recognises the set. Of course, you could put the closing paragraph tag at the end, which the parser will probably recognise but will treat all the opening/ closing tags in-between as nested elements. Funky outpit anyone?

If I'm hand coding (no matter what language) I always create the opening and closing tags first, then indent the code between the tags. If there are styling elements in-between the tags, same process, create opening and closing tags and indent...

You have to be careful if you are playing with code, but it can be fun!

HTH