Full Version: Html Tables
Dream.In.Code > Programming Tutorials > HTML/JavaScript Tutorials
SpaceMan
You can do many things with tables, inside tables inside tables and so on.

now if you change the color on each table lighter or darker, then you have a gradiant effect.
You use your imagination as to what more to add and how to apply this, is so many posibilities.

In the table tags adjust the cellpadding and cellspacing for more or less of the piticular color.

CODE

<table width="0%" border="0" cellpadding="1" cellspacing="0" bgcolor="#634821">
 <tr>
   <td><table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#E98D04">
       <tr>
         <td><table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FAA729">
             <tr>
               <td><table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#FCBA57">
                   <tr>
                     <td><strong><a href="http://www.dreamincode.net">&lt;/dream.in.code&gt;</a></strong></td>
                   </tr>
                 </table></td>
             </tr>
           </table></td>
       </tr>
     </table></td>
 </tr>
</table>


to see the effect, dowload html page.
boy i must be bored.

Have fun
Dave
RiverJoe
Hello Spaceman,

I am just learning HTML.

I noticed in your Table CODE that the lines are indented incremental. Is this your doing or is this the way the x-compiler reads it? If you insert the indents, how do determine where to insert them, and how many?

Thank you for any assistance,

Gerry
Nova Dragoon
QUOTE(RiverJoe @ Sep 16 2005, 05:45 PM)
Hello Spaceman,

I am just learning HTML.

I noticed in your Table CODE that the lines are indented incremental. Is this your doing or is this the way the x-compiler reads it? If you insert the indents, how do determine where to insert them, and how many?

Thank you for any assistance,

Gerry

The indents are for readability,

basically his example shows nested tables, and has a tab for each level of nesting.

They are not required, and how you use them is up to you.
max302
QUOTE(Nova Dragoon @ 16 Sep, 2005 - 02:49 PM)
QUOTE(RiverJoe @ Sep 16 2005, 05:45 PM)
Hello Spaceman,

I am just learning HTML.

I noticed in your Table CODE that the lines are indented incremental. Is this your doing or is this the way the x-compiler reads it? If you insert the indents, how do determine where to insert them, and how many?

Thank you for any assistance,

Gerry

The indents are for readability,

basically his example shows nested tables, and has a tab for each level of nesting.

They are not required, and how you use them is up to you.

Nova Dragoon is very right. Indention makes code much more easy to read, and I COMMAND you to use it, for the sake of the poor community member who might one day read over your code to find errors.

If you want to see what bad code is, get any version of frontpage. No indention whatsoever, and a real messy code. Form is specially important in tagged languages. You'll find XML tougher if you don't form your code properly.
danielle_1_uk
QUOTE(RiverJoe @ 16 Sep, 2005 - 07:40 PM)
Hello Spaceman,

I am just learning HTML.

I noticed in your Table CODE that the lines are indented incremental. Is this your doing or is this the way the x-compiler reads it? If you insert the indents, how do determine where to insert them, and how many?

Thank you for any assistance,

Gerry

Just thought I'd mention that tables should only be used for tabular data...for styling purposes CSS provides a much better alternative...tables were never designed for "designers"...and now CSS is so widely supported, there's no reason to be using them that way. Take a look at http://www.csszengarden.com/ to see how people are CSSing in style - not a table in sight.

