3011 1635156242052 Practical - 5.2
3011 1635156242052 Practical - 5.2
Practical (2 Hours)
1) What is the correct order of tags you need to use to create an HTML table?
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data2</td>
</tr>
<tr>
<td>data 3</td>
<td> data 4</td>
</tr>
</table>
2) Write a code segment in HTML to get the following output. (Hint: Heading = H2,
table style="width:100%")
<DOCTYPE html>
<html>
<title>home</title>
<body>
<h2>Basic HTML Table</h2>
<table style=”width:100%”>
<thead>
<th>firstname</th>
<th>lastname</th>
<th>Age</th>
Page 1
</thead>
<tr>
<td>Amal</td>
<td>Danny</td>
<td>John</td>
</tr>
<tr>
<td>Perera</td>
<td>Jackson</td>
<td>Doe</td>
</tr>
<tr>
<td>50</td>
<td>30</td>
<td>35</td>
</tr>
</table>
3) Write a code segment in HTML to get the following output. (Hint: Heading = H2, table, table
heading, table data should have a border of 1px solid black, table style="width:100%)
<html>
<body>
<h2>Bordered Table</h2>
<table border=”1 px solid black” width=”100%”>
<thead>
<th>firstname</th>
<th>lastname</th>
<th>Age</th>
</thead>
<tr>
<td>Amal</td>
<td>Danny</td>
<td>John</td>
Page 2
</tr>
<tr>
<td>Perera</td>
<td>Jackson</td>
<td>Doe</td>
</tr>
<tr>
<td>50</td>
<td>30</td>
<td>35</td>
</tr>
</table>
</body>
</html>
4) Write a code segment in HTML to get the following output. (Hint: Heading = H2, add a suitable
image to display in the browser in jpg format, image width =460px height =345px
Page 3
<html>
<head>
</head>
<body>
<h2>Alternative text</h2>
<img src=” image1.jpg” alt=” street image” width=”460px” height=”345px”>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>home</title>
</head>
<body>
<h2>Floating Images</h2>
<p>Float the image to the right:<br>
A paragraph with a floating image. A paragraph with a floating image. A
paragraph with a floating image. </p>
<marquee direction=” right”><img src=” image1.png” width=”42px”
height=”42px”></marquee>
<br>
<p>Float the image to the left:<br>
A paragraph with a floating image. A paragraph with a floating image. A paragraph
with a floating image. </p>
<marquee direction=” left”><img src=” image1.png” width=”42px”
height=”42px”></marquee>
</body>
</html>
Page 4
6) Create the following output using HTML
Name Age Telephone
Nimal 16 0771234567
Lihini 15 0711234567
Gopi 17 0761234567
Rahuman 16 0781234567
Shuqra 15 0771234567
Student Details
<html>
<head>
<title>home</title>
</head>
<body>
<table border=”1” width=”100%” height=”50px”>
<thead>
<th>name</th>
<th>age</th>
<th>telephone</th>
</thead>
<tbody>
<tr>
<td>nimal</td>
<td>lihini</td>
<td>Gopi</td>
<td>Rahuman</td>
<td>Shuqra</d>
</tr>
<tr>
<td>16</td>
<td>15</td>
<td>17</td>
<td>16</td>
<td>15</td>
</tr>
<tr>
<td>0771234567</td>
<td>0711234567</td>
<td>0761234567</td>
<td>0781234567</td>
<td>0771234567</td>
</tr>
</tbody>
<tfoot>
<td>student details</td>
</tfoot>
</table>
</body>
</html>
Page 5
Page 6