Using a table to create rows and columns recreate the below image in HTML and CS
ID: 3746404 • Letter: U
Question
Using a table to create rows and columns recreate the below image in HTML and CSS. Your table will need to use both colspan and rowspan. The white border can be black in the html table
First rowspan and colspan looked like this:
Added a rowspan and colspan to the cell under it and it did this:
The scale looks off but the table and image are both 656x380
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Tables</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
body{
font-family: monospace;
}
table{
width: 655px;
height: 381px;
border: 35px solid #000;
border-collapse: collapse;
}
td{
border: 20px solid #000;
padding: 10px;
}
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Tables</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<table>
<tbody>
<tr class="first-row">
<td class="hidden-column"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hidden-column"></td>
</tr>
<tr>
<td class="hidden-column" ></td>
<td rowspan="2" colspan="2" class="box-1"></td>
<td rowspan="2" colspan="6" class="box-2"></td>
<td class="hidden-column"></td>
</tr>
<tr>
<td class="hidden-column"></td>
<td class="hidden-column"></td>
</tr>
<tr>
<td class="hidden-column"></td>
<td rowspan="2" colspan="2" class="box-3"></td>
<td rowspan="2" colspan="5" class="box-4"></td>
<td class="box-5"></td>
<td class="hidden-column"></td>
</tr>
<tr>
<td class="hidden-column"></td>
<td class="box-6"></td>
<td class="hidden-column"></td>
</tr>
<tr class="last-row">
<td class="hidden-column"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hidden-column"></td>
</tr>
</tbody>
</table>
</body>
</html>
<style>
thead{
display:none;
}
body{
font-family: monospace;
}
table{
width: 655px;
height: 381px;
border: 15px solid #fcebbf;
border-spacing: 0px !important;
}
td{
border: 10px solid #000;
padding: 10px;
}
.first-row, .last-row{
visibility:hidden;
}
.first-row td, .last-row td{
border-top: 0px;
border-bottom: 0px;
}
.hidden-column{
visibility:hidden;
border-left: 0px;
border-right: 0px;
}
.box-1{
background-color: #fff4d8;
border-left: none;
border-top: none;
}
.box-2{
background-color: #eb002b;
border-right: none;
border-top: none;
}
.box-3{
background-color: #037ad6;
border-left: none;
border-bottom: none;
}
.box-4{
background-color: #fff4d8;
border-bottom: none;
}
.box-5{
background-color: #fff4d8;
border-right: none;
border-bottom: none;
}
.box-6{
background-color: #fdd503;
border-right: none;
border-bottom: none;
}
</style>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.