I learnt HTML and CSS together in about a month (I'm a slow learner!)...I recommend learning them together as it really helps with grasping the distinction between content (HTML) and presentation (CSS).

It is this distinction that will allow you to see how tables should be used, e.g. see
http://markl.f2o.org/tutorial/tables/Advanced_Tables.html
Arbitrator
The gist of the above poster's comments is that you should be using nested division (div) elements instead of tables and CSS instead of the deprecated (obsolete) width, border, cellspacing, cellpadding, and bgcolor attributes. Respectively, the correct CSS properties are width, border, border-spacing (or border-collapse), padding, and background-color (or just background).

Here's essentially the same effect but with the correct structural (HTML) and stylistic (CSS) markup:
CODE
<style type="text/css">
  div {width: 600px; display: table-cell; padding: 2px; vertical-align: bottom;}
  a {font-weight: bold; text-decoration: none;}
  #a {height: 96px; background: #634821;}
  #b {height: 72px; background: #e98d04;}
  #c {height: 48px; background: #faa729;}
  #d {height: 24px; background: #fcba57;}
</style>

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d"><a hreflang="en" href="http://home.dreamincode.net/"></dream.in.code></a>
      </div>
    </div>
  </div>
</div>

Note: Internet Explorer doesn't not currently support the display: table-cell declaration.
1lacca
QUOTE(Arbitrator @ 17 Jun, 2006 - 06:33 PM) *

The gist of the above poster's comments is that you should be using nested division (div) elements instead of tables and CSS...


Note that although this is a possible way to achieve this effect, it is the rape of the separation of data ((x)html) and presentation (css) concept! This way the div elements lose their meaning, and only create code bloat. In similar cases a possible workaround could be a javascript method that builds up this structure, so that the document itself is not polluted with meaningless tags.
Arbitrator
QUOTE(1lacca @ 17 Jun, 2006 - 12:27 PM) *
QUOTE(Arbitrator @ 17 Jun, 2006 - 06:33 PM) *
The gist of the above poster's comments is that you should be using nested division (div) elements instead of tables and CSS...
Note that although this is a possible way to achieve this effect, it is the rape of the separation of data ((x)html) and presentation (css) concept! This way the div elements lose their meaning, and only create code bloat. In similar cases a possible workaround could be a javascript method that builds up this structure, so that the document itself is not polluted with meaningless tags.
Oh? That's an extremely strict interpretation. I do believe that div means division and that their only meaning is to demarcate separate areas of a page. While this isn't a shining example of the div element at work, it's hardly out of bounds. The div themselves are meaningless without being styled, yet so is the common empty div that has its background styled for header images (in accordance with the separation of style and structure doctrine). Dis-permitting this also makes things like this impossible.

Structure is simply the most basic means of presentation, otherwise there would be no need for things like tables which are actually a form of presentation (of tabular data) or div or p since their only purpose IS presentation since the user cannot see them.
1lacca
QUOTE(Arbitrator @ 19 Jun, 2006 - 02:40 AM) *

Oh? That's an extremely strict interpretation. I do believe that div means division and that their only meaning is to demarcate separate areas of a page. While this isn't a shining example of the div element at work, it's hardly out of bounds. The div themselves are meaningless without being styled, yet so is the common empty div that has its background styled for header images (in accordance with the separation of style and structure doctrine). Dis-permitting this also makes things like this impossible.


Yes, this might be the a strict explanation for the usage of divs, but styling with tables started out in a similar way. The discussion on the page you cited spends several sentences justifying the use of nested divs for that effect, and at the bottom they stress, that it is a new method, and the automatic generation with Javascript is possible. This is not by chance, IMHO this is the way these things should be done, the page is only an explanation of the idea. With the correct usage of XHTML and CSS your markup should be meaningful. I think you know the css Zen Garden site, it shows very well, that how can the same content be presented in a different way with different styling. Try to think that your markup might be read not only by browsers, but other applications - and it might even cause interpretation problems for voice readers.

QUOTE(Arbitrator @ 19 Jun, 2006 - 02:40 AM) *

Structure is simply the most basic means of presentation, otherwise there would be no need for things like tables which are actually a form of presentation (of tabular data) or div or p since their only purpose IS presentation since the user cannot see them.


Yes and no! Structure is a logical way of presentation. However it's main goal is interpretation! That's why tables and ps are an integral part of it: they both represent logical units of the document - as learnt in grammar / literature class. This is why you won't show tabular data with nested divs, because screen readers would go berserk and the whole thing would lose it's meaning.
westmatrix99
This ones complete, works much better.
Enjoy...

The CSS:
CODE
<style type="text/css">
  div {
    width: 600px;
    display: table-cell;
    padding: 2px;
    vertical-align: bottom;
}
  a {
    font-weight: bold;
    text-decoration: none;
    width: 600px;
}
  #a {
    height: 96px;
    background: #634821;
    width: 600px;
    margin: 0px;
    padding: 0px;
}
  #b {
    height: 72px;
    background: #e98d04;
    width: 600px;
    margin: 0px;
    padding: 0px;
}
  #c {
    height: 48px;
    background: #faa729;
    width: 600px;
    margin: 0px;
    padding: 0px;
}
  #d {
    height: 24px;
    background: #fcba57;
    width: 600px;
    padding: 0px;
    margin: 0px;
}
</style>

The DIVs:
CODE

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d"><a hreflang="en" href="http://home.dreamincode.net/"></dream.in.code></a>
      </div>
    </div>
  </div>
</div>


This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.