Может ли таблица HTML иметь переменное количество ячеек в строках?

Ответ 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>