Question

如果我想要交替每行中的单元格数，那么HTML是什么？我希望2个单元格是第1行，第3行是第2行，第2行是3，第3行是4等...类似于砖墙。到目前为止我有这个，但它没有像我想的那样呈现。我知道我可以做这个嵌套表，但我可以用一个表做吗？

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

Answer 1

您不能拥有单元格跨度小数宽度。相反，您需要找到较低和较高范围中行数的最小公分母。在你的例子中，2和3，即6 - 所以你的表是6个单元格宽，偶数行每个跨越3个，奇数行跨越2个。

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

请注意，表格宽度很容易被2和3整除，宽度会在每个单元格中明确设置。

Answer 2

一种方法是通过CSS。您可以设置一个与您需要的一样大的表（例如，4x4），然后根据需要将样式应用于每个单元格。将有两种样式，砖和空，一种表示“砖”，另一种表示空白。

所以，您可以执行以下操作：

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

Answer 3

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

Answer 4

我很确定colspans必须有一个整数值，不允许分数。您可以尝试在3单元行上添加0宽度，0填充，0边距的虚拟单元格。

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

HTML表格有助于交替的单元格数量

4 个答案: