[Bug]: Wrong HTML table form.

[ve3]

Description of the bug

Your current example for Table with class form-table is...

<table class="form-table">
    <tbody>
        <tr>
            <th class="row-title">Table header cell #1</th>
            <th>Table header cell #2</th>
        </tr>
        <tr valign="top">
            <td scope="row">
                <label for="tablecell">Table data cell #1, with label</label>
            </td>
            <td>Table Cell #2</td>
        </tr>
        <tr valign="top" class="alternate">
            <td scope="row">
                <label for="tablecell">Table Cell #3, with label and class <code>alternate</code>
                </label>
            </td>
            <td>Table Cell #4</td>
        </tr>
        <tr valign="top">
            <td scope="row">
                <label for="tablecell">Table Cell #5, with label</label>
            </td>
            <td>Table Cell #6</td>
        </tr>
    </tbody>
</table>

And with HTML above, the result is wrong. The column of field name is too wide.

Refer from WordPress Settings page (General Settings), the differents are:

• You have no role="presentation" on <table> tag. (This is not required but I just refer from settings page.)
• Form table does not need table header (<tr><th>..</th><th>..</th></tr>).
• The form row should be use <th> on the field name. Example: <tr><th scope="row">Name</th><td>..</td></tr>. You are currently using <td scope="row">.

Reproduction instructions

1. Activate plugin.
2. Go to Admin Style menu from the left.
3. Click on Tables.

Expected behavior

Expect table form or form table to have narrower field name column like in any Settings pages.

Environment info

• Plugin v 1.6.1
• WordPress 6.9-RC2-61274

Relevant log output

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bueltge]

Thanks a lot for this note, will you send a PR to solve this to the correct markup?

[ve3]

I'm working on it but I have few more questions.

1. There are 2 example of Table with class widefat. What is the difference or what is the second example for?
2. I don't see any effect of table row with class alt. Do we still need this?
3. I think class form-invalid is using in wrong example. It should be in the table with form. I'm try to working on it but do we need it in example of table widefat?

[ve3]

Submitted here

#71

[bueltge]

Hello @ve3 Thanks again for your helping hands.

1. There a two different table, typically in the admin area:

• Table without theadpart.
• Table with thead and tbody part.

2. class="alternate" allow it that each second element gets a different style.
3. form-invalid was for notices in case of error. This also in the last version defined, see wp-admin/css/forms.css?ver=6.9

.form-invalid .form-required,
.form-invalid .form-required:focus,
.form-invalid.form-required input,
.form-invalid.form-required input:focus,
.form-invalid.form-required select,
.form-invalid.form-required select:focus {
	border-color: #d63638 !important;
	box-shadow: 0 0 2px rgba(214, 54, 56, 0.8);
}

.form-table .form-required.form-invalid td:after {
	content: "\f534" / '';
	font: normal 20px/1 dashicons;
	color: #d63638;
	margin-left: -25px;
	vertical-align: middle;
}

/* Adjust error indicator for password layout */
.form-table .form-required.user-pass1-wrap.form-invalid td:after {
	content: "";
}

.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
	content: "\f534" / '';
	font: normal 20px/1 dashicons;
	color: #d63638;
	margin: 0 6px 0 -29px;
	vertical-align: middle;
}

[ve3]

2. `class="alternate"` allow it that each second element gets a different style.

No, just alt not alternate.
See https://github.com/bueltge/wordpress-admin-style/blob/master/patterns/tables.php#L81

This class alt has no effect.