Условия и решения на задачите от лекция “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>