-5

I want to modify https://stackoverflow.com/revisions/56857772/2#:~:text=http%3A%2F%2F%20www.%20example,user%20%40%20example.com

  1. Source

    The following **bold** parts of URLs *may* be case-sensitive, depending on the site and/or server configuration.

    http:// **www.** example.com **/abc/def.ghi?jkl=mno#pqr**


    **user** @ example.com

  2. Preview

    The following bold parts of URLs may be case-sensitive, depending on the site and/or server configuration.

        http:// www. example.com /abc/def.ghi?jkl=mno#pqr

        user @ example.com

so that the examples are formatted correctly. To do so, I intend to <code>-ify the content using HTML, and place the examples in a table for quick comparison.

However,

  1. Source

    <table>
    <tbody>
        <tr>
            <th><b>URI</b></th>
            <th><code>http://<b>www.</b>example.com<b>/abc/def.ghi?jkl=mno#pqr</b></code></th>
        </tr>
        <tr>
            <td><b>E-mail Address</b></td>
            <td><code><b>user</b>@example.com</code></td>
        </tr>
    </tbody>
</table>

  2. Preview

    URI http://www.example.com/abc/def.ghi?jkl=mno#pqr E-mail Address user@example.com

renders both rows as a single column. This renders the table useless. However, even if I were to persue this by changing the table so that it renders in a legible manner:

  1. Source

    <table>
    <tbody>
        <tr>
            <th><p><b>URI</b></p></th>
            <th><p><code>http://<b>www.</b>example.com<b>/abc/def.ghi?jkl=mno#pqr</b></code></p></th>
        </tr>
        <tr>
            <td><p><b>E-mail Address</b></p></td>
            <td><p><code><b>user</b>@example.com</code></p></td>
        </tr>
    </tbody>
</table>

  2. Preview

    URI

    http://www.example.com/abc/def.ghi?jkl=mno#pqr

    E-mail Address

    user@example.com

Compacting and/or deindenting the HTML does nothing.

Additionally, the mere presence of the table this causes:

Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.

to appear, which I cannot override lest I merely see

Your edit couldn't be submitted. Please see the error above.

Is HTML table support completely broken, or is SE's support for it markedly different to GitHub, GitLab, and VSCode's implementations somehow?

VSCode

Improve this question
4
  • 9
    We do have table support but it doesn't work with HTML tags - most of those are indeed stripped out of the post.
    – Glorfindel Mod
    Commented Apr 11 at 14:38
  • @Glorfindel, without HTML table support, it appears then that vertical headings aren't possible like stackoverflow.com/a/41447072/9731176 describes.
    – RokeJulianLockhart
    Commented Apr 11 at 14:42
  • 2
    The fact you don't know how to use something does NOT make it "unusable".
    – Shadow Wizard
    Commented Apr 11 at 19:47
  • 1
    You shouldn't be using a table for this, anyway: you're after a definition list. Coincidentally, definition lists are allowed on Stack Exchange (though their CSS could use some love: see the relevant feature request).
    – wizzwizz4
    Commented Apr 12 at 0:50

1 Answer 1

Reset to default
10

You can't use the <table>, <thead>, <tbody>, <tr>, <th> or <td> tags. Those are simply not allowed. See What HTML tags are allowed on Stack Exchange sites?

You can use CommonMark table markdown:

To get your table:

Type Example
URI http://www.example.com/abc/def.ghi?jkl=mno#pqr
E-mail Address user@example.com

Use this Markdown:

| **Type**           | **Example**                                                               |
|--------------------|---------------------------------------------------------------------------|
| **URI**            | <code>http://<b>www.</b>example.com<b>/abc/def.ghi?jkl=mno#pqr</b></code> |
| **E-mail Address** | <code><b>user</b>@example.com</code>                                      |
Improve this answer
4
  • To achieve the look of what the OP is wanting, it would probably be better to have a header line that's blank, leaving both lines as non-header rows (or, better, use headers that are descriptive of the columns). In addition, while this does demonstrate bold format within code, the formatting used by SE for inline code makes bold formatting a very low contrast difference to non-bold text. It would be better to either not use code formatting or use a code block (i.e., <pre><code>code block</code></pre>), which uses a much lighter background color against which bold is much more visible.
    – Makyen
    Commented Apr 11 at 16:32
  • That's not a solution. I think you need to look at your example again: that first row is a heading row, so it's not suitable for what I want lest I fill it. Were I not to want to fill it, I would need to use *<!-- -->* | *<!-- -->*, which is a hacky solution at best. I've submitted an edit.
    – RokeJulianLockhart
    Commented Apr 11 at 17:34
  • 2
    @RokeJulianLockhart There's no need for using <!-- --> to provide non-fill for a blank header row. A blank header row is possible just with using a space for separation (e.g., just | | | in this case for two columns). I agree that it's better with the headers you edited into this answer than it would be without any header contents. While you might not consider what's described here "a solution", it is what's available on SE that gets close to what you are wanting while using an actual <table> element in the page. An alternate way to present that information would be to use a list.
    – Makyen
    Commented Apr 11 at 18:16
  • Thanks, @Makyen.
    – RokeJulianLockhart
    Commented Apr 12 at 11:07

Not the answer you're looking for? Browse other questions tagged .