HTML માં ટેબલ બનાવવા માટેના અલગ-અલગ કોડિંગ આ પ્રોગ્રામના ઉદાહરણ છે, જેમાં તત્વોનો ઉપયોગ કરીને વિવિધ પ્રકારના ટેબલ બનાવવામાં આવ્યા છે.
1. બેઝિક ટેબલ
<!DOCTYPE html>
<html>
<head>
<title>Basic Table</title>
</head>
<body>
<table border=”1″>
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Anita</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Rahul</td>
<td>30</td>
</tr>
</table>
</body>
</html>
2. ટેબલ હેડર અને ફૂટર સાથે
<!DOCTYPE html>
<html>
<head>
<title>Table with Header and Footer</title>
</head>
<body>
<table border=”1″>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”2″>Total: $100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Laptop</td>
<td>$80</td>
</tr>
<tr>
<td>Mouse</td>
<td>$20</td>
</tr>
</tbody>
</table>
</body>
</html>
3. ટેબલ સ્પેન સાથે (Rowspan)
<!DOCTYPE html>
<html>
<head>
<title>Table with Rowspan</title>
</head>
<body>
<table border=”1″>
<tr>
<th rowspan=”2″>Name</th>
<th>Subject 1</th>
<th>Subject 2</th>
</tr>
<tr>
<td>Maths</td>
<td>Science</td>
</tr>
<tr>
<td>Anita</td>
<td>85</td>
<td>90</td>
</tr>
</table>
</body>
</html>
4. ટેબલ કોલસ્પેન સાથે (Colspan)
<!DOCTYPE html>
<html>
<head>
<title>Table with Colspan</title>
</head>
<body>
<table border=”1″>
<tr>
<th colspan=”2″>Contact Information</th>
</tr>
<tr>
<td>Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Anita</td>
<td>1234567890</td>
</tr>
</table>
</body>
</html>
5. સેન્ટર કરવામાં આવેલા ટેબલ
<!DOCTYPE html>
<html>
<head>
<title>Centered Table</title>
<style>
table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Anita</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Rahul</td>
<td>Delhi</td>
</tr>
</table>
</body>
</html>
6. જ્યાદા બોર્ડર વાળા ટેબલ
<!DOCTYPE html>
<html>
<head>
<title>Table with More Borders</title>
<style>
table, th, td {
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Book</td>
<td>$10</td>
</tr>
<tr>
<td>Pen</td>
<td>$2</td>
</tr>
</table>
</body>
</html>
7. ટેબલ સેલ સ્પેસિંગ અને પેડિંગ સાથે
<!DOCTYPE html>
<html>
<head>
<title>Table with Cell Spacing and Padding</title>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
th, td {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Anita</td>
<td>25</td>
</tr>
<tr>
<td>Rahul</td>
<td>30</td>
</tr>
</table>
</body>
</html>
8. બેકગ્રાઉન્ડ કલર સાથે ટેબલ
<!DOCTYPE html>
<html>
<head>
<title>Table with Background Color</title>
</head>
<body>
<table border=”1″ style=”background-color: lightblue;”>
<tr>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>Paris</td>
<td>France</td>
</tr>
</table>
</body>
</html>
9. ટેબલ ઓલ્ટરનેટ રો કલરિંગ સાથે
<!DOCTYPE html>
<html>
<head>
<title>Table with Alternate Row Coloring</title>
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Pen</td>
<td>$1</td>
</tr>
<tr>
<td>Notebook</td>
<td>$5</td>
</tr>
<tr>
<td>Eraser</td>
<td>$0.5</td>
</tr>
</table>
</body>
</html>
10. ટેબલમાં સેન્ટર અને બોલ્ડ કન્ટેન્ટ
<!DOCTYPE html>
<html>
<head>
<title>Table with Centered and Bold Content</title>
<style>
th, td {
text-align: center;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Maths</td>
<td>90</td>
</tr>
<tr>
<td>Science</td>
<td>85</td>
</tr>
</table>
</body>
</html>
આ દરેક પ્રોગ્રામ HTML ટેબલ્સને અલગ-અલગ રીતે બતાવે છે, જેમ કે rowspan, colspan, બોર્ડર્સ, બેકગ્રાઉન્ડ કલર, અને વધુ.
