У меня проблемы с получением таблицы для воссоздания этой фотографии. Не беспокойтесь о цветах и я буду удалять названия в ячейках, просто они нужны для справки.
рамка белая, но я использую черный на моем
Вот что я получаю. Я не уверен, где я иду не так. Я пытался получить это в течение последних пяти часов, и у меня заканчиваются идеи. Как мне сделать так, чтобы это выглядело как на картинке выше?
Мой стол
Вот мой 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;
}
Я знаю, что там есть пустой тег, но когда я вынимаю его, стол выглядит еще хуже.
UPDATE
Я смог сделать это довольно близко, установив ширину и высоту моих клеток
Обновленная таблица