Question

我需要创建标记来创建下一个表（使用HTML）：

这是我的方法（无效）：

第1步：使用所有大小相同的单元格进行“常规”标记：

td { border: solid #aaa 1px }

<table>
  <thead>
    <tr>
      <th colspan="4">Some Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
  </tbody>
</table>

输出：Step 1

第2步：使用“ colspan”和“ rowspan”使单元格1.3和2.1变大，并删除不必要的单元格（1.4、2.3、2.4、3.3和3.4），但其中一个除外（2.2，目前）：{{3 }}

步骤3：一删除单元格2.2，大单元格（1.3和2.1）就会变小：Step 2，这不是我所需要的...

这是我的最终标记：

td { border: solid #aaa 1px }

<table>
  <thead>
    <tr>
      <th colspan="4">Some Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td colspan="2" rowspan="2">1.3</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">2.1</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
    </tr>
  </tbody>
</table>

我找不到如何删除单元格2.2并保持任务中提到的表格形状的方法。感谢任何帮助。

Answer 1

您应该尝试使用此代码

td {
border: 1px solid #579;
}

<table>
    <tbody>
	<tr>
	   <td>1.1</td>
	    <td>1.2</td>		     		   
	    <td colspan="2">1.3</td>
	  </tr>
	  <tr>
	    <td colspan="2" rowspan="2">2.1</td>
	    <td>2.2</td>		    
	    <td>2.3</td>
	  </tr>
	  <tr>
	    <td>3.1</td>
	    <td>3.2</td>		    		   
	  </tr>
	</tbody>
  </table>

Answer 2

您应该尝试这个

<style>td{border:1px solid black;}
        tr{height:35px;}
</style>

<table>
	<tbody>
		<tr>
			<td colspan="4">Head</td>
		</tr>
		<tr>
			<td>1.1</td>
			<td>1.2</td>
			<td colspan="2" rowspan="2">1.3</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">2</td>
		</tr>
		<tr>
			<td>3.1</td>
			<td>3.2</td>
		</tr>
	</tbody>
</table>

Answer 3

这是我们实现的目标

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

tr {
  height: 30px;
}

td {
  height: 30px;
  width: 50px;
  text-align: center;
}

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td colspan="2" rowspan=2>1.3</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">2.1</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
  </tr>
</table>

使用HTML的表格标记

3 个答案: