Unit IV - Lesson 2 | Codetantra HTML
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;
}