|
Author |
Message |
Koyana Nuva
Member
Posts: 755
Registered: Jan 2006
 
|
 Posted October 17th, 2006 10:26 PM IP   
Okay, html maggots! It's boot camp for all of you! If you're good little angels, perhaps you'll learn a thing or two. Today, we're going commando through an obstacle course too tough and scary for the marines! And that course is: Tables! Let's move it! Hup, hup, hup!
Tables
All right, everybody. Let's get down with the basics. You got your average table tag: the table tag!
code:
<table></table>
Do you think that's enough to make your glorified table filled with information? Nu-uh. Your mother's gonna need a bigger pair of html-style army boots, soldier! We're at war, here! You need to know how to fight! Bottom line; The table tag is the battlefield. In other words, what you do to the table is between those two tags.
Now, let's get to know your battlefield. That's right, we make up our battlefield to fight in!
There are several tags that change the battle field.
- align="(center, left or right)" aligns the table horizontally.
- width="(#px, #%)" sets the width of the table on the page.
Let's duck and cover to discuss the situation, soldier. If you set your width in pixels, the table will not change size when you resize the window, got it? And also, if you put it in percent, the table will always be as wide as the percentage you put for the window. If it's 80%, you can resize it, and it will also resize with you. Pixels don't fight that way.
- cellpadding="(#)" sets the amount of space inside of a cell.
Lets talk prison, soldier. Cells, of course, are the boxes in a table. Cellpadding sets a vertical size in the table before you type in info. Bottom line; it makes the cells bigger vertically.
- Cellspacing="#" sets the amount of blank space between the cell borders (walls).
- border="#" will set the size of the table's borders.
- bordercolor="#(six-digit alphabetical/number sequence)" sets the color of a border.
If you didn't get the sequence, soldier, you ain't fit for the war! Go see This thread.
- cols="(#)" Tells the table how many columns there are.
- rows="(#)" Tells the table how many rows there are.
So now we've talked the talk on the battlefield, let's walk the walk with the basic techniques of Javascript war!
Columns/Rows/Cells
We all know what a cell is. It's basically a box in a table. But what is a cell made out of? We interrogated the enemy, so let's hear what he had to say...
Quote:
"Please... don't hurt me... I'm just a cell, I swear! I grew up in the overseas and OUCH! Okay, okay...
I'm a cell... I'm made up by my two parents. My father, the column, was the top of the family, while my mother, the row, was busy with setting the horizontal sides... No! Don't hurt me!
|
Good to see enemy soldiers squirm, don't you think, soldier? ...No? Well, whatever...
Cells are made up of columns and rows. Columns, on top, are the vertical troops (cells) on the table. Rows, on the other hand, are horizontal.
columns are always left alone. We only need to know about the rows. And their tag is...
code:
<tr></tr>
The TR tags! These describe what goes on in a row.
The only attribute this technique has is bgcolor="#(sequence)", which sets the row's entire background color.
So now, your table looks like this...
code:
<table>
<tr>
</tr>
</table>
Now, we finally move on to the heart of war, the very soul that makes it up: The artillary weapons, the cell tags!
code:
<td></td>
OR
<th></th>
Cell Tags are described in two forms: TD, and TH.
- <th> is the Table Header tag. It sets a bigger, centered font in the cell.
- <td> is the Table Data cell tag. It sets a normal sized, left-aligned font cell.
Finally, there are the adjustments we can make to the battlefield's row's cell tag. Here they are:
- align="(c,l,r)" Aligns the font in the cell horizontally.
- colspan="(#)" changes how many columns wide your cell is. It makes it wider.
- rowspan="(#)" is the same thing as colspan, only with rows. It makes the cell taller.
- bgcolor="#(sequence)" sets the background color.
- class="(FirstAlt, SecondAlt, Menu, Header)" transforms the table into the version your style format says.
With these attributes, you can create a cell just how you want.
Finally, there's the optional <caption> tag. Which basicaly goes right before the table. The only attribute this thing has is align="(top or bottom)". Which sets the text above or below the entire table. Think of it as additional information to your table. Captions can be used to describe the purpose of a table.
And that's it, folks. I'm off to bed. Take 5, soldier.
|
|
Anti Paul
Member
Posts: 3308
Registered: Jan 2005
|
Posted October 17th, 2006 10:35 PM IP
great job, Koyna Nuva!  thanks for postng this. I'll admit that I'm not very good at making tables, so this lesson is helpful to me.
(if it's not EXCOBOARD, then it's not worth discussing)
|
|
SivoxII
Member
Posts: 5991
Registered: Apr 2006
 |
