Templates - Hide Outer Tables?

One of the features of a website I'm working on is that you can "maximize" the contents of the page, basically removing all the outer elements of the page, navigation, banners, etc.

This is currently done in what seems like the worst possible way:

<%
if (shouldBreakFrame)
{
%><!--#include file="header.include" --><%
}
%>
// Contents of page here
<%
if (shouldBreakFrame)
{
%><!--#include file="footer.include" --><%
}
%>

The footer is basically just closing tags from the header.

So I want to clean this up and am working on a master page, but I'm not sure how to properly "remove" the HTML elements that wrap the contents when we want to maximize the page. It would be easy for tags that open/close on one side or the other of the content, but what about div/tables that open at the top and close at the bottom?

Edit: To clarify exactly what the output looks like and why I can't just "hide" the elements with JavaScript code or the .Visible property here is what the output might look like and what it should look like after the surrounding elements are hidden:

<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>
Page content here
</td>
</tr>
</table>

And after hiding stuff all that is left is Page content here.

So if I just hide the table, the content would disappear as well.