Может ли таблица HTML иметь переменное количество ячеек в строках?
Или должно ли общее количество клеток равняться columns * rows
?
Таблица с разным количеством ячеек в разных строках, по-видимому, передает W3 Validator.
Ответы
Ответ 1
Это не нарушает определение. Но вы должны использовать атрибут colspan, чтобы развернуть столбец ко всей строке:
<table>
<tr>
<td>Row with</td>
<td>2 cols</td>
</tr>
<tr>
<td colspan="2">Row with only one col</td>
</tr>
</table>
Это также поможет, если у вас есть границы вокруг ячеек.
Можно даже иметь таблицы с столбцом, который расширяется до двух строк:
<table>
<tr>
<td rowspan="2">First column in row 1 and row 2</td>
<td>Second column in row 1</td>
</tr>
<tr>
<td>second column in row 2</td>
</tr>
</table>
Ответ 2
Вы можете использовать colspan
, но сумма, включающая значение (t) > colspan
, должна быть одинаковой для правильной рендеринга таблицы.
<table>
<tr>
<td colspan="2">blah</td>
</tr>
<tr>
<td>blah</td>
<td>boo</td>
</tr>
</table>
В первой строке есть одна ячейка, но она охватывает 2 ячейки из-за colspan
, вторая строка имеет две ячейки, и это совершенно верно.
Ответ 3
Да, это возможно. В table > tr > td
, td
содержится контент. td
ссылка здесь: http://www.htmlcodetutorial.com/tables/_TD.html. В этой ссылке вы можете видеть, что у TD есть 2 атрибута: colspan и rowspan. Используя эти 2 атрибута, таблица может иметь различное количество ячеек в разных строках.
Демо-ролик:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
</table>
и
<table border="1">
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
Ответ 4
Да, вы можете создать таблицу HTML и оставить элементы <td>
в некоторых строках, но это считается плохой формой, потому что вы не можете быть уверены, как обработчик HTML (браузер) справится с этой ситуацией. Это может быть несколько иначе изменено разными браузерами.
Рекомендуемый способ определения таблицы с различным количеством ячеек, отображаемых в строке, заключается в использовании colspan
для объединения двух или более смежных ячеек в один. Это позволит поддерживать правильные ячейки, выровненные с правильными столбцами, и устраняет любую двусмысленность в отношении того, что вы хотите сделать рендерером HTML.
Ответ 5
Вы использовали:
<table>
<thead>
<th>Column one</th>
<th>Column two</th>
<th>Column three</th>
</thead>
<tbody>
<tr>
<td rowspan="2">A large cell</td>
<td>Another small cell0</td>
<td>Another small cell0</td>
</tr>
<tr>
<td>Another small cell1</td>
<td>Another small cell1</td>
</tr>
</tbody>