Scribd
Upload
4 views5 pages

DOCTYPE HTML

The document is an HTML file containing multiple styled tables displaying various data. It includes a table of names and ages, a table of first and last names with points, and a weekly schedule table with empty columns. The tables are styled with borders and alternating row colors for better readability.

Uploaded by

Micheal Moheb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views5 pages

DOCTYPE HTML

The document is an HTML file containing multiple styled tables displaying various data. It includes a table of names and ages, a table of first and last names with points, and a weekly schedule table with empty columns. The tables are styled with borders and alternating row colors for better readability.

Uploaded by

Micheal Moheb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html>
<head>
<style>
.table1 {
border: 2px solid rgb(245, 5, 5);
padding: 30px;
margin-left: auto;
margin-right: auto;
}
.table2 {
border: 2px solid rgb(245, 5, 5);
padding: 100px;
margin-left: auto;
margin-right: auto;
}
.table3 {
border: 2px solid rgb(245, 5, 5);
padding: 30px;
margin-left: auto;
margin-right: auto;
}
.table4 {
border: 2px solid rgb(245, 5, 5);
padding: 30px;
margin-left: auto;
margin-right: auto;
}
.table3{
border-collapse: collapse;
width:50%;
}
.table3 th,
.table3 td {
border: 1px solid black;
border-collapse: collapse;
}
.table1 {
border-collapse: collapse;
width: 50%;
}

.table1 th,
.table1 td {
border: 1px solid black;
}

.table2 {
border-collapse: collapse;
width: 50%;
}

.table2 th,
.table2 td {
text-align:left;
padding: 8px;
}
.table2 tr:nth-child(even) {background-color: rgb(202, 243, 243);}
.table4{
border-collapse: collapse;
width: 30%;
}
.table4 th,
.table4 td {
border: 1px solid black;
border-collapse: collapse;
}.table4 tr:nth-child(even) {background-color: rgb(203, 235, 235);}
.table4 td:nth-child(even) {background-color: rgb(190, 235, 235);}
.empty-column {
height: 20px;
}
</style>
</head>
<body>
<table class="table3" style="width:50%" >
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
<br>
<table class="table1">
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
<br>
<div style="overflow-x: auto;">
<table class="table2">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>brown</td>
<td>$250</td>
</tr>
</table>
</div>
<br>
<table class="table4" style="width:50%">
<tr>
<th rowspan="1">MON</th>
<th>TUE</th>
<th rowspan="1">WED</th>
<th rowspan="1">THU</th>
<th>FRI</th>
<th>SAT</th>
<th rowspan="1">SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="empty-column"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="empty-column"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td class="empty-column"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="empty-column"> </td>
</tr>
</table>
</body>
</html>

You might also like