Page 1 of 1

Html Tables gradiant effect Rate Topic: -----

#1 SpaceMan  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 10
  • View blog
  • Posts: 507
  • Joined: 20-February 03

Posted 21 December 2004 - 09:29 PM

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.

<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

Attached File(s)


This post has been edited by SpaceMan: 24 December 2004 - 07:34 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Html Tables

#2 RiverJoe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 05

Post icon  Posted 16 September 2005 - 03:48 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
Was This Post Helpful? 0
  • +
  • -

#3 Nova Dragoon  Icon User is offline

  • The Innocent Shall Suffer, Big Time
  • member icon

Reputation: 36
  • View blog
  • Posts: 6,169
  • Joined: 16-August 01

Posted 16 September 2005 - 03:57 PM

RiverJoe, on Sep 16 2005, 05:45 PM, said:

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.
Was This Post Helpful? 0
  • +
  • -

#4 max302  Icon User is offline

  • Proud supporter of the lulz
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,281
  • Joined: 05-March 06

Posted 15 March 2006 - 06:15 PM

Nova Dragoon, on 16 Sep, 2005 - 02:49 PM, said:

RiverJoe, on Sep 16 2005, 05:45 PM, said:

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.
Was This Post Helpful? 0
  • +
  • -

#5 44corners  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 243
  • Joined: 22-February 06

Posted 25 March 2006 - 08:26 AM

RiverJoe, on 16 Sep, 2005 - 07:40 PM, said:

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...ced_Tables.html
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Posted 17 June 2006 - 10:41 AM

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:
<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.

This post has been edited by Arbitrator: 17 June 2006 - 10:46 AM

Was This Post Helpful? 0
  • +
  • -

#7 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Posted 17 June 2006 - 01:35 PM

View PostArbitrator, on 17 Jun, 2006 - 06:33 PM, said:

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.
Was This Post Helpful? 0
  • +
  • -

#8 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Posted 18 June 2006 - 06:48 PM

View Post1lacca, on 17 Jun, 2006 - 12:27 PM, said:

View PostArbitrator, on 17 Jun, 2006 - 06:33 PM, said:

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.

This post has been edited by Arbitrator: 18 June 2006 - 06:48 PM

Was This Post Helpful? 0
  • +
  • -

#9 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Posted 19 June 2006 - 10:55 AM

View PostArbitrator, on 19 Jun, 2006 - 02:40 AM, said:

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.

View PostArbitrator, on 19 Jun, 2006 - 02:40 AM, said:

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.
Was This Post Helpful? 0
  • +
  • -

#10 westmatrix99  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 29-September 07

Posted 09 February 2008 - 12:52 AM

This ones complete, works much better.
Enjoy...

The CSS:
<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:
<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>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1