Tables in HTML

Program 1: Basic HTML Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Basic Table</title>
</head>
<body>

<h1>Student Details</h1>

<table border="1">

    <tr>
        <th>Roll No</th>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>101</td>
        <td>Aman</td>
        <td>Web Development</td>
    </tr>

    <tr>
        <td>102</td>
        <td>Neha</td>
        <td>Graphic Design</td>
    </tr>

</table>

</body>
</html>

Program 2: Table with cellpadding and cellspacing

				
					<!DOCTYPE html>
<html>
<head>
    <title>Cell Padding and Spacing</title>
</head>
<body>

<h1>Employee Information</h1>

<table border="1" cellpadding="10" cellspacing="5">

    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Department</th>
    </tr>

    <tr>
        <td>1</td>
        <td>Ravi</td>
        <td>HR</td>
    </tr>

    <tr>
        <td>2</td>
        <td>Priya</td>
        <td>IT</td>
    </tr>

</table>

</body>
</html>

Program 3: Table with Background Color

				
					<!DOCTYPE html>
<html>
<head>
    <title>Colored Table</title>
</head>
<body>

<h1>Course List</h1>

<table border="1" bgcolor="lightyellow">

    <tr bgcolor="orange">
        <th>Course Name</th>
        <th>Duration</th>
        <th>Fees</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>1 Month</td>
        <td>2000</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>1 Month</td>
        <td>2500</td>
    </tr>

</table>

</body>
</html>

Program 4: Table with rowspan

				
					<!DOCTYPE html>
<html>
<head>
    <title>Rowspan Example</title>
</head>
<body>

<h1>Teacher Schedule</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Teacher</th>
        <th>Subject</th>
    </tr>

    <tr>
        <td rowspan="2">Mr. Sharma</td>
        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

</table>

</body>
</html>

Program 5: Table with colspan

				
					<!DOCTYPE html>
<html>
<head>
    <title>Colspan Example</title>
</head>
<body>

<h1>Student Marks</h1>

<table border="1" cellpadding="10">

    <tr>
        <th colspan="3">Semester Result</th>
    </tr>

    <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>Aman</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

</body>
</html>

Program 6: Table with rowspan and colspan

				
					<!DOCTYPE html>
<html>
<head>
    <title>Rowspan and Colspan</title>
</head>
<body>

<h1>Complex Table</h1>

<table border="1" cellpadding="10">

    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Marks</th>
    </tr>

    <tr>
        <th>Theory</th>
        <th>Practical</th>
    </tr>

    <tr>
        <td>Rohit</td>
        <td>80</td>
        <td>90</td>
    </tr>

</table>

</body>
</html>

Program 7: Timetable Using Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>School Timetable</title>
</head>
<body>

<h1>Weekly Timetable</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Day</th>
        <th>1st Period</th>
        <th>2nd Period</th>
        <th>3rd Period</th>
    </tr>

    <tr>
        <td>Monday</td>
        <td>Math</td>
        <td>Science</td>
        <td>English</td>
    </tr>

    <tr>
        <td>Tuesday</td>
        <td>Computer</td>
        <td>Hindi</td>
        <td>Sports</td>
    </tr>

</table>

</body>
</html>

Program 8: Table with Caption

				
					<!DOCTYPE html>
<html>
<head>
    <title>Table Caption</title>
</head>
<body>

<table border="1" cellpadding="10">

    <caption>
        <h2>Student Attendance Report</h2>
    </caption>

    <tr>
        <th>Name</th>
        <th>Attendance</th>
    </tr>

    <tr>
        <td>Neha</td>
        <td>95%</td>
    </tr>

    <tr>
        <td>Aman</td>
        <td>90%</td>
    </tr>

</table>

</body>
</html>

Program 9: Table with Width and Height

				
					<!DOCTYPE html>
<html>
<head>
    <title>Width and Height</title>
</head>
<body>

<h1>Product Details</h1>

<table border="1" width="70%" height="200">

    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>50000</td>
    </tr>

    <tr>
        <td>Mobile</td>
        <td>20000</td>
    </tr>

</table>

</body>
</html>

Program 10: Table with Alignment

				
					<!DOCTYPE html>
<html>
<head>
    <title>Alignment Example</title>
</head>
<body>

<h1>Text Alignment in Table</h1>

<table border="1" cellpadding="15" width="60%">

    <tr>
        <th align="left">Name</th>
        <th align="center">Course</th>
        <th align="right">Fees</th>
    </tr>

    <tr>
        <td align="left">Aman</td>
        <td align="center">HTML</td>
        <td align="right">3000</td>
    </tr>

</table>

</body>
</html>

Program 11: Nested Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Nested Table</title>
</head>
<body>

<h1>Nested Table Example</h1>

<table border="1" cellpadding="10">

    <tr>
        <td>

            <table border="1" cellpadding="5">

                <tr>
                    <th>Subject</th>
                    <th>Marks</th>
                </tr>

                <tr>
                    <td>HTML</td>
                    <td>85</td>
                </tr>

            </table>

        </td>
    </tr>

</table>

</body>
</html>

Program 12: Table with Image

				
					<!DOCTYPE html>
<html>
<head>
    <title>Table with Image</title>
</head>
<body>

<h1>Student Profile</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Name</th>
        <th>Photo</th>
    </tr>

    <tr>
        <td>Aman</td>
        <td>
            <img decoding="async" src="student.jpg" width="100" height="100">
        </td>
    </tr>

</table>

</body>
</html>

Program 13: Table with Links

				
					<!DOCTYPE html>
<html>
<head>
    <title>Table with Links</title>
</head>
<body>

<h1>Useful Websites</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Website</th>
        <th>Link</th>
    </tr>

    <tr>
        <td>Google</td>
        <td>
            <a href="https://www.google.com" target="_blank" rel="noopener">
                Visit Google
            </a>
        </td>
    </tr>

    <tr>
        <td>YouTube</td>
        <td>
            <a href="https://www.youtube.com" target="_blank" rel="noopener">
                Visit YouTube
            </a>
        </td>
    </tr>

</table>

</body>
</html>

Program 14: Marksheet Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Marksheet</title>
</head>
<body>

<h1>Student Marksheet</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Subject</th>
        <th>Maximum Marks</th>
        <th>Obtained Marks</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>100</td>
        <td>85</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>100</td>
        <td>90</td>
    </tr>

    <tr>
        <td>JavaScript</td>
        <td>100</td>
        <td>88</td>
    </tr>

    <tr>
        <th colspan="2">Total</th>
        <th>263</th>
    </tr>

</table>

</body>
</html>

Program 15: Employee Salary Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Employee Salary</title>
</head>
<body>

<h1>Employee Salary Report</h1>

<table border="1" cellpadding="10" cellspacing="5">

    <tr bgcolor="lightblue">
        <th>Employee ID</th>
        <th>Name</th>
        <th>Department</th>
        <th>Salary</th>
    </tr>

    <tr>
        <td>EMP101</td>
        <td>Rahul</td>
        <td>IT</td>
        <td>45000</td>
    </tr>

    <tr>
        <td>EMP102</td>
        <td>Priya</td>
        <td>HR</td>
        <td>40000</td>
    </tr>

    <tr>
        <td>EMP103</td>
        <td>Neha</td>
        <td>Accounts</td>
        <td>42000</td>
    </tr>

</table>

</body>
</html>

Program 16: HTML5 Table with thead, tbody, and tfoot

				
					<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Table</title>
</head>
<body>

<h1>Sales Report</h1>

<table border="1" cellpadding="10">

    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>January</td>
            <td>50000</td>
        </tr>

        <tr>
            <td>February</td>
            <td>65000</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Total</th>
            <th>115000</th>
        </tr>
    </tfoot>

</table>

</body>
</html>

Program 17: Student Result Table with Percentage

				
					<!DOCTYPE html>
<html>
<head>
    <title>Result Table</title>
</head>
<body>

<h1>Student Result</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>Name</th>
        <th>HTML</th>
        <th>CSS</th>
        <th>JavaScript</th>
        <th>Percentage</th>
    </tr>

    <tr>
        <td>Aman</td>
        <td>80</td>
        <td>85</td>
        <td>90</td>
        <td>85%</td>
    </tr>

    <tr>
        <td>Neha</td>
        <td>88</td>
        <td>92</td>
        <td>95</td>
        <td>91%</td>
    </tr>

</table>

</body>
</html>

Program 18: Bus Reservation Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Bus Reservation</title>
</head>
<body>

<h1>Bus Seat Reservation</h1>

<table border="1" cellpadding="15">

    <tr bgcolor="lightgreen">
        <th>Seat No</th>
        <th>Status</th>
    </tr>

    <tr>
        <td>A1</td>
        <td>Booked</td>
    </tr>

    <tr>
        <td>A2</td>
        <td>Available</td>
    </tr>

    <tr>
        <td>A3</td>
        <td>Booked</td>
    </tr>

</table>

</body>
</html>

Program 19: Comparison Table

				
					<!DOCTYPE html>
<html>
<head>
    <title>Comparison Table</title>
</head>
<body>

<h1>Laptop Comparison</h1>

<table border="1" cellpadding="10">

    <tr bgcolor="lightgray">
        <th>Feature</th>
        <th>Laptop A</th>
        <th>Laptop B</th>
    </tr>

    <tr>
        <td>RAM</td>
        <td>8 GB</td>
        <td>16 GB</td>
    </tr>

    <tr>
        <td>Storage</td>
        <td>512 GB SSD</td>
        <td>1 TB SSD</td>
    </tr>

    <tr>
        <td>Price</td>
        <td>55000</td>
        <td>75000</td>
    </tr>

</table>

</body>
</html>

Program 20: Complete Table Demonstration

				
					<!DOCTYPE html>
<html>
<head>
    <title>Complete Table Example</title>
</head>
<body>

<h1 align="center">Complete HTML Table Demonstration</h1>

<table border="2"
       cellpadding="10"
       cellspacing="5"
       width="80%"
       align="center"
       bgcolor="lightyellow">

    <caption>
        <h2>Student Information Table</h2>
    </caption>

    <tr bgcolor="orange">
        <th rowspan="2">Roll No</th>
        <th rowspan="2">Name</th>
        <th colspan="3">Marks</th>
    </tr>

    <tr bgcolor="lightblue">
        <th>HTML</th>
        <th>CSS</th>
        <th>JavaScript</th>
    </tr>

    <tr>
        <td>101</td>
        <td>Aman</td>
        <td align="center">80</td>
        <td align="center">85</td>
        <td align="center">90</td>
    </tr>

    <tr>
        <td>102</td>
        <td>Neha</td>
        <td align="center">88</td>
        <td align="center">92</td>
        <td align="center">95</td>
    </tr>

    <tr bgcolor="lightgreen">
        <th colspan="2">Average</th>
        <th>84</th>
        <th>88</th>
        <th>92</th>
    </tr>

</table>

</body>
</html>