7. Оформление таблиц с помощью CSS

Задание 1. Создайте файлы table1.html и связанный с ним style1.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.

Оформление таблиц на языках HTML и CSS

Задание 2. Создайте файлы table2.html и связанный с ним style2.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.

Возможности CSS для оформления таблиц

Ответ к заданиям

Задание 1.

Файл table1.html

<html>
<head>
<title>Таблицы</title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<table>
<tr>
<th rowspan=2>HDD</th>
<td>WD Caviar 3.1 Gb</td>
<td> 50$</td>
</tr>
<tr>
<td>Quantum FB ST 6.4Gb</td>
<td> 90$</td>
</tr>
<tr>
<th rowspan=2>Video</th>
<td>Matrox G400</td>
<td>115$</td>
</tr>
<tr>
<td>Voodoo III</td>
<td> 120.50$</td>
</tr>
</table>
 
</body>
</html>

Файл style1.css

table {
	margin: auto;
	width: 400px;
	border: #2f4f4f inset 5px;
	padding: 5px;
}
td,th {
	border: groove 1px;
	padding: 5 10 5 10px;
}

Задание 2.

Файл table2.html

<html>
<head>
<title>Буки и бяки</title>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<table cellpadding="10">
<tr>
<td class="w200">
С каждым днем в Интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутствие заметно.  Буки и бяки требуют особого обращения к себе, если обращаться к ним как к  нормальным человеческим особям, то вы поняты не будете.</td>
<td class="w5"></td>
<td class="w200">Вот таблица, которая показывает сколько бук, бяк и других обитает в Интернете:<br><br>
	<table class="white" cellspacing="3">
	<tr>
	<td  class="w50">буки</td>
	<td>65% населения</td>
	</tr>
	<tr>
	<td>бяки</td>
	<td>20% населения</td>
	</tr>
	<tr>
	<td>другие</td>
	<td>15% населения</td>
	</tr>
	</table>
<br><br>
Данные статистического штаба
</td>
</tr>
</table>
</body>
</html>

Файл style2.css

body {
	background-color: #000066; 
}
table {
	margin: auto;
	border: ridge 5px white;
}
td.w200 {
	width: 200px;
	vertical-align: top;
	background-color: #99ccff;
}
td.w50 {
	width: 50px;
}
td.w5 {
	width: 5px;
	background-color: #ffffff;
}
table.white {
	border-width: 1px;
}
table.white tr {
	background-color: #ffffff;
}