Lecture No 3
Table Tag:
Colspan:
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1" align="center" width="50%" cellpadding="10px" cellspacing="0px">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td colspan="2">C</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>
RowsSpan
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1" align="center" width="50%" cellpadding="10px" cellspacing="0px">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td rowspan="2">C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
</table>
</body>
</html>
Caption:
<caption>
My Table
</caption>
Website Layout
<!DOCTYPE html>
<html>
<head>
<title>Table Tag III</title>
</head>
<body>
<table border="1" width="300px" cellspacing="0" cellpadding="10px" align="center">
<tr>
<th>
Name
</th>
<th>
Class
</th>
<th>
Percentage
</th>
</tr>
<tr>
<td>Peter</td>
<td>12th</td>
<td>84%</td>
</tr>
<tr>
<td>John</td>
<td>12th</td>
<td>72%</td>
</tr>
<tr>
<td>Merry</td>
<td>12th</td>
<td>77%</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Thead Tbody Tfoot Example</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>English</td>
<td>80</td>
</tr>
<tr>
<td>Math</td>
<td>75</td>
</tr>
<tr>
<td>Science</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total Marks</th>
<th>225</th>
</tr>
</tfoot>
</table>
</body>
</html>
HTML Iframe Tag
<html>
<head>
<title>Iframe Tag</title>
</head>
<body>
<iframe src="http://www.google.com" align="left" frameborder="1"
width="500px"></iframe>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat mi ac leo.
</p>
</body>
</html>
HTML Audio Tag
<html>
<head>
<title>Audio Tag</title>
</head>
<body>
<audio controls>
<source src="audio/music.mp3" type="audio/mpeg" />
</audio>
</body>
</html>
Html Video tag
<!DOCTYPE html>
<html>
<head>
<title>Video Tag Example</title>
</head>
<body>
<h2>HTML5 Video Example</h2>
<video width="600" height="340" controls>
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.ogg" type="video/ogg">
<source src="videos/sample.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Form Tag
<!DOCTYPE html>
<html>
<head>
<title>Form Tags</title>
</head>
<body>
<form action="" method="post">
<label for="fname">Name</label>
<input type="text" id="fname" name="fname" value="" placeholder="Enter your name"
/> <br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" /> <br><br>
<label>Gender</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="female">Female</label> <br><br>
<label for="hobby">Hobbies</label>
<input type="checkbox" id="music" name="hobby" value="music" />
<label for="music">Music</label>
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label> <br><br>
<
<label for="country">Select Country</label>
<select id="country" name="country">
<option value="">--Choose your country--</option>
<option value="pakistan">Pakistan</option>
<option value="india">India</option>
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select> <br><br>
<label for="message">Message</label>
<textarea id="message" name="message" rows="50" cols="60"></textarea> <br><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
<label> upload File</labe>
<input type=”file” name=””/>
