Строка таблицы была шириной 2 столбца, что меньше количества столбцов, установленного первой строкой (3)

Я использовал https://validator.w3.org/nu/#file чтобы исправить мой html для класса, но я продолжаю получать эту ошибку

Предупреждение: строка таблицы была шириной 2 столбца, что меньше количества столбцов, установленного первой строкой (3).
От строки 31, столбец 31; к строке 32, столбец 6
кольцо↩ ↩

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment 3B</title>
<style>
table, th, td {
    border: 1px solid black;
    background-color: #FFFFCC;
}
th, td {
    width: 25%;
}
th {
    height: 50px
}
th, td {
    padding: 10px;
}
</style>
</head>
<body>

<table>

    <tr>
    <th colspan="3"> Seasons </th> 
    </tr> 
    <tr> 
    <td rowspan="3"> March/April </td>
    <th rowspan="4"> Spring </th> 
    </tr>

    <tr>
    <td > <b> Cold </b></td> 
    </tr>
    <tr> 
    <td> Warm </td> 
    </tr> 
    <tr> 
    <th rowspan="1">
    <img src="tree1.png" alt="tree" style="width:150px;height:150px;"> 
    </th>
    <td style="background-image: url(Light_Pink_430051_i0.png)"> <b>Warm </b> </td>
    </tr>

    </table> 
</body>
</html>

Пожалуйста, помогите мне

3 ответа

  1. Ваш 1-й ряд имеет 3 столбца, 2-й и 5-й ряд имеют 2 столбца, 3-й и 4-й ряд имеют 1 столбец

    Попробуйте этот html:

    table,
    th,
    td {
      border: 1px solid black;
      background-color: #FFFFCC;
    }
    th,
    td {
      width: 25%;
    }
    th {
      height: 50px
    }
    th,
    td {
      padding: 10px;
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <title>Assignment 3B</title>
    </head>
    
    <body>
      <table>
        <tr>
          <!-- 2 columns only -->
          <th colspan="2">Seasons</th>
        </tr>
        <tr>
          <th>March/April</th>
          <th>Spring</th>
        </tr>
        <tr>
          <td> <b> Cold </b>
          </td>
          <td>Warm</td>
        </tr>
        <tr>
          <th>
            <img src="tree1.png" alt="tree" style="width:150px;height:150px;">
          </th>
          <td style="background-image: url(Light_Pink_430051_i0.png)"> <b>Warm </b> 
          </td>
        </tr>
      </table>
    </body>
    
    </html>

  2. Это происходит потому, что выбранный tdи thне содержит столько, сколько столбец, определенный в диапазоне строк .

  3. Я не хочу отвечать на ваш школьный вопрос для вас, но я постараюсь помочь вам понять это

    Поэтому помните, что строки идут поперек, а столбцы вверх и вниз. При определении таблицы вы определяете таблицу. Затем строки в таблице и в каждой строке вы определяете каждый столбец.

    Так что возьмите это изображение и попробуйте сначала подумать о строках

    Вы получили первую клетку правильно. Он охватывает 3 колонки

    Затем в следующем ряду. Первая ячейка занимает 2 строки, вторая ячейка занимает 3 строки и третья ячейка занимает одну строку

    В следующей строке вы уже обработали первый и второй cols и должны определить третью ячейку

    И в последней строке нужно определить первую ячейку, вторая ячейка уже обработана во второй строке. Затем необходимо определить последнюю ячейку

    Надеюсь, вы можете взять его оттуда