Jeckyl now: HTML Table in the Browser is not correct

[PeterGyger]

Hello

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

md-tabelle3.png1178×396 25.9 KB

md-tabelle1.png1034×332 6.17 KB

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.png901×286 14.7 KB

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

[fire-eggs]

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.PNG983×435 8.5 KB

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 </tr> 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.

[PeterGyger]

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;”>

[fire-eggs]

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

[PeterGyger]

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