La tabella HTML aiuta a alternare il numero di celle

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

Domanda

Qual è l'HTML corretto se voglio alternare il numero di celle in ogni riga? Voglio 2 celle è la riga 1, 3 nella riga 2, 2 in 3, 3 in 4 ecc ... Simile a un muro di mattoni. Ho questo finora, ma non rende come vorrei. So che potrei fare queste tabelle di nidificazione, ma posso farlo con una tabella? 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>
È stato utile?

Soluzione

Non puoi avere una larghezza di cella di frazioni di larghezza. Invece, è necessario trovare il minimo comune denominatore per il numero di righe nell'intervallo inferiore e superiore. Nel tuo esempio, 2 e 3, che sono 6, quindi la tabella è larga 6 celle, con le righe pari che si estendono su 3 ciascuna e le righe dispari che si estendono su 2 ciascuna. 

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

Nota che la larghezza della tabella è facilmente divisibile per 2 e 3 e le larghezze sono esplicitamente impostate in ogni cella.

Altri suggerimenti

Un modo per farlo sarebbe tramite CSS. Dovresti impostare una tabella delle dimensioni che ti servono (ad esempio 4x4), quindi applicare uno stile a ciascuna cella nel modo appropriato. Ci sarebbero due stili, mattone e vuoto, uno significa un "mattone". e l'altro significa spazio vuoto.

Quindi, potresti fare qualcosa del tipo: 

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>

Sono abbastanza sicuro che i colspan debbano avere un valore intero, le frazioni non sono consentite. Potresti provare ad aggiungere una cella fittizia con 0 larghezza, 0 riempimento, 0 margine sulla linea a 3 celle. 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top