Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 [tutorial] tables
Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
Goto page 1, 2  Next
View previous topic Printable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Blade




PostPosted: Mon Mar 24, 2003 10:26 pm   Post subject: [tutorial] tables

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
Sponsor
Sponsor
Sponsor
sponsor
Delta




PostPosted: Tue Mar 25, 2003 1:59 pm   Post subject: How does it work?

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




PostPosted: Tue Mar 25, 2003 4:11 pm   Post subject: (No subject)

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




PostPosted: Tue Mar 25, 2003 6:01 pm   Post subject: Re: How does it work?

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




PostPosted: Wed Mar 26, 2003 9:40 am   Post subject: That's what I had

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




PostPosted: Wed Mar 26, 2003 7:34 pm   Post subject: (No subject)

LOL, no oftensts but that was kind of funny Wink .
Computer Science Canada Help with programming in C, C++, Java, PHP, Ruby, Turing, VB and more!
krishon




PostPosted: Mon May 19, 2003 9:41 pm   Post subject: (No subject)

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




PostPosted: Tue May 20, 2003 7:35 am   Post subject: (No subject)

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
Sponsor
Sponsor
Sponsor
sponsor
PHP God




PostPosted: Sat May 24, 2003 6:26 pm   Post subject: (No subject)

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:

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
  <!-- Your stuff here -->
 </BODY>
</HTML>


Knowing that lets start our table.

code:

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
  <TABLE>
  </TABLE>
 </BODY>
</HTML>


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




PostPosted: Sat May 24, 2003 6:29 pm   Post subject: (No subject)

hmmmmmmmmmmmmmmmmm.... how bout some php tutorials?
PHP God




PostPosted: Sat May 24, 2003 6:35 pm   Post subject: (No subject)

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




PostPosted: Sat May 24, 2003 7:36 pm   Post subject: (No subject)

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




PostPosted: Sat May 24, 2003 10:18 pm   Post subject: (No subject)

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 Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy
PHP God




PostPosted: Sat May 24, 2003 10:20 pm   Post subject: (No subject)

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




PostPosted: Sat May 24, 2003 10:31 pm   Post subject: (No subject)

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
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Tell A FriendPrintable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 2  [ 17 Posts ]
Goto page 1, 2  Next
Jump to:   


Style:  
Search: