I am working with a simple table-based layout that uses iFrames as depicted in the example below. This code is rendering well in all modern browsers. The iFrames are usually filled with long tables of data, but there is no odd behavior or clipping.
My concern is that it LOOKS like a really bad hack to me. Table-based layout evils aside, should I be worried about deprecation of all the width=”100%” height=”100%” attributes to HTML and iFrame tags?
I know that CSS can do most, if not all of this, but I don’t want to use float hacks and I haven’t been able to nail anything down that works in all modern browsers.
To be clear, I am looking for opinions and suggestions as to whether this solution is adequate for the next few years, or whether I should go ahead and delve into CSS hacks.
Thank you for any feedback.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
html, body
{
height: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td colspan="2"><div align="center">This is the header.</div></td>
</tr>
<tr>
<td height="100%">
<iFrame src="pane1.php" width="100%" height="100%" frameborder="0"></iframe>
</td>
<td height="100%">
<iFrame src="pane2.php" width="100%" height="100%" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td colspan="2">This is the footer.</td>
</tr>
</table>
</body>
</html>
I don’t see anything that’s going to be removed from any browser in the next few (or several) years.
The table tag is a valid and needed set of tags. Without it, there’s no way to display tabular data.
What happened was people started exploiting it to display very intricate layouts which ended up being impossible to maintain.
No one’s going to shoot you for using tables in the fashion you’re using. It’s super simple, and does the job whily you’re developing, so consider it simply an iteration. Iterative development is good. Once you figure out a CSS-based layout, the code here is simple enough to replace.