css tables

PHOTO EMBED

Wed Sep 18 2024 08:13:07 GMT+0000 (Coordinated Universal Time)

Saved by @osama911 

<!-- 1 -->
<!DOCTYPE html>
<html>
<head>
<style>
/*Fill you text here*/
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #000000;
    padding: 8px;
    text-align: left;
}

thead th {
    background-color: #f2f2f2;
}

tbody tr:nth-child(odd) {
    background-color: #b3edcf;
}

tbody tr:nth-child(even) {
    background-color: #e0f0e9;
}
</style>
</head>
<body>
<center>
  <h1>Event Schedule</h1>
  <div>          
		<table>
		<tr><th>Name</th><th>Venue</th><th>Start Time</th><th>End Time</th></tr>
		<tr><td>Corporate Events</td><td>RVS Hall, 3rd Floor</td><td>4.5.2018 9.00AM</td><td>4.5.2018 12.00AM</td></tr>
		<tr><td>Wedding Planning</td><td>Sri Plus Thirumana Mahal</td><td>1.1.2019 7.00AM</td><td>1.1.2019 9.00AM</td></tr>
		<tr><td>Product Launches</td><td>RVS Hall, 2nd Floor</td><td>4.5.2018 2.00PM</td><td>4.5.2018 5.00PM</td></tr>
		<tr><td>Seminor on Cloud Computing</td><td>Vivekanandha Auditorium</td><td>18.12.2018 8.30AM</td><td>18.12.2018 1.00PM</td></tr>
		<tr><td>Heavenly Fashion</td><td>Bath Record Office</td><td>21.3.2018 5.00PM</td><td>21.3.2018 8.00PM</td></tr>
		<tr><td>Gala Dinners</td><td>City Tower, Hall No 2</td><td>12.1.2018 7.00 PM</td><td>12.1.2018 10.00 PM</td></tr>
		<tr><td>Award Ceremony</td><td>Hindustan Auditorium</td><td>11.11.2018 9.00 AM</td><td>11.11.2018 5.00 PM</td></tr>
		</table>
  </div>
</center>
</body>
</html>

<!-- 2 -->

<!DOCTYPE html>
<html>
<head>
    <title>Wedding Planner</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            padding: 0px;
        }

        .space1 {
            margin: 150px 0px 0px 80px;
            background-color: lightgreen;
        }

        .space2 {
            margin: 150px 80px 0px 0px;
            background-color: lightblue;
        }

        .space3 {
            margin: 0px 0px 150px 80px;
            background-color: yellow;
        }

        .space4 {
            margin: 0px 80px 150px 0px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><div class="space1">A wedding planner is a professional who assists with the design, planning and management of a client's wedding.</div></td>
            <td><div class="space2">A wedding planner is a professional who assists with the design, planning and management of a client's wedding.</div></td>
        </tr>
        <tr>
            <td><div class="space3">A wedding planner is a professional who assists with the design, planning and management of a client's wedding.</div></td>
            <td><div class="space4">A wedding planner is a professional who assists with the design, planning and management of a client's wedding</div></td>
        </tr>
    </table>
</body>
</html>
content_copyCOPY