A Complete Guide To Tables

[electriic ink 1]

I've been away for quite a while but have returned now.

 

with it I bring a tutorial I call A Complete Guide To Tables. If I miss anything out feel free to add anything else:

 

---------------------

Tutorial Start

---------------------

 

Why?

 

Why are they used?

 

Why?! Tables are used every you go for organizing pictures and informtaion. Tables are used in search engines, games websites and this site too! They are used even without you knowing.

 

Why do so many people use them?

 

Because their so universal. You can use them to specifically align any given data, be it a falsh movie an image, text or even a combination of everything.

 

The Tags

 

<table> The very beginning of your table. All tables must begin with this.

 

<caption> Displays a small caption above the main part of the table

 

<th> Usually in bold and has a special background colour. This is the table header.

 

<tr> Begin a new table row.

 

<td> This is where you store the core information of your table. It stands for table data.

 

New Tags

 

<thead> and <tbody> Recently these two new tags have been to the table system. They provide a 3D look to your table :: or so I was told!

 

Ending

 

</caption> </th> </td> </tr> </thead> </tbody> </table> These tags, just like most end html tags, have a forward slash after them to demonstrate they're ending something. What's after the forward slash shows what it ends. It is good practice to do this as it cleans up your code. If you wish to point out errors and clean up code, click here.

 

Properties of The Tags

 

About Properties

 

Properties of the tags are things that are permitted inside the tags like in <a href="website.html"> The href is the property. I've heard some people call them attributes.

 

The Properties

 

<table> the properties here, to my knowledge are border, bgcolor, cellspacing, cellpadding, align, height, width

 

And these same attributes can be applied to all of the aforementioned tags.

 

Remember

 

~ Close Of All Tags With </ >

~ This is not a full tutorial

 

Recommended Links

 

Of course I had to learn of this from somewhere (though I'd like to think I was born natural) so I rounded up some useful links to extend your knowledge

 

~ So, You Want To Create A Table, Huh? Source: HTML Goodies

~ HTML Tables Source: W3Schools

~ Google Search: create html tables Source: Google

 

---------------------

Tutorial End

---------------------

 

Thanks For Paying Attention.

 

Feel Free To Add More

 

cmatcmextra

[cragllo 0]

Some realy good info there, the <thead> and <tbody> have been confusing me for a while.. didnt know what they did, but now i know

[Becca 0]

thats cool thanks..I memorized the whole table 'thing' when I was really really young ... i use it A LOT... but it isn't that good as some things you use tables for only work in certain browsers.. you have to make them work in all which sometimes is confusing.... i just remember the easy rows and columns thing... that does it for me.

[Spon 0]

Thanks, Cmat, that really helped.Well most tutorials are confusing to me because I'm a n00b.But that was really good.It will help many others too.. some of the table codes have been confusing me,that made it a bit clearer, and i'm going to look at the links now.. I hope I'll understand it more soon lol, and out, Spon.

[Carsten 0]

That is weird, I use divs for organizing pictures and information, search engines, games websites and a lot of other sites too! Nice tutorial though.

[clagnol 0]

I could go on for hours about tables, and my love/hate relationship with them, but for brevity's sake, here are a few tips that have helped me with tables in the past.

 

1. If you're trying to arrange slices of an image into one seamless image with tables, make sure you include "cellspacing=0 cellpadding=0" in the <table> tag. This will avert one hell of a headache later on.

 

2. If you want to make an image or other element lie in the absolute middle of the page, do something like this:

<table width=100% height=100% border=0>

<tr>

<td align="center" valign="middle">

<img or whatever you want to align>

</td>

</tr>

</table>

 

3. Sometimes it's much easier to use CSS to position elements than to use tables.

 

I hope these tips help someone.

[Adamrosso 0]

great tutorial. i really usck at tables. i understand a little more about 'em now

[THOR 0]

What I definatly miss in this tutorial, are the attribute colspan and rowspan.

the first table has one cell in his first column.
the second table has one cell in his first row

<table width="95%" height="95%" border="2" cellspacing="2" cellpadding="2">  <tr>    <td rowspan="3"> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>  </tr></table><table width="95%" height="95%" border="2" cellspacing="2" cellpadding="2">  <tr>    <td colspan="3"> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>  </tr></table>

[faith 0]

I've been away for quite a while but have returned now.

 

with it I bring a tutorial I call A Complete Guide To Tables. If I miss anything out feel free to add anything else:

 

---------------------

Tutorial Start

---------------------

 

Why?

 

Why are they used?

 

Why?! Tables are used every you go for organizing pictures and informtaion. Tables are used in search engines, games websites and this site too! They are used even without you knowing.

 

Why do so many people use them?

 

Because their so universal. You can use them to specifically align any given data, be it a falsh movie an image, text or even a combination of everything.

 

The Tags

 

<table> The very beginning of your table. All tables must begin with this.

 

<caption> Displays a small caption above the main part of the table

 

<th>   Usually in bold and has a special background colour. This is the table header.

 

<tr> Begin a new table row.

 

<td> This is where you store the core information of your table. It stands for table data.

 

New Tags

 

<thead>   and <tbody>  Recently these two new tags have been to the table system. They provide a 3D look to your table :: or so I was told!

 

Ending

 

</caption> </th> </td> </tr> </thead> </tbody> </table>   These tags, just like most end html tags, have a forward slash after them to demonstrate they're ending something. What's after the forward slash shows what it ends. It is good practice to do this as it cleans up your code. If you wish to point out errors and clean up code, click here.

 

Properties of The Tags

 

About Properties

 

Properties of the tags are things that are permitted inside the tags like in <a href="website.html"> The href is the property. I've heard some people call them attributes.

 

The Properties

 

<table> the properties here, to my knowledge are border, bgcolor, cellspacing,  cellpadding, align, height, width 

 

And these same attributes can be applied to all of the aforementioned tags.

 

Remember

 

~ Close Of All Tags With </ >

~ This is not a full tutorial

 

Recommended Links

 

Of course I had to learn of this from somewhere (though I'd like to think I was born natural) so I rounded up some useful links to extend your knowledge

 

~ So, You Want To Create A Table, Huh? Source: HTML Goodies

~ HTML Tables Source: W3Schools

~ Google Search: create html tables Source: Google

 

---------------------

Tutorial End

---------------------

 

Thanks For Paying Attention.

 

Feel Free To Add More

 

cmatcmextra

66990[/snapback]

Heh i use dreamweaver, you dont need to know to much about tables, jsut go to insert>table lol and u can play with the rows and comumns there, but very nice tut, very informing

[Tyssen 0]

Tables are used every you go for organizing pictures and informtaion. Tables are used in search engines, games websites and this site too! They are used even without you knowing.Because their so universal. You can use them to specifically align any given data, be it a falsh movie an image, text or even a combination of everything.

Tables are used for all those purposes you've mentioned above, but they were never originally intended for most of those purposes. Tables, under the specifications laid down by the W3C, are to be used for displaying 'tabular data', ie information that lends itself to being presented in columns & rows (e.g. stock reports).
Using tables for presentation is semantically incorrect. The correct element for presenting blocks or divisions of content is the <div> and using CSS you can create layouts identical to the old-fashioned tabled layout.

[pilgrim_of_mini-monkeys 0]

Tyssen, I was just about to say that. And to add to your divisions (div) with CSS, they can be better and more complex than tables. They may sound harder in the beginning, but once you have got into it, you know the ins and outs.

[squeezer 0]

Nice!Very helpfull