Question

我在找桌子上重现这张照片时遇到了麻烦。不用担心颜色，我将删除只需要它们作为参考的单元格中的名称。

border is white but I am using black on mine

这就是我要得到的。我不确定我要去哪里错。在过去的五个小时中，我一直努力做到这一点，但想法不多了。如何使它看起来像上面的图片？

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML Tables</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  </style>
</head>
	<body>
		<table>		
			<tbody>
				<tr>
					<td rowspan="2" colspan="2">1</td>
					<td rowspan="2" colspan="5">2</td>
				
				</tr>
				<tr></tr>
				<tr>
					<td rowspan="2" colspan="2">3</td>
			
					<td rowspan="2" colspan="4">4</td>
					<td>5</td>					
				</tr>
				<tr>
					
					<td>6</td>			
				</tr>
			</tbody>
		</table>  
	</body>
</html>

我的CSS

  	body{
  		font-family: monospace;
      background-color: #ddd;
  	}
  	table{
  		width: 655px;
  		height: 381px;
  		border: 35px solid #000;
  		border-collapse: collapse;
  	}

  	td{
  		border: 20px solid #000;
  		padding: 10px;
  	}

我知道我那里有一个空标签，但是当我把它拿出来的时候，桌子看起来就更糟了。

更新通过设置单元格的宽度和高度，我可以使它看起来非常接近

Updated table

HTML表格，如何使用rowspan和colspan重新创建包含的照片

0 个答案: