Как сделать один <td> диапазон обоих столбцов в таблице с двумя столбцами?

Как создать таблицу, подобную приведенному выше примеру в HTML и CSS. Я пробовал следующее:

<table> 
  <tr> 
    <td style="width:50%">TEXT</td>
    <td style="width:50%">TEXT</td> 
  </tr>
  <tr> 
    <td style="width:100%">TEXT</td> 
  </tr>

но это не сработает. Может ли кто-нибудь помочь?

Ответ 1

Вы должны использовать colspan для своей второй строки. Вот так:

<table>
    <tr>
        <td style="width:50%">TEXT</td>
        <td style="width:50%">TEXT</td>
    </tr>
    <tr>
        <td colspan="2" style="width:100%">TEXT</td>
    </tr>
    ...
</table>

Для изучения → HTML Colspan

Ответ 2

<td> имеют атрибут colspan, который определяет, сколько столбцов оно должно охватывать. Например, у вас есть 2 столбца, поэтому ваш очищенный код будет выглядеть так:

<table>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <!-- The important part is here -->
        <td colspan="2">This will have 100% width by default</td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
</table>