MySQL 5.7 has a lot of new features. If you've dabbled with an older version of MySQL, it is definitely worth learning.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
XHTML compliant table formatting
Posted on 2006-07-18
Experts, I'm doing some development in XHTML, and have come across a problem with setting tables to be 100% the width and height of the page.
Basically, I've found a way to set the table to fit the size of the page, but the top row of the table will not set to 40px height. Also, in the bottom row, the Iframe isn't rendering on the page (if I remove the height and width attributes it renders fine, but doesn't expand to fit the table cell).
How can I achieve the above, but still keep my page XHTML compliant?
The code from my page is below.
Many thanks!
//////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td>
Bottom Row
<iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
//////////////////////////
Basically, I've found a way to set the table to fit the size of the page, but the top row of the table will not set to 40px height. Also, in the bottom row, the Iframe isn't rendering on the page (if I remove the height and width attributes it renders fine, but doesn't expand to fit the table cell).
How can I achieve the above, but still keep my page XHTML compliant?
The code from my page is below.
Many thanks!
//////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td>
Bottom Row
<iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
//////////////////////////
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2-
2
- +1
6 Comments
I found a script that will enable this .... try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script language="JavaScript">
<!--
function resize_iframe()
{
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("i
parseInt(document.body.cli
document.getElementById("i
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_ifr
//Instead of using this you can use:
// <BODY onresize="resize_iframe()"
//-->
</script>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td>
Bottom Row
<iframe id="ifrArticle" width="100%" onload='resize_iframe()' frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script language="JavaScript">
<!--
function resize_iframe()
{
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("i
parseInt(document.body.cli
document.getElementById("i
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_ifr
//Instead of using this you can use:
// <BODY onresize="resize_iframe()"
//-->
</script>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td>
Bottom Row
<iframe id="ifrArticle" width="100%" onload='resize_iframe()' frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
Thanks for the comment Eternal_Student, however I was hoping to find a solution that didn't involve having to use JavaScript to set the height of rows - is there no way of doing what I want to achieve just via HTML, but keeping it XHTML compliant?
Thanks!
Thanks!
try following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td style="width: 100%; height: 100%;">
Bottom Row
<iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
//////////////////////////
Apply 100% height and width on the other <td> so the first row will take 40px and the other will occupy the left space.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 40px;">
<td valign="top" style="height: 40px;">
Top Row
</td>
</tr>
<tr>
<td style="width: 100%; height: 100%;">
Bottom Row
<iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
//////////////////////////
Apply 100% height and width on the other <td> so the first row will take 40px and the other will occupy the left space.
Thanks dharmeshmaniar, we're getting there, however the page is now 100% height plus 40 extra pixels (i.e. there's a scroll bar on the page, and the iframe goes off the bottom of the page by 40 pixels, presumably due to setting the bottom cell to be 100% height).
How can I get the iframe to fit the bottom cell, but not go off the bottom of the page?
Thanks!
How can I get the iframe to fit the bottom cell, but not go off the bottom of the page?
Thanks!
in xhtml, a page has default width but no default height. so you cannt inherit height from it using percentage height.
a div or table must inherit height from an absolute value.
so you could either set a pixel height in the container table:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<table style="width: 100%; height:555px;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="vertical-align:top;
</tr>
<tr>
<td style="width:100%; height:89%;">
<iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
or dont give height in the table and set absolute height for each row.
a div or table must inherit height from an absolute value.
so you could either set a pixel height in the container table:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<table style="width: 100%; height:555px;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="vertical-align:top;
</tr>
<tr>
<td style="width:100%; height:89%;">
<iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
or dont give height in the table and set absolute height for each row.
a work around with min-height for mozilla, (ie renders in another manner anyway, so it will be full height)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
html {height: 100%;}
body {min-height: 95%; margin: 0; padding: 0; height:100%;}
* html body {height:100%;}
</style>
</head>
<body>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="vertical-align:top;
</tr>
<tr>
<td style="width:100%; height:89%;">
<iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
html {height: 100%;}
body {min-height: 95%; margin: 0; padding: 0; height:100%;}
* html body {height:100%;}
</style>
</head>
<body>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="vertical-align:top;
</tr>
<tr>
<td style="width:100%; height:89%;">
<iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
</td>
</tr>
</table>
</body>
</html>
Featured Post
What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook.
This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used.
Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website.
This will be demonstrated using a Windows 8 PC.
Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 1 hour left to enroll
623 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.