Change emu-table to use CSS grid to make them less verbose

[sirisian]

Currently a table looks like:

<emu-table id="table-2" caption="Attributes of a Data Property">
    <table>
    <tbody>
    <tr>
        <th>
        Attribute Name
        </th>
        <th>
        Value Domain
        </th>
        <th>
        Description
        </th>
    </tr>
    <tr>
        <td>
        [[Value]]
        </td>
        <td>
        Any ECMAScript language type
        </td>
        <td>
        The value retrieved by a get access of the property.
        </td>
    </tr>
    <tr>
        <td>
        [[Writable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.
        </td>
    </tr>
    <tr>
        <td>
        [[Enumerable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.
        </td>
    </tr>
    <tr>
        <td>
        [[Configurable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.
        </td>
    </tr>
    </tbody>
    </table>
</emu-table>

A CSS grid would look like:

<emu-table id="table-2" caption="Attributes of a Data Property">
  <emu-th>Attribute Name</emu-th>
  <emu-th>Value Domain</emu-th>
  <emu-th>Description</emu-th>

  <emu-td>[[Value]]</emu-td>
  <emu-td>Any ECMAScript language type</emu-td>
  <emu-td>The value retrieved by a get access of the property.</emu-td>

  <emu-td>[[Writable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.</emu-td>

  <emu-td>[[Enumerable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.</emu-td>

  <emu-td>[[Configurable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.</emu-td>
</emu-table>

The <emu-th> would define the number of columns.

I've been adding a bunch of stuff to tables and this would make things look clean.

[jmdyck]

this would make things look clean.

Is it the source or the rendered result that you're saying would look clean?

[sirisian]

Is it the source or the rendered result that you're saying would look clean?

The source, to make it less redundant. (But the outputted HTML would probably also change, so that also, but it would look the same in a browser). It seems like the drive with the web components was to make thing readable and the tables hit me as out of place compared to the rest of the document's optimized design. (That is it has few unnecessary nodes).

[domenic]

Strong -1. Using standard elements improves clarity; using almost-but-not-quite duplicates, prefixed with emu-, decreases it.

Instead if you find tables too hard to type, just omit all the tr/th/td/thead/tbody closing tags.

[tabatkins]

Yes, PLEASE just omit all your end tags. You don't need a single one of them besides the </table>; the only other tag I sometimes use is a </thead> if I don't want to explicitly add a <tbody> and increase the indent level of the body rows.

Trimmed appropriately, your original source looks like:

<emu-table id="table-2" caption="Attributes of a Data Property">
    <table>
    <thead>
        <tr>
            <th>Attribute Name
            <th>Value Domain
            <th>Description
    </thead>
    <tr>
        <td>[[Value]]
        <td>Any ECMAScript language type
        <td>The value retrieved by a get access of the property.
    <tr>
        <td>[[Writable]]
        <td>Boolean
        <td>If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.
    <tr>
        <td>[[Enumerable]]
        <td>Boolean
        <td>If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.
    <tr>
        <td>[[Configurable]]
        <td>Boolean
        <td>If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.
    </table>
</emu-table>

which is basically equivalent to your pure-emu version. It uses the same amount of vertical space (just with <tr> lines instead of empty lines), and uses less character overall, as the start tags are shorter and there are no end tags at all. (I also fixed your semantics to put the header row into thead as it's meant to be.)

(I have a similar issue against Bikeshed where people are complaining about table verbosity and asking for Markdown-ish tables (which are terrible), where I keep trying to tell people to just omit your dang end tags.)

[tabatkins]

I can see a reasonable argument for ecmarkup to let you omit the table tags, as the semantic is already implied by emu-table, but I'm not sure what ecmarkup's parsing strategy is and how feasible it would be. Also maybe it could assume that an initial row of only-th (possibly with a single leading empty td) is meant to go in a thead, so people don't have to do that good semantic stuff manually. Then the example would be even smaller:

<emu-table id="table-2" caption="Attributes of a Data Property">
    <tr>
        <th>Attribute Name
        <th>Value Domain
        <th>Description
    <tr>
        <td>[[Value]]
        <td>Any ECMAScript language type
        <td>The value retrieved by a get access of the property.
    <tr>
        <td>[[Writable]]
        <td>Boolean
        <td>If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.
    <tr>
        <td>[[Enumerable]]
        <td>Boolean
        <td>If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.
    <tr>
        <td>[[Configurable]]
        <td>Boolean
        <td>If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.
</emu-table>

[ExE-Boss]

The annoying part with that is that the HTML parser ignores <t*> tags outside of a <table>, so you'd be forced to use <table is="emu-table">.