Home
1st Semester
CodeTantra

Unit IV - Lesson 2

4.2.1. table, thead, tr, th

<!doctype html>
<html>
	<body>
		<table border="1">
			<!-- Write your code below -->
			<thead>
				<tr>
					<th>Name</th>
					<th>Role</th>
					<th>Monthly Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Rahul</td>
					<td>CEO</td>
					<td>100000</td>
				</tr>
				<tr>
			    	<td>Ram</td>
					<td>Backend Developer</td>
					<td>60000</td>
		    	</tr>
		    	<tr>
			    	<td>Rakesh</td>
					<td>Frontend Developer</td>
					<td>40000</td>
		    	</tr>
			</tbody>
		</table>
	</body>
</html>

4.2.2. tbody

<!doctype html>
<html>
	<body>
		<table border="1">
			<!-- Write your code below -->
			<tbody>
				<tr>
					<td>1</td>
					<td>John</td>
					<td>18 yrs</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Lisa</td>
					<td>20 yrs</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Susan</td>
					<td>30 yrs</td>
			</tbody>
		</table>
	</body>
</html>

4.2.3. tfoot

<!doctype html>
<html>
	<body>
		<!-- Write your code below -->
		<table border="1">
			<thead>
				<tr>
					<th>Items</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Book</td>
					<td>40</td>
				</tr>
				<tr>
					<td>Pen</td>
					<td>20</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>Total</td>
					<td>60</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

4.2.4. caption

<!doctype html>
<html>
	<body>
		<!-- Write your code below -->
		<table border="1">
			<caption>User Details</caption>
			<thead>
				<tr>
					<th>Name</th>
					<th>Blood Group</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Abhi</td>
					<td>A+</td>
				</tr>
				<tr>
					<td>Ram</td>
					<td>B+</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

4.2.5. rowspan, colspan

<!doctype html>
<html>
	<body>
		<!-- Write your code below -->
		<table border="1">
			<caption>Payment Details</caption>
			<thead>
				<tr>
					<th>Item</th>
					<th>Quantity</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Pizza</td>
					<td>1</td>
					<td>50</td>
				</tr>
				<tr>
					<td>Burger</td>
					<td>2</td>
					<td>200</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2">Total Bill</td>
					<td>250</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

4.2.6. border-collapse

<!doctype html>
<html>
	<head>
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<table id="product-table">
			<!-- Write your code below -->
		<thead>
			<tr>
				<th>Product Name</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Apple Laptop</td>
				<td>70000</td>
			</tr>
			<tr>
				<td>Office Chair</td>
				<td>5000</td>
			</tr>
		</tbody>
		</table>
	</body>
</html>

#product-table {
	border: 1px solid black;
	border-collapse: collapse;
}
th, td {
	border: 1px solid black;
}

Post a Comment