[tutorial] tables

Blade · **Posted:** Mon Mar 24, 2003 10:26 pm

well i dont see many things in here, so i felt i had to make my own contribution, to tables Very Happy

...
tables are quite simple actually... you can set all the attributes in the <table> tag.. such as the bgcolor of it, width, height, colom spacing, and so on.. then you would start each row with <tr> and each cell in that row with <td>
so, a simple table would look like this

code:

<table border="1">
<tr>
<td>
Hello Everyone, this is my first table ever
</td>
</tr>
</table>

MOD Edit: thx... just what I would have been looking for to use in my CGIs Very Happy

+5bits

A more detailed tutorial was writen by PHP God, a bit down in this thread... Here's a link to jump straight to it - http://www.compsci.ca/bbs/viewtopic.php?p=7086#7086

Delta · **Posted:** Tue Mar 25, 2003 1:59 pm

How do you get this to work I tried just copying and pasting it in between my <HTML> and tags but it didn't work so I'm lost but I also don't program in HTML too much at all.

Blade · **Posted:** Tue Mar 25, 2003 4:11 pm

sorry, i couldnt remember if it was border or borders... but it should work fine now, i edited so now its all good Smile

Asok · **Posted:** Tue Mar 25, 2003 6:01 pm

Delta wrote:

How do you get this to work I tried just copying and pasting it in between my <HTML> and <BODY> tags but it didn't work so I'm lost but I also don't program in HTML too much at all.

It should go after the <BODY> tag not before it

Delta · **Posted:** Wed Mar 26, 2003 9:40 am

Okay this is what I had but it still didn't work Sad

<HTML>

Hello Everyone, this is my first table ever

</HTML>

Okay...... Confused

now it works but that's exactly what I had before.... Confused

Dan · **Posted:** Wed Mar 26, 2003 7:34 pm

LOL, no oftensts but that was kind of funny Wink

.

krishon · **Posted:** Mon May 19, 2003 9:41 pm

lol, yup that wuz. there are several other things u can do with tables. Some website are made up entirely or tables. Attributes like cellpadding, cellspacing and others can help u format your table a bit better.

Blade · **Posted:** Tue May 20, 2003 7:35 am

yeah. it was meant to be a simple tut though Smile

. i use all tables in my site. well i use them in all my designs. lol

PHP God · **Posted:** Sat May 24, 2003 6:26 pm

That is one of the most low grade table tuts ever....

Here goes.

___________________________________________________

It is assumed that you know anything on your page goes between the BODY tags.

code:

Knowing that lets start our table.

code:

We have now let the browser know, that we are starting and ending a table and where. The next thing we have to look at are the tags within the table. the TD tag, stands for "Table Data". It inserts one cell. lets stick a cell into our table so it will appear.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TD>This is my one cell table (cell 1)</TD>
</TABLE>
</BODY>
</HTML>

If you preview that it should yeild a table with the following text inside...

"This is my one cell table (cell 1)"

You can't see the tables outline so lets make it appear by adding to the first table tag.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TD>This is my one cell table (cell 1)</TD>
</TABLE>
</BODY>
</HTML>

What I did was I added an attribute to my table. The attribute is named "BORDER". Here is a list of other attributes you can use in your table. Note that these cannot beapplied to individual cells but it is possible to put a table in the cell of another table.

CELLSPACING - Indicates in pixels how far apart you would like to space your cells

CELLPADDING - Indicates in pixels how many pixels inside of the cell you want content to be placed. This "pads" the cell along the inner edges hence the name.

BGCOLOR - Specifies the background color for the entire table, this must be a hex value. (I.E. BGCOLOR="#FFCC00")

WIDTH - Indicates width of the table in pixels or percent.

HEIGHT - Indicates height of table in pixels or percent.

Now that is a real nice table huh? Are you kidding me? Are you on crack? You can't impress the ladies with a one cell table! Give it some balls. Give it rows and columns.

Let's make this table even cooler and make it 3 columns wide. We do this by adding TD tags, like below.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TD>This is my three cell table (cell 1)</TD>
<TD>This is my three cell table (cell 2)</TD>
<TD>This is my three cell table (cell 3)</TD>
</TABLE>
</BODY>
</HTML>

Now we are talking. That will give you your table, but you won't get any phone numbers with that one. Where's the rows? Let's add some. We insert a row by putting TR tags around TD tags. Note that if a row does not have the same amount of cells as another then empty cells will be filled in. Lets add some rows.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD>This is my nine cell table (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
<TD>This is my nine cell table (cell 9)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now thats all fine and dandy, lets edit our cells individually. Lets say we wan't to change the background color of CELL 5. We can simply add an attribute to its TD tag. like so.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD BGCOLOR="00FF00">This is my nine cell table (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
<TD>This is my nine cell table (cell 9)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

