Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

display contents first.

Posted on 2003-11-27
17
Medium Priority
?
322 Views
Last Modified: 2010-04-09
Dear All,
In code below how can show up "contents" first then the "something here"

<table width="100%">
  <tr>
    <td width="33%" >something here</td>
    <td width="33%"  rowspan="3">
       <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td >{contents}</td>
         </tr>
       </table>
    </td>
    <td width="34%" >something here</td>
  </tr>
  <tr>
    <td width="33%">something here</td>
    <td width="34%" >something here</td>
  </tr>
  <tr>
    <td width="33%" >something here</td>
    <td width="34%" >something here</td>
  </tr>
</table>
Is there is any other technic to do so?
==Please a professional answer is required==
0
Comment
Question by:ethar1
[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
  • 4
  • 3
  • 3
  • +4
17 Comments
 
LVL 15

Expert Comment

by:Timbo87
ID: 9835227
Do you mean a time delay? For example, showing contents immediately, then something here a little bit later? Or do you mean giving it a load priority? As of now, since contents occurs first in the page, it should load a tiny bit before something here.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9835251
Could you be more explicit about what you want, the question is ambiguous. One of your problems to strat with is that you hve more than table in a cell. If you could should schematically show what you would like the table to look like we can do it for you.
0
 
LVL 4

Expert Comment

by:sandy12879
ID: 9835435
What i understood from ur questn  is that u need  some thing like this

contents               something        contents          

Try out this






<table width="100%">
  <tr>
    <td width="33%" >{contents}</td>
    <td width="33%"  rowspan="3">
       <table  width="100%">
         <tr>
           <td>SOMETHING HERE</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>SOMETHING HERE</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>SOMETHING HERE</td>
         </tr>
       </table>
    </td>
    <td width="34%" >{contents}</td>
  </tr>
  <tr>
    <td width="33%">{contents}</td>
    <td width="34%" >{contents}</td>
  </tr>
  <tr>
    <td width="33%" >{contents}</td>
    <td width="34%" >{contents}</td>
  </tr>
</table>




         
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 5

Expert Comment

by:prohacx
ID: 9835550
Hi there!

Switch the second column (with rowspan=3 and the contents) with the first one (something here) like so:

<table width="100%">
  <tr>
    <td width="33%" rowspan="3">
         <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%">
         <tr>
           <td >{contents}</td>
         </tr>
       </table>

      </td>
    <td width="33%">
            something here
    </td>
    <td width="34%" >something here</td>
  </tr>
  <tr>
    <td width="33%">something here</td>
    <td width="34%" >something here</td>
  </tr>
  <tr>
    <td width="33%" >something here</td>
    <td width="34%" >something here</td>
  </tr>
</table>


Have fun!
0
 
LVL 5

Expert Comment

by:prohacx
ID: 9835573
In fact, now you have a table with 3 columns (run the code below, I added color to it to clarify it): a red one, a blue one and a black one, and 3 rows.

The first column in the table has a rowspan=3, so it will display down over 3 rows. This means that you do not have to enter this column anymore in the following 2 rows of your table. That's why the following 2 rows have only 2 columns (blue and black).

The first column itself contains 4 tables (grey colored).

Hope this clarifies it a bit!
0
 
LVL 5

Expert Comment

by:prohacx
ID: 9835574
And here's the code (sorry, I forgot...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<table width="100%">
  <tr>
    <td width="33%" rowspan="3" style="border: 1px solid red;">
         <table  width="100%" style="border: 1px solid #bbbbbb;">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%" style="border: 1px solid #cccccc;">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%" style="border: 1px solid #dddddd;">
         <tr>
           <td>{contents}</td>
         </tr>
       </table>
       <table  width="100%" style="border: 1px solid #eeeeee;">
         <tr>
           <td >{contents}</td>
         </tr>
       </table>

      </td>
    <td width="33%" style="border: 1px solid blue;">
            something here
    </td>
    <td width="34%" style="border: 1px solid black;">something here</td>
  </tr>
  <tr>
    <td width="33%" style="border: 1px solid blue;">something here</td>
    <td width="34%" style="border: 1px solid black;">something here</td>
  </tr>
  <tr>
    <td width="33%" style="border: 1px solid blue;">something here</td>
    <td width="34%" style="border: 1px solid black;">something here</td>
  </tr>
</table>

</BODY>
</HTML>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9837742
Without changing the actual code for the table so that the content rows are coded "before" the something here row (as shown directly above - which you may as well simplify at that point) you can't change where the content gets printed to the screen. More info from you would be required.
0
 

Author Comment

by:ethar1
ID: 9838646
Dear all,
sorry for ambiguous i cuz.
I means load priority for the contents.
Thanks.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9838725
So you need the "content" cells to display on screen before the "something here" content does?

How much before, and what type of data do all the table cells contain?
0
 

Author Comment

by:ethar1
ID: 9838785
"content" cell contains tables + text + pictures.
what I need is give the "content" highly priority to load and display then "something here" come after.
it's not mater of delay, don't want make any delay... just load the "contents" first and display it b4 the browser download the rest of the page.

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9838950
That's going to be problematic with your layout.

An example:

<td>Left Cell</td><td>Middle Cell</td><td>RightCell</td>

1. The browser must display the contents of the left cell before the middle one, because it needs to know beforehand exactly where the middle cell will end up. The table cells don't "re-align" themselves as the page is displaying. It's entirely determined beforehand as the browser parses the code.

2. Once the broswer has determined the pixel coordinates for each table cell, it then proceeds to display that cells content. If the content is extensive, it will take longer to display.

So, as another example

<td>Left Cell</td><td>Middle Cell with another table inside it</td><td>RightCell</td>

The Middle Cell content will actually take longer to display - the exact opposite of what you're trying to achieve - because there's more information there.

The only "potential" guarantee is to code the content that you want displayed "before" other content. Like this:

<table>
  <tr>
    <td>This will display first</td>
  </tr>
</table>
<table>
  <tr>
    <td>This will display second</td>
  </tr>
</table>

However, if the first table is a large graphic, and the second table is just text, it probably won't do what you need it to do.

One last question:
Why do you need this to happen - from the user's point of view?
0
 

Author Comment

by:ethar1
ID: 9841333
The reasone is very simple , to show up the contents first.
All the customer needs is the contents, when you show it first it will make him wait till the page loaded.
also the "something here" part is menu+advertising and other stuff.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 1000 total points
ID: 9841963
I would usually have to setup the page according to the exact content - types of images, compexity of tables, etc.

Without knowing what's going in the page, the best I can offer you at this point is to re-arrange the table structure - while keeping your original layout intact - to have the content cells appear first in the code.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="33%" height="1"></td>
    <td width="34%" rowspan="2" valign="top">
    <table width="100%">
      <tr>
        <td>{contents}</td>
      </tr>
    </table>
    <table width="100%">
      <tr>
        <td>{contents}</td>
      </tr>
    </table>
    <table width="100%">
      <tr>
        <td>{contents}</td>
      </tr>
    </table>
    <table width="100%">
      <tr>
        <td>{contents}</td>
      </tr>
    </table></td>
    <td width="33%" height="1"></td>
  </tr>
  <tr>
    <td width="33%" valign="top" height="100%">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="100%">menu</td>
      </tr>
      <tr>
        <td width="100%">menu</td>
      </tr>
      <tr>
        <td width="100%">menu</td>
      </tr>
    </table></td>
    <td width="33%" valign="top" height="100%">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="100%">advertising</td>
      </tr>
      <tr>
        <td width="100%">advertising</td>
      </tr>
      <tr>
        <td width="100%">advertising</td>
      </tr>
    </table></td>
  </tr>
</table>

If you have - or when you have - an online version, I'd be interested to see what's going on in the layout to adjust how the browser is parsing through the code.
0
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 1000 total points
ID: 9845431
The page will render more quickly in general if you use stacked tables rather than nested tables.

You might even be able to dispense with the tables altogether:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
  div {position:absolute; top:0%; width:32%; height:100%; background-color:#FFE;}
  div#leftCol {left:0%; }
  div#centreCol {left:33%; margin-left:0.5%;}
  div#rightCol {left:67%; }
  div#leftCol p, div#rightCol p  {height:33%;}
  div#centreCol p {height:25%;}
</style>
</head>
<body>
<div id="leftCol">
<p>SOMETHING ELSE</p>
<p>SOMETHING ELSE</p>
<p>SOMETHING ELSE</p>
</div>
<div id="centreCol">
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="rightCol">
<p>SOMETHING ELSE</p>
<p>SOMETHING ELSE</p>
<p>SOMETHING ELSE</p>
</div>
</body>
</html>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

722 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