Using an `<iframe>` inside a `<table>` breaks the pages HTML

[BryceRussell]

What version of astro are you using?

2.0.9

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

If an <iframe> is placed inside a <table> then the HTML breaks on the page, for example

<table border='1'>
    <tr>
        <th>TH element</th>
        <td>TD element</td>
    </tr>
    <tr>
        <th>TH element</th>
        <td>
            <iframe src='https://docs.astro.build/en/getting-started/'></iframe>
        </td>
    </tr>
    <tr>
        <th>TH element</th>
        <td>TD element</td>
    </tr>
</table>

Build Output:

<table border="1">
            <tr>
                <th>TH element</th>
                <td>TD element</td>
            </tr>
            <tr>
                <th>TH element</th>
                <td>
                    <iframe src="https://docs.astro.build/en/getting-started/"></iframe>
                </td>
            </tr>
			
                TH element
                TD element
            
        
        
        </table>

I thought this might have something to do with not having a <tbody> so I added that to the example but then the build never progressed farther than [build] Building static entrypoints...

Open the /dist/index.html file in the minimal reproduction to get a better look at the broken HTML and try the frozen build command

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jiw7an-sfczaf?file=src/pages/index.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[matthewp]

Don't th all go in the thead section? You might run this example through a standards compliant HTML parser and see what it produces.

[BryceRussell]

<th> elements require a <tr> parent and <tr> elements can be used inside <thead>, <tbody>, <tfoot>, or directly inside <table>, so the table above should be a valid table. The <th> page on MDN has an example that looks just like it

The table renders correctly if:

1. The <iframe> line is commented out
2. I use it as a string with <Fragment set:html={} />
3. I paste it into a browser using dev tools
4. I use an online HTML viewer like:
   • The code example/demo box on MDN
   • https://html.onlineviewer.net/
   • https://codebeautify.org/htmlviewer
   • https://htmlvieweronline.com/

Also W3 HTML Validator says the that table is valid

Another thing I tried was wrapping the <tr> elements in a <tbody> but this made astro build freeze at the [build] Building static entrypoints... step

So it seems like this only breaks inside Astro when using a <iframe> inside <table>

[matthewp]

Ok great, thanks. Going to move this to compiler repo as they issue is there.