?
Solved

Place the table inside the table(HTML)

Posted on 2000-04-22
3
Medium Priority
?
188 Views
Last Modified: 2010-04-09
I want tp place the table inside the table without altering the actual size of the data.

the problem is ., when i am placing the table inside the <td> tag, the table is taking it's own width and extra space is allocated., I don't want this to be happen., can i override this?
0
Comment
Question by:kousis
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
davlun20080 earned 150 total points
ID: 2741073
I am guessing that you mean the cell that is holding the nested table is growing to hold the table.  This can happen when you have set column and/or table widths on the nested table that exceed the width of the cell that is containing it.  When planning your page and layout, consider the data that it will hold, so that you can make sure you allocate enough space to contain it.

If you post your code, I will be glad to take a look.

davlun

0
 

Author Comment

by:kousis
ID: 2741341
This is th code bfore nesting the table..


<html>
<head>
<title> table</title>
</head>
<body>



<table border=1 width=85% height=100%>
<tr><td rowspan=4>1



</td><td colspan=2>
2</td><td rowspan=2>5</td></tr>
<tr><td>7</td><td rowspan=2>8</td></tr>
<tr><td rowspan=2>11</td><td rowspan=2>13</td></tr>
<tr><td>16</td></tr>

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

This is the code after nesting the table..,


<html>
<head>
<title> table</title>
</head>
<body>



<table border=1 width=85% height=100%>
<tr><td rowspan=4><table><tr><td>
<a href="as.htm">this is example</a></td></tr>
<a href="as.htm">this is example</a></td></tr>
<a href="as.htm">this is example</a></td></tr>
<a href="as.htm">this is example</a></td></tr>
</table>
</td><td colspan=2>
2</td><td rowspan=2>5</td></tr>
<tr><td>7</td><td rowspan=2>8</td></tr>
<tr><td rowspan=2>11</td><td rowspan=2>13</td></tr>
<tr><td>16</td></tr>

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


0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2741959
I know it is a pain to do sometimes, but you need to set up some column and table widths.  Without them, the browser will determine them for you and than can lead to unpredictable results.

You can either declare them explicitly in the td tag such as <td width="10"> or you can use a spacer row at the top or bottom. Using 800x600 as a target, your the spacer row would be like:
<tr>
  <td><img src="transparent.gif" width=175 height=1></td>
  <td><img src="transparent.gif" width=30 height=1></td>
  <td><img src="transparent.gif" width=595 height=1></td>
<tr>

Then you can put the nested table into the cell with width=595 and it's code would look like:
<table width=595 cellspacing=0 cellpadding=0 border=0>
  <tr>
  <td><img src="transparent.gif" width=180 height=1></td>
  <td><img src="transparent.gif" width=200 height=1></td>
  <td><img src="transparent.gif" width=215 height=1></td>
  </tr>
  <tr>
  ... your table data starts here.

I like to use the spacer rows myself.  The thing to remember in tables is that the largest cell is the one to determine the width in a column and the highest cell determines the height of a row.  Finally unless you specify the width through one of these two methods, the tables will be adjusted by the users browser.

davlun
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question