Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 3
Message 1 of 5

Jeckyl now: HTML Table in the Browser is not correct

Solved! Go to Solution.

Hello

 

On Github and in VSC (Visual Studio Code) the HTML Table locks good

md-tabelle3.pngmd-tabelle1.png

But not in den  Browsers (MS Edge, Firefox, Valdi - all newest Version). The HTML Tags are not correct displayed. Why? You can see it on the Website:

 

https://petergyger.github.io/50/

 

md-tabelle2.png

Ok - i can make a more simple HTML Code for the Table. But then the Table looks not nice.

Who has a idea, what is the Reason for that Behavior?

 

Thanks for every Idea and Help

Greetings

4 Replies
Commander Lvl 2
Message 2 of 5

Re: Jeckyl now: HTML Table in the Browser is not correct

I grabbed a copy of your .md file and tried a few variations in my own Github page area.

 

I had the best results by deleting the styling you've applied to the table columns. E.g. I took this:

<tr style="height: 21px;">
<td style="padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;">3</td>
<td style="padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;" valign="bottom"><a href="https://de.wikipedia.org/wiki/T%C3%B6ne_des_Hochchinesischen">mittel nach unten und wieder nach halb hoch</a></td>
<td style="padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;" valign="bottom">dì sān shēng</td>
<td style="padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;" valign="bottom">第三聲</td>
<td style="padding-left: 5px; padding-right: 5px; border-top: none; border-left: none; border-bottom: none; border-right: solid 0.5pt;" valign="bottom">第三声</td>
<td style="padding-left: 5px; padding-right: 5px; border: none;" valign="bottom"><p style="text-align: center;">ˇ</td></tr>

And turned it into this:

<tr>
<td>3</td>
<td><a href="https://de.wikipedia.org/wiki/T%C3%B6ne_des_Hochchinesischen">mittel nach unten und wieder nach halb hoch</a></td>
<td>dì sān shēng</td>
<td>第三聲</td>
<td>第三声</td>
<td><p>ˇ</p></td>
</tr>

And here are the results:

Capture.PNG

So I don't know what is going on, but if I compare the "looks good" source in Github, vs the source in Chrome, the Github source doesn't have all the styling.

 

I'm not sure what is going on, but this feels like a bug to me - something in the in-line styling is causing the Github Markdown server to fail to generate the </td></tr> tags correctly (they come out as &lt;/tr&gt; etc).

 

You could try using style sheets for your styling instead of the in-line styling. Or if the third row of the table above "looks OK", remove the styling altogether. Or try some other variations on the styling, to see what "works".

 

Also, I'd submit an issue to the Github team.

Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!

Solution
Copilot Lvl 3
Message 3 of 5

Re: Jeckyl now: HTML Table in the Browser is not correct

Problem solved

 

The 6. Line was a "p" Tag without the closed part. 

I delete this Part and now all is fine.

For VSC and GitHub not a Problem. They ignore this fact. 

But not for the Browsers.

 

<td style="padding-left: 5px; padding-right: 5px; border: none;" valign="bottom"><p style="text-align: center;">

 

 

Commander Lvl 2
Message 4 of 5

Re: Jeckyl now: HTML Table in the Browser is not correct

Ha! It's always something simple! Good eye!

Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!

Copilot Lvl 3
Message 5 of 5

Re: Jeckyl now: HTML Table in the Browser is not correct

You are very kind.

I'don't understand my mistake.

 

And ich have to learn more about VSC with HTML / Markdown

I'm sure, i can check the HTML Code with VSC and prevent Errors like this