Nickolas Nickolas - 2 months ago 9
HTML Question

HTML tables challenge

I would greatly appreciate help figuring this out. I'm working on a HTML table puzzle trying to match this image here:

enter image description here

I have everything good, make the red pillars on both sides using the rowspan tag, have the 1st, 2nd, 4th, and 5th row good, but the third row, with the three purple rectangles I just can't get to center themselves and resize to the smaller size without breaking the table.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
body { background-color:black;}
table { background-color:white;
margin: 0px auto;
width:1000px;
height:500px;}
td { width:200px;
height:100px;
}


</style>


</head>

<body>

<table border="2px solid white">
<tr>
<td bgcolor="red" rowspan="5" align="left"></td>
<td bgcolor="white"></td>

<td bgcolor="green" colspan="2" align="center" colspan="2"></td>

<td bgcolor="white"></td>
<td bgcolor="red" rowspan="5" align="right"></td>
</tr>

<tr>
<td bgcolor="blue" colspan="4"></td>
</tr>

<tr>



<td bgcolor="purple"></td>

<td bgcolor="purple"></td>

<td bgcolor="purple"></td>


</tr>

<tr>
<td bgcolor="green" colspan="4"></td>
</tr>

<tr>
<td bgcolor="purple" colspan="4"></td>
</tr>
</table>

</body>
</html>

Answer

You need more columns:

enter image description here

body {
  background-color: black;
}
table {
  background-color: white;
  margin: 0px auto;
  width: 1000px;
  height: 500px;
  border: 2px solid white;
}
td {
  width: 200px;
  height: 100px;
}
.red    { background-color: red    }
.white  { background-color: white  }
.green  { background-color: green  }
.blue   { background-color: blue   }
.purple { background-color: purple }
<table>
  <tr>
    <td class="red"                rowspan="5"></td>
    <td class="white"  colspan="2"            ></td>
    <td class="green"  colspan="3"            ></td>
    <td class="white"  colspan="2"            ></td>
    <td class="red"                rowspan="5"></td>
  </tr>
  <tr>
    <td class="blue"   colspan="7"            ></td>
  </tr>
  <tr>
    <td class="white"                         ></td>
    <td class="purple"                        ></td>
    <td class="white"                         ></td>
    <td class="purple"                        ></td>
    <td class="white"                         ></td>
    <td class="purple"                        ></td>
    <td class="white"                         ></td>
  </tr>
  <tr>
    <td class="green"  colspan="7"            ></td>
  </tr>
  <tr>
    <td class="purple" colspan="7"            ></td>
  </tr>
</table>