If you look, I added the BGCOLOR tag. This changes the background color only for the 5th cell. Neat eh? Here is a list of attributes that can be applied to a single cell.

ALIGN - can be either LEFT, RIGHT, or CENTER. Aligns table contents.

VALIGN - Vertical Align. Can be either TOP, MIDDLE, or BOTTOM.

WIDTH - Specifies width in pixels or percent.

HEIGHT - Specifies height in pixels or percent.

So I'm sure you are pleased and amazed with how truly easy this is, and you probably have your favourite text editor out and are making tables, but its not enough. We want to merge cells do we not? OF COURSE!

So, lets insert another row at the top of our table.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>To be merged</TD>
<TD>To be merged</TD>
<TD>To be merged</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD BGCOLOR="00FF00">This is my nine cell table (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
<TD>This is my nine cell table (cell 9)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now I may lose some of you here, but try and bear with me. To merge cells horizontally, or across coloumns, we use the COLSPAN tag. observe. 3 is just how many columns we want it to "span".

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">To be merged</TD>
<TD>To be merged</TD>
<TD>To be merged</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD BGCOLOR="00FF00">This is my nine cell table (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
<TD>This is my nine cell table (cell 9)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now I'm sure you'd agree thats one distorted looking table. The problem is, we told the browser that the first cell is to span 3 colomns, but we have more cells in the row after it, the solution to this, is to simply delete the other cells in that row.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">I am that is... I am... a merged cell.</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD BGCOLOR="00FF00">This is my nine cell table (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
<TD>This is my nine cell table (cell 9)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

W00T! we have done it. Now if we go even further, we realize through experimentation, that this does not work vertically. So how is it done you ask? perhaps some feat of magic? Hell no, take of the wizards hat man. Its called the ROWSPAN tag. It works like the COLSPAN tag except vertically. It works from the cell you set it in, and works its way down until it has merged the cells below it as far as the number of rows you specify. Lets merge cell 5 and 8. Remember to remove cell 8 to remove the meesed-up-ness.

code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">I am that is... I am... a merged cell.</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 1)</TD>
<TD>This is my nine cell table (cell 2)</TD>
<TD>This is my nine cell table (cell 3)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 4)</TD>
<TD BGCOLOR="00FF00" ROWSPAN="2">This is my Vertically merged cell! (cell 5)</TD>
<TD>This is my nine cell table (cell 6)</TD>
</TR>
<TR>
<TD>This is my nine cell table (cell 7)</TD>
<TD>This is my nine cell table (cell 8)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

works eh? so now you can truly impress the ladies. This is my first successfully written tut. I guess we are both amazed. So now you know all this, give it some practice. I may write a further tutorial on some neat tricks you can do with tables, and Table Nesting.

Peace for now. Go impress the ladies Very Happy

Nice... This is very detailed and has a nice learning curve to it... as well as explanations of the code and some nice commens to keep me interested in reading the rest of tutorial. +35Bits - Tony

Homer_simpson · **Posted:** Sat May 24, 2003 6:29 pm

hmmmmmmmmmmmmmmmmm.... how bout some php tutorials?

PHP God · **Posted:** Sat May 24, 2003 6:35 pm

If you donated some bits I could teach you how to use query strings and make mail feedback forms in PHP.

Homer_simpson · **Posted:** Sat May 24, 2003 7:36 pm

lol i know all about query strings but it would be nice if u could help me with socket connections and ftp in php...
and i dont care about bits so i'll give u as much bits as u want...
here's a little tip for start... 10 bits

JSBN · **Posted:** Sat May 24, 2003 10:18 pm

PHP God, for your outstanding contribution to this tutorial, and hopefully to that others I award you:
The dark red +50 bits Award

Unfortunatly, I can only give this out once per user, and only of my part of the forum. Keep up the hard work, and you might receive more bits (but of a lesser amount).
And now a 50 smile salute!
Very Happy

PHP God · **Posted:** Sat May 24, 2003 10:20 pm

I may not be able to help you but I can help you find some sites.

JSBN · **Posted:** Sat May 24, 2003 10:31 pm

Well please, add any of your php and HTML knowledge. For you +10 bits for any other tutorials u creat under the HTML area. Please do not try to convince me to remove your Award

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members