Средство проверки HTML показывает ошибку в, казалось бы, правильной строке кода

#html #validation

#HTML #проверка

Вопрос:

Я создаю таблицу для университетской задачи. Время от времени нам приходится помещать наш код в средство проверки. По какой-то причине средство проверки продолжает показывать эти ошибки: https://i.ibb.co/dLnzTh2/error.png

Ошибки касаются <th> тега внутри <thead> .

 <table style="width: 700px" >
            <thead>
                <tr>
                    <th colspan="8">Market Shares of Graphics Adapters in Q4 2013
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">-</td>
                    <td rowspan="2">Q4 2013</td>
                    <td rowspan="2">Q3 2013</td>
                    <td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
                    <td rowspan="2">2012</td>
                </tr>
                <tr>
                    <td colspan="2">Unit Shipments</td>
                    <td colspan="2">Share</td>
                </tr>
                <tr>
                    <td>AMD</td>
                    <td>18.30%</td>
                    <td>20.70%</td>
                    <td colspan="2">-10.40%</td>
                    <td colspan="2">-2.40%</td>
                    <td>19.70%</td>
                </tr>
</tbody>
</table>
  

Есть идеи, что является причиной этого?
Для справки вот как выглядит вся таблица:
https://i.ibb.co/LkMbWc9/table.png

Комментарии:

1. Помогло бы узнать, какой валидатор вы используете и что происходит, когда вы проверяете известную правильную структуру таблицы, подобную той, что приведена здесь w3schools.com/html/html_tables.asp

Ответ №1:

Это всегда означает «столбец без каких-либо ячеек» — сложнее найти с помощью collspans, но возможно — во фрагменте Unit Shipments и Share синим цветом — это удвоенный td, и это делает пустой столбец в обоих — поскольку оба имеют colspan сверху.
Коротко — вся таблица слишком широка из 2 ненужных ячеек

 td, th{ border: 1px solid red}          /* this shows every th, td even empty */
td[colspan] { border: 1px solid blue}       /* this shows colspans */  
 <table style="width: 700px" >
            <thead>
                <tr>
                    <th colspan="8">Market Shares of Graphics Adapters in Q4 2013
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">-</td>
                    <td rowspan="2">Q4 2013</td>
                    <td rowspan="2">Q3 2013</td>
                    <td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
                    <td rowspan="2">2012</td>
                </tr>
                <tr>
                    <td colspan="2">Unit Shipments</td>
                    <td colspan="2">Share</td>
                </tr>
                <tr>
                    <td>AMD</td>
                    <td>18.30%</td>
                    <td>20.70%</td>
                    <td colspan="2">-10.40%</td>
                    <td colspan="2">-2.40%</td>
                    <td>19.70%</td>
                </tr>
</tbody>
</table>