Проверка colspan проверки HTML-таблицы - PullRequest
0 голосов
/ 24 июня 2018

У меня есть эта HTML-таблица:

<fieldset class="form login">
    <legend>Authorization</legend>
    <table>
      <tbody>
        <tr>
          <td colspan="1">
            <label class="form__label" for="login">Login</label>
          </td>
          <td colspan="3">
            <input id="login" type="email" required="required">
          </td>
        </tr>
        <tr>
          <td colspan="1">
            <label class="form__label" for="password">Password</label>
          </td>
          <td colspan="3">
            <input id="password" type="password" required="required">
          </td>
        </tr>
        <tr>
          <td class="text-center" colspan="4"><input type="submit"></td>
        </tr>
      </tbody>
    </table>
  </fieldset>

Когда я запускаю его через validator (validator.w3.org), я получаю сообщение об ошибке:

Error: Table columns in range 3…4 established by element td have no cells beginning in them.

From line 21, column 16; to line 22, column 26

     </td>↩          <td colspan="3">↩   

Что это значит? Я нашел этот ответ:
Помощь с ошибкой проверки HTML: в столбце таблицы нет начальных ячеек

но все еще не понимаю, что именно я должен сделать, чтобы сделать его действительным?

1 Ответ

0 голосов
/ 24 июня 2018
  • В вашей таблице три строки:

    Row 1:
    Row 2:
    Row 3:
    
  • В строках 1 и 2 у вас есть ячейка в столбце 1 и охватывающие столбцы со 2 по 4

  • В строке 3 у вас есть ячейки, охватывающие столбцы с 1 по 4

    Row 1: | cell 1,1 | cell 1,2-4 |
    Row 2: | cell 1,1 | cell 1,2-4 |
    Row 3: | cell 1,1-4            |
    
  • Валидатор смотрит на эту таблицу и жалуется, что хотяВ разметке говорится, что в действительности существует 4 столбца, а их всего 2.

Таким образом, решение состоит в том, чтобы заменить colspan="3" в строках 1 и 2 на colspan="1" (или вообще отбросить его,поскольку colspan="1" не имеет смысла), а в строке 3 заменить colspan="4" на colspan="2".Таким образом, разметка выравнивается с фактическим аспектом таблицы.

...