Come fare uno <td> estendersi su entrambe le colonne in una tabella a due colonne?
Come posso creare una tabella come nell'esempio precedente in HTML e CSS. Ho provato la seguente:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
ma non funzionerà. Qualcuno può aiutare?
È necessario utilizzare colspan per la seconda fila. Come questo:
<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>
Per imparare ->HTML Colspan
Salvato la mia vita a metà 2016! –
<td>s have a colspan attribute che determinano quante colonne dovrebbe estendersi sopra. Si esempio ha 2 colonne a estendersi, in modo che il codice di ripulito sarebbe simile a questa:
<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>
So che questa è una vecchia risposta, ma la parte superiore è sbagliata. La maggior parte dei browser ridimensiona automaticamente le colonne in base al contenuto, pertanto non è possibile garantire che entrambe le colonne abbiano una larghezza uguale. – Martin
@Martin Right. Penso che stavo andando via da quel tavolo vuoto che le celle si sarebbero comportate in quel modo. Ho reso la mia risposta più chiara. – smilebomb
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr- colspan – j08691