Posted October 17th, 2006 10:44 PM IP
Nicely scripted Koyana! ... maybe you should have written the script for John Cena's "Marine" ... you would have made a far better job of the plot I'm sure!!!! 
|
|
BluAngelGrrl
Unregistered
Posts: 1784
Registered: Apr 2004
|
Posted October 17th, 2006 11:39 PM IP
Now you just need to post how to do tables using [novacode]. That's the one I have trouble with, not HMTL. Good job Koyana!
|
|
Koyana Nuva
Member
Posts: 755
Registered: Jan 2006
|
Posted October 22nd, 2006 02:55 PM IP
Thanks, everybody! Took a while, and my head hurts. BTW, BluAngelGrrl, nice "Doom-like" avatar!
I don't think you can do tables in [novacode]. Can you?
|
|
seb_thib_55
Member
Posts: 1832
Registered: Apr 2005
|
Posted October 22nd, 2006 06:44 PM IP
Nope you can't 
|
|
BluAngelGrrl
Unregistered
Posts: 1784
Registered: Apr 2004
|
Posted October 22nd, 2006 10:41 PM IP
Someone needs to tell me that I can't, because I've done it. On a another board server, not exco.
|
|
Koyana Nuva
Member
Posts: 755
Registered: Jan 2006
|
Posted October 23rd, 2006 07:45 PM IP
Well, B.A.G. (BluAngelGrrl, sorry! *laughing*), I guess Exco doesn't support tables in Novacode. Maybe someday we will.
|
|
mrhaze
Member
Posts: 4
Registered: Dec 2006
|
Posted December 22nd, 2006 04:56 AM IP
can someone explain to me why when i enter a table into a post on the board, the board seems to put in a line of space above the board for every row of the table?
resulting in the table being way down the post.
i for one am confused so any advice greatfully received.
sy
|
|
SivoxII
Member
Posts: 5991
Registered: Apr 2006
|
Posted December 22nd, 2006 05:37 AM IP
I've seen this happen before too & I'm sat here wondering if it's some kind of rendering conflict? ... or the table is working from the forum template settings in some way?
Have you tried to modify the table parameters?
|
|
mrhaze
Member
Posts: 4
Registered: Dec 2006
|
Posted December 22nd, 2006 05:44 AM IP
hiya
yeah i'm just using basic table code. nothing new to me and it's all sound.
i've altered parameters for width, padding and spacing as well as alignment but to no avail.
just this continued oddity of the additional space has got me stumped.
tis peculiar....
|
|
Koyana Nuva
Member
Posts: 755
Registered: Jan 2006
|
Posted January 17th, 2007 11:43 AM IP
What about spanning?
<td colspan=#of total of cells in a row>
or
<td rowspan=#of total of cells in a column>
|
|
dreambaby1
Member
Posts: 41
Registered: Apr 2008
|
Posted June 2nd, 2008 02:14 PM IP
Quote:
mrhaze wrote:
can someone explain to me why when i enter a table into a post on the board, the board seems to put in a line of space above the board for every row of the table?
resulting in the table being way down the post.
i for one am confused so any advice greatfully received.
sy
|
I'm wondering if there's an answer to this too!
I put in tables a few weeks ago. I had one table for practically each letter of the alphabet, as this was a post with acronyms.
Above each table was one line of blank space for EACH row in the table below it. It was horrible to have 20 spaces preceding a table. I through my work out!
|
|
Dire_Phantom
Member
Posts: 7
Registered: Nov 2008
|
Posted November 30th, 2008 11:47 AM IP
Can this be used as an Affiliate table?
|
|
|
|
|
