使用 HTML 的表格标记答案

【问题标题】：Table markup using HTML使用 HTML 的表格标记
【发布时间】：2019-06-27 13:48:33
【问题描述】：

我需要为创建下一个表做标记（使用 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 ，只是现在）：Step 2

第 3 步：一旦我删除单元格 2.2 - 大单元格（1.3 和 2.1）变得“更小”：Step 3 这不是我需要的...

这是我的最终标记：

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 并保持任务中提到的表格形状...感谢任何帮助。

【问题讨论】：

标签： html

【解决方案1】：

这是我们实现的输出

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>

【讨论】：

我错过了“tr { height: 30px; }”，没错……非常感谢！

【解决方案2】：

你应该试试这段代码

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>

【讨论】：

【解决方案3】：

你应该试试这个

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

【讨论】：