Die HTML -Tabelle hilft wechselt, die Anzahl der Zellen zu wechseln

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

  •  06-07-2019
  •  | 
  •  

Frage

Was ist das richtige HTML, wenn ich die Anzahl der Zellen in jeder Zeile abwechseln möchte? Ich möchte, dass 2 Zellen in Reihe 1, 3 in Reihe 2, 2 in 3, 3 in 4 usw. sind, ähnlich einer Mauer. Ich habe das bisher, aber es wird nicht so rendern, wie ich es gerne hätte. Ich weiß, ich könnte diese Nisttische machen, aber kann ich das mit einem Tisch tun? 

<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>
War es hilfreich?

Lösung

Sie können keine Zellspannungsfraktionsbreiten haben. Stattdessen müssen Sie den am wenigsten gebräuchlichen Nenner für die Anzahl der Zeilen in den unteren und oberen Bereichen finden. In Ihrem Beispiel 2 und 3, das 6 ist - also ist Ihre Tabelle 6 Zellen breit, wobei die gleichmäßigen Reihen jeweils 3 und die ungeraden Zeilen von jeweils 2 überschreiten.

<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>

Beachten Sie, dass die Tabellenbreite leicht durch 2 und 3 teilbar ist und die Breiten explizit in jeder Zelle eingestellt sind.

Andere Tipps

Eine Möglichkeit, dies zu tun, wäre über CSS. Sie würden eine Tabelle einrichten, die so groß ist, wie Sie sie benötigen (z. B. 4x4), und dann gegebenenfalls einen Stil auf jede Zelle anwenden. Es würde zwei Stile geben, Ziegel und leer, einen, der einen "Ziegel" und den anderen einen leeren Raum bedeutet.

Sie könnten also so etwas wie Folgendes tun:

<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>

Ich bin mir ziemlich sicher, dass Colspans einen ganzzahligen Wert haben müssen, Brüche sind nicht erlaubt. Sie können versuchen, eine Dummy-Zelle mit 0 Breite, 0 Polster, 0 Rand auf der 3-Zell-Linie hinzuzufügen. 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top