Таблица HTML разных столбцов в разных строках

Ответ 1

Понимая, что вы не знакомы с colspan, я предположил, что вы также не знакомы с rowspan, поэтому я подумал, что я брошу это бесплатно.

Важно отметить, что при использовании rowspan следующие элементы tr должны содержать меньше элементов td, из-за ячеек, использующих rowspan в предыдущей строке (или предыдущих строках).

CSS

table {border: 1px solid #000; border-collapse: collapse; }
th, td {border: 1px solid #000; }

HTML:

<table>
    <thead>
        <tr>
            <th colspan="2">Column one and two</th>
            <th>Column three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2" colspan="2">A large cell</td>
            <td>a smaller cell</td>
        </tr>
        <tr>
            <!-- note that this row only has _one_ td, since the preceding row
                 takes up some of this row -->
            <td>Another small cell</td>
        </tr>
    </tbody>
</table>

Демо на: jsbin

Ответ 2

Colspan:

<table>
   <tr>
      <td> Row 1 Col 1</td>
      <td> Row 1 Col 2</td>
</tr>
<tr>
      <td colspan=2> Row 2 Long Col</td>
</tr>
</table>

Ответ 3

да, просто используйте colspan.