HTML – Tables

Условия и решения на задачите от лекция “Tables”

Задача 1

Fresh fruits

<!DOCTYPE html>
<html>
	<head>
		<title>Fruit table</title>
		<meta charset="UTF-8">
		<style>
			table
			{
				width:400px;
			}
			th
			{
				font-size:200%;
			}
			#paragraph
			{
				width:20em;
			}
			thead
			{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<table cellpadding="5" cellspacing="0">
			<colgroup>
				<col id="paragraph">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th colspan="2">
						Fresh Fruit
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						It has been known that a diet that includes at least a few servings of fresh fruit every day will help keep you healthy, fit and trim.
					</td>
					<td>
						<img src="fresh-fruits.jpg" alt="logo"/>
					</td>	
				</tr>
			</tbody>	
		</table>
	</body>
</html>

„Titles go here“ table

<!DOCTYPE html>
<html>
	<head>
		<title>Letter table</title>
		<meta charset="UTF-8">
		<style>
			table,td
			{
				border:1px solid;
				text-align:center;
			}
			#B
			{
				padding-right:2px; 
				padding-left:20px; 
				text-align:right;
				!important
			}
			#C
			{
				padding-left:2px;
				padding-right:20px;
				text-align:left;
				!important
			}
			#G
			{
				padding-right:2px;
				padding-left:20px;
				text-align:right;
				!important
			}
			#J
			{
				padding-right:2px;
				padding-bottom:3px; 
				padding-left:20px; 
				text-align:right; 
				vertical-align:bottom;
				!important
			}
			#N
			{
				padding-right:2px;
				padding-left:20px;
				text-align:right;
				!important
			}
		</style>
	</head>
	<body>
			<table cellpadding="10">
				<tbody>
					<tr>
						<td colspan="3">Title goes here</td>	
						<td>A</td>
						<td id="B">B</td>	
					</tr>
					<tr>
						<td rowspan="3" id="C">C</td>	
						<td>D</td>
						<td>E</td>	
						<td>F</td>
						<td id="G">G</td>	
					</tr>
					<tr>
						<td>H</td>
						<td colspan="2">I</td>
						<td rowspan="2" id="J">J</td>	
					</tr>
					<tr>
						<td>K</td>
						<td>L</td>	
						<td>M</td>
					</tr>
					<tr>
						<td id="N">N</td>	
						<td colspan="4">O</td>	
					</tr>
				</tbody>	
			</table>
	</body>
</html>

Задача 2

<!DOCTYPE html>
<html>
	<head>
		<title>Form</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<section>
			<form action="#" method="POST">
				<table>
					<tr>
						<td>
							Member name:
							<input type="text" name="Member name"/>
							*req
						</td>
					</tr>
					<tr>
						<td>
							Email:
							<input type="text" name="Email"/>
							*req
						</td>
					</tr>
					<tr>
						<td>
							School:
							<input type="text" name="School"/>
							*req
						</td>
					</tr>
				</table>
			<input type="image" src="submit.jpg" name="Submit button" alt="Submit"/>
			</form>
		</section>
	</body>
</html>

Задача 3

<!DOCTYPE html>
<html>
	<head>
		<title>Calculator</title>
		<meta charset="UTF-8">
		<style>
			table
			{
				border-style:solid;
				border-color:#0000ff;
				text-align:center;
			}
			button
			{
				color:#ffffff; 
				background-color:#0033FF; 
				height: 75px; 
				width: 75px; 
				font-size:200%
			}
			#display
			{
				font-size:200%;
				color:#ffffff;
				text-align:right;
				height:55px;
				background-color:#606060;
				!important
			}
			#zero
			{
				width: 150px; !important
			}
		</style>
	</head>
	<body>
			<table cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td colspan="4" id="display">
							123
						</td>
					</tr>
					<tr>
						<td>
							<button type="button">1</button>
						</td>
						<td>
							<button type="button">2</button>
						</td>
						<td>
							<button type="button">3</button>
						</td>	
						<td>
							<button type="button">+</button>
						</td>
					</tr>
					<tr>
						<td>
							<button type="button">4</button>
						</td>
						<td>
							<button type="button">5</button>
						</td>
						<td>
							<button type="button">6</button>
						</td>
						<td>
							<button type="button">-</button>
						</td>
					</tr>
					<tr>
						<td>
							<button type="button">7</button>
						</td>
						<td>
							<button type="button">8</button>
						</td>
						<td>
							<button type="button">9</button>
						</td>
						<td>
							<button type="button">*</button>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<button type="button" id="zero">0</button>
						</td>
						<td>
							<button type="button">.</button>
						</td>
						<td>
							<button type="button">/</button>
						</td>
					</tr>
				</tbody>	
			</table>
	</body>
</html>

Оставете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *