Codes For Creating Tables And An Output

The HTML Code

<head>
<link rel="stylesheet"type="text/css"href="fontfamily.css"/>
</head>
<table>
<tr>
<td rowspan="2"></td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td class="sun"><img src="sunny.jpeg"
                 style="padding-left:17px">Sunny</td>
<td class="sun"><img src="partlycloudy.jpeg"
                 style="padding-left:17px">Partly Cloudy</td>
<td class="sun"><img src="mostlysunny.jpeg"
                 style="padding-left:17px">Mostly Sunny</td>
<td class="sun"><img src="cloudy.jpeg"
                 style="padding-left:17px">Cloudy</td>
<td class="sun"><img src="sunny.jpeg"
                 style="padding-left:17px">Sunny</td>
</tr>
<tr>
<td class="td1">Temp.</td>
<td class="td1">31&deg</td>
<td class="td1">29&deg</td>
<td class="td1">30&deg</td>
<td class="td1">26&deg</td>
<td class="td1">32&deg</td>
</tr>
<tr>
<td>WINDS</td>
<td>SW @ 10mph</td>
<td>NE @ 11mph</td>
<td>SE @ 10mph/td>
<td>NW @ 9mph</td>
<td>SW @ 10mph</td>
</tr>
<tr>
<td>Chances of<br>Rain</td>
<td>0%</td>
<td>65%</td>
<td>20%</td>
<td>90%</td>
<td>2%</td>
</tr>
<tr>
<td>Sunrise</td>
<td>5:30Am</td>
<td>6:00AM</td>
<td>5:25AM</td>
<td>6:15AM</td>
<td>5:45AM</td>
</tr>
<tr>
<td>Sunset</td>
<td>6:00PM</td>
<td>5:45PM</td>
<td>6:15PM</td>
<td>5:40PM</td>
<td>6:25PM</td>
</tr>

The CSS Code

table{border-style:none;}
td{border-style:solid;border-width:1px;border-color:red;}
th{border-style:solid;border-width:1px;border-color:red;}
th{width:130px;height:30px;padding:5px;}
td{width:130px;height:30px;padding:5px;text-align:center;vertical-align:middle;}
.sun{height:130px;padding:3px;}

The Output



Comments

  1. Wow thankyou for sharing this job will done๐Ÿ’ž

    ReplyDelete
  2. It has a great work and nicely done ✅ keep up the good work ๐Ÿ‘๐Ÿผ

    ReplyDelete
  3. Hmmm?still needs work,but for a highschool study this is excellent,a job well done

    ReplyDelete

Post a Comment