Создание html таблицы

250

03 декабря 2017, 11:52

Я очень долго мучался и не понимаю как сделать такую таблицу :

Основу таблицы я сделал без проблем :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><==!Table!==></title>
</head>
<body>
<table align = "center" width="900" height = "900"border = "2">
<tr>
<th style="background-color: green"></th>
<th colspan="4" rowspan="2" style="background-color: red"></th>
<th style="background-color: green"></th>
</tr>
<tr>
<th width="200"style="background-color: green"></th>
<th width="200"style="background-color: green"></th>
</tr>
<tr>
<th rowspan="3" style="background-color: red" colspan="3"></th>
<th style="background-color: green"></th>
<th style="background-color: blue" width="20"></th>
<th style="background-color: blue" width="20"></th>
</tr>
<tr>
<th width="200" style="background-color: green"></th>
<th style="background-color: blue" width="0"></th>
<th style="background-color: blue" width="20"></th>
</tr>
<tr><th width="200" style="background-color: green"></th>
<th width="200" style="background-color: green"></th>
<th width="200" style="background-color: green"></th>
</tr>
</table>
</body>
</html>

Получилась такая таблица:

Я не понимаю как сделать синие квадраты и нижний большой красный куб.Помогите её пожалуйста закончить , если можно с объяснением.

Answer 1

Получилось так:

<style> 
	table {width: 400px;} 
	td.green {background-color: green; width: 100px; height: 100px;} 
	td.red {background-color: red; width: 200px; height: 200px;} 
	td.blue {background-color: blue; width: 50px; height: 50px;} 
</style> 
 
<table> 
	<tr> 
		<td class="green">1</td> 
		<td class="red" rowspan="2" colspan="2">1</td> 
		<td class="green" colspan="2">1</td> 
	</tr> 
	<tr> 
		<td class="green">1</td> 
		<td class="green" colspan="2">1</td> 
	</tr> 
	<tr> 
		<td class="red" rowspan="3" colspan="2">1</td> 
		<td class="green" rowspan="2">1</td> 
		<td class="blue">2</td> 
		<td class="blue">2</td> 
	</tr> 
	<tr> 
		<td class="blue">2</td> 
		<td class="blue">2</td> 
	</tr> 
	<tr> 
		<td class="green">2</td> 
		<td class="green" rowspan="1" colspan="2">2</td> 
	</tr> 
</table>