diff options
| author | Saumit Dinesan <justsaumit@protonmail.com> | 2023-08-17 11:15:53 +0530 |
|---|---|---|
| committer | Saumit Dinesan <justsaumit@protonmail.com> | 2023-08-17 11:15:53 +0530 |
| commit | fc248155864bb83177606b468c7e8eb8344eeba7 (patch) | |
| tree | f7b0ab71afc1e314e2b8f7539e4d99424e3a242d | |
| parent | defb19e922bb09e52c495a9393f35479d48b1203 (diff) | |
Lab02: Create College Events website make use of HTML Tables
| -rw-r--r-- | Lab02/index.html | 113 | ||||
| -rw-r--r-- | Lab02/style.css | 52 |
2 files changed, 165 insertions, 0 deletions
diff --git a/Lab02/index.html b/Lab02/index.html new file mode 100644 index 0000000..1abcef7 --- /dev/null +++ b/Lab02/index.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="style.css"> + <title>Using Tables</title> +</head> +<body> + <h1>College Events</h1> + <table id="table1"> + <caption> + The following table showcases the Upcoming Events + </caption> + <thead> + <tr> + <th>Sr. No</th> + <th>Date</th> + <th>Event</th> + <th>Location</th> + <th>Time</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>01.</td> + <td>August 09, 2023</td> + <td>Back to College Session</td> + <td>Auditorium</td> + <td>10AM IST</td> + <td>Meet teachers and learn about the upcoming college year</td> + </tr> + <tr> + <td>02.</td> + <td>August 16, 2023</td> + <td>Tech Adrishta 2023 Launch Event</td> + <td>Amphi Theatre</td> + <td>6PM IST</td> + <td>Join us for the exciting launch of our renowned tech event</td> + </tr> + <tr> + <td>03.</td> + <td>September 12, 2023</td> + <td>Fall Festival</td> + <td>Open Ground</td> + <td>6PM IST</td> + <td>Join us for games, food, and fun to celebrate the Fall Festival</td> + </tr> + <tr> + <td>04.</td> + <td>October 31, 2023</td> + <td>Halloween Costume Contest</td> + <td>Gymnasium</td> + <td>6PM IST</td> + <td>Show off your creative costumes and win prizes!</td> + </tr> + </tbody> + </table> + <br> + <br> + <table id="table2"> + <caption> + The following table showcases the allocated budgets for Upcoming Events + </caption> + <thead> + <tr> + <th>Sr. No</th> + <th>Date</th> + <th>Event</th> + <th>Description</th> + <th>Budget (Rs)</th> + </tr> + <thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td> 13,000</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>01.</td> + <td>August 09, 2023</td> + <td>Back to College Session</td> + <td>Meet teachers and learn about the upcoming college year</td> + <td>2,000</td> + </tr> + <tr> + <td>02.</td> + <td>August 16, 2023</td> + <td>Tech Adrishta Launch Event</td> + <td>Join us for games, food, and fun to celebrate the Fall Festival</td> + <td>2,000</td> + </tr> + <tr> + <td>03.</td> + <td>September 12, 2023</td> + <td>Fall Festival</td> + <td>Join us for games, food, and fun to celebrate the Fall Festival</td> + <td>4,000</td> + </tr> + <tr> + <td>04.</td> + <td>October 31, 2023</td> + <td>Halloween Costume Contest</td> + <td>Show off your creative costumes and win prizes!</td> + <td>5,000</td> + </tr> + </tbody> + </table> +</body> +</html>
\ No newline at end of file diff --git a/Lab02/style.css b/Lab02/style.css new file mode 100644 index 0000000..21946af --- /dev/null +++ b/Lab02/style.css @@ -0,0 +1,52 @@ +html { + font-family: sans-serif; + text-align: center; + background-color: whitesmoke; + } + +h1 { + text-decoration: underline; +} + +table{ + border-collapse: collapse; + letter-spacing: 1px; + font-size: 0.8rem; + margin-left: auto; + margin-right: auto; +} + +#table1{ + border: 2px solid rgb(255, 0, 0); +} +#table2{ + border: 2px solid rgb(16, 245, 16); +} +thead{ + font-size: 15px; +} +tbody{ + font-style: normal; +} +tfoot{ + border-top: 2px solid rgb(0, 0, 0); +} + +td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; +} + +th { + background-color: rgb(235,235,235); +} + +td { + text-align: center; + background-color: white; +} + +caption { + font-size: 15px; + padding: 10px; +}
\ No newline at end of file |