midhul, tables are not intended for this sort of task. tables are for displaying tabular data. using tables for page layout is poor practice, difficult to maintain, less accessible, and can lead to other problems as well.
Layout should be managed using CSS.
manhazm, am I correct that you're not asking about how to make the layout itself, but how to make the page switch between the two? use javascript. the easiest method would be to use the button to switch class names on the product display area, and have css rules that arrange the products accordingly.
example: http://www.custom-anything.com/sand/switching.html
here, I use jQuery to do the class switching. (javascript isn't my strongest suit, so I'm sure it could be done better; but this is functional and gives you an idea of what needs to be accomplished.) the source code looks like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>switching layouts</title>
<style>
#area{ width: 600px; margin: 0 auto; border: 1px solid blue; }
#button{ height: 30px; width: 150px; margin: 20px auto; background: yellow; border: 1px outset orange; }
.product{ background: gray; margin: 5px; }
.inline{ display: inline-block; width: 185px; zoom: 1; _display: inline; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
</head>
<body>
<div id="area">
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
<div class="product">This is a product box.</div>
</div>
<div id="button">Click!</div>
<script>
$("#button").click(function(){
$(".product").each(function(){
$(this).toggleClass("inline");
});
});
</script>
</body>
</html>play around with it.