Como posso criar uma tabela onde tenho dois td
para um só th
, exemplo:
| Tabela Exemplo | Exemplo |
| parte1 | parte2 | |
Para expandir uma célula da tabela vc precisa usar o atributo colspan
. Lembro que colspan
é para expandir a coluna, e rowspan
é para estender a linha. Se vc quer que a coluna se estenda por duas células, vc coloca colspan="2"
td {
border: 1px solid #000;
}
<table>
<tr>
<td colspan="2">colspan 2</td>
<td>normal</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p>Agora com rowspan</p>
<table>
<tr>
<td>01</td>
<td rowspan="2">rowspan="2"</td>
</tr>
<tr>
<td>02</td>
</tr>
</table>
Eu concordo plenamente com a resposta do @hugocsl, só que acho que dá pra esclarecer um pouco melhor como os atributos colspan
e rowspan
funcionam.
Com uma pequena alteração, adicionando o rowspan
dá pra ocupar mais de uma linha também, e o valor também pode ser maior que dois, de acordo com sua necessidade.
td {
border: 1px solid #000;
}
<table>
<tr>
<td colspan="2"> Tabela Exemplo </td>
<td> Exemplo </td>
</tr>
<tr>
<td rowspan="2"> parte 1 </td>
<td> parte 2 </td>
<td> parte 3 </td>
</tr>
<tr>
<td> parte 2 </td>
<td> parte 3 </td>
</tr>
</table>
Você pode misturar os dois atributos também, para que uma célula, ocupa mais de uma linha e mais de uma coluna! :)
Referência:
https://www.w3schools.com/tags/att_td_colspan.asp https://www.w3schools.com/tags/att_td_rowspan.asp