0

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

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

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

Получилась такая таблица: введите сюда описание изображения

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

1 ответ 1

2

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

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

3
  • Спасибо тебе огромное ! Можешь объяснить , чем отличается th от td , и когда надо брать тэг td , а не th? 1 дек 2017 в 20:42
  • 1
    @True-hacker htmlbook.ru/samhtml/tipy-tegov/tegi-dlya-tablits
    – Twiss
    1 дек 2017 в 20:43
  • 1
    Насколько я помню, th - указывается для заголовочных полей, для остальной таблицы - td. Не отличаются ничем, насколько я знаю. Давно уже использую только td 1 дек 2017 в 20:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.