Untitled

<!doctype html>
<html><head>
<meta charset="utf-8">
<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>
<h2>Welcome to my Website</h2>
<h2>List of Subjects</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p><ul type="circle">
		<li>PBD01</li>
		<li>OOP10</li>
		<li>DMS410</li>
		<li>NETC</li>
		<li>SEC01</li>
		<li>ENG01</li>
</ul></p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p><img src="Batman-Logo-Wallpaper-200x200.jpg" width="318" height="240" alt=""/></p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p><table width="250" border="5">
	  <tbody>
	    <tr>
	      <td>Sample 1</td>
	      <td>Sample 2</td>
	      <td>Sample 3</td>
        </tr>
	    <tr>
	      <td>&nbsp;</td>
	      <td>&nbsp;</td>
	      <td>&nbsp;</td>
        </tr>
	    <tr>
	      <td>&nbsp;</td>
	      <td>&nbsp;</td>
	      <td>&nbsp;</td>
        </tr>
      </tbody></p>
  </div>
</div>

<head>

<body>

<h1>This is my Website</h1>
	<h2>List of Subjects</h2>


</table>
</body>
</html>