SFO Archive Forums - Tib jr provides a tutorial

<marquee><span style='font-size:14pt;line-height:100%'>TABLES</span></marquee>

Some Quite Relaxing Reading Music(Double click if you wish to have smoothing music with your tutorial)

The "Tables" html feature in this forum will be the feature I'll be covering and easily the most complicated. I will try to keep this as Straight Forward as possible.

Wins Losses Ties
7 3 1

<table width="400" height="100" bgcolor="ADA96E" align="center" border="2" cellpadding="20" cellspacing="5">
<tr>
<td>Wins</td>
<td>Losses</td>
<td>Ties</td>
</tr>
<tr>
<td>7</td>
<td>3</td>
<td>1</td>
</tr>
</table>

And the code:
Code Sample

[code:1]<table width="400" height="100" bgcolor="ADA96E" align="center" border="2" cellpadding="20" cellspacing="5">
<tr>
<td>Wins</td>
<td>Losses</td>
<td>Ties</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>2</td>
</tr>
</table> [/code:1]

Note: 2000warrior who originally constructed this tutorial had to delete all those returns you see above after the td's and tr's because your post is read with those counted, so if you include them in your tables you'll get an ugly amount of returns right above it. What really was posted looks more like this:

Code Sample
[code:1]<table width="400" height="100" bgcolor="ADA96E" align="center" border="2" cellpadding="20" cellspacing="5"><tr><td>Wins</td><td>Losses</td><td>Ties</td></tr><tr><td>7</td><td>3</td><td>1</td></tr></table> [/code:1]

1)Table calls the table and works much like the ordered and unordered lists.

2)Tr calls a table row.

3)Td calls a table cell (where the information is entered).

4)Width specifies the table's width is in pixels.

5)Height specifies the table's height in pixels.

6)Bgcolor specifies a background color for the table in hexidecimal.

7)Align specifies the alignment of the table (center, left, right).

8)Border specifies the border around the entire table in pixels.

9)Cellpadding specifies the distance from the right/left/top/bottom of a cell that content may be displayed in terms of pixels.

10)Cellspacing specifies the spacing between cells in pixels (that border you see between them).

11)You can find a more complete description of the hr tag and it's attributes HERE

Wins and losses In Tournament Of Legends
Saijin Fernando Blanka
Wins 7 2 3
Loses 3 8 7

And the code:
Code Sample

<table width="400" height="200" bgcolor="ADA96E" align="center" border="5" cellpadding="2" cellspacing="5">
<tr>
<td colspan="4" align="center"><font size="+2">Wins and Losses in Tournament Of Legends</td>
</tr>
<td>
</td>
<td width="100" align="center" bgcolor="0000FF">Saijin
</td>
<td width="100" align="center" bgcolor="0000FF">Fernando
</td>
<td width="100" align="center" bgcolor="0000FF">Blanka
</td>
</tr>
<tr>
<td align="center" bgcolor="FF7F00">Wins
</td>
<td align="center" bgcolor="FF0000">7
</td>
<td align="center" bgcolor="FF0000">2
</td>
<td align="center" bgcolor="FF0000">3
</td>
</tr>
<tr>
<td align="center" bgcolor="FF7F00">Loses
</td>
<td align="center" bgcolor="FF0000">3
</td>
<td align="center" bgcolor="FF0000">8
</td>
<td align="center" bgcolor="FF0000">7
</td>
</tr>
</table>

Again, all spaces and returns had to be deleted, which makes the real code look like this:
Code Sample

[code:1]<table width="400" height="200" bgcolor="0000FF" align="center" border="5" cellpadding="2" cellspacing="5"><tr> <td colspan="4" align="center"><font size="+2">Wins and Losses In Tournament Of Lengends</font></td></tr><td></td><td width="100" align="center" bgcolor="0000FF">Saijin</td><td width="100" align="center" bgcolor="0000FF">Fernando</td><td width="100" align="center" bgcolor="0000FF">Blanka</td></tr><tr><td align="center" bgcolor="00AAAA">Wins</td><td align="center" bgcolor=""FF0000>7</td><td align="center" bgcolor="FF0000">2</td><td align="center" bgcolor="FF0000">3</td></tr><tr><td align="center" bgcolor="32CD32">Loses</td><td align="center" bgcolor="FF0000">3</td><td align="center" bgcolor="FF0000">8</td><td align="center" bgcolor="FF0000">7</td></tr></table> [/code:1]

Colspan specifies how many columns a td will span. The default is 1.

Width specifies the width of a td in pixels (or in % of the table if you chose to use a % at the end).

Height was not used, but it can be used to define the height of a td in pixels or in % of the table.

Bgcolor specifies what the background color of a table is in hexidecimal.

You can find a more complete description of the td tag and it's attributes here

Feel free to use a better color scheme than I did.

A. Hexidecimal

Hexidecimal can be thought of just as a number language with 16 digits. Instead of being 0-9 like the 10 decimal number system, it's 0-F, with A = 10, B = 11, C = 12, and so on until F = 16. In order to transfer real numbers into hexidecimal, all that's needed is to divide the real number by 16, then multiply the remainder by 16. The remainder is your one's digit and the other number goes in the 10's digit place.

For example, if you had a red value of 230, you'd first divide it by 16, which will give you 14.375. 14 is E in hexidecimal, and .375x16 is 6, so your hexidecimal number is E6. Therefore, to make this color in html, you'd have your font tag and then set color="#E60000" (the # is optional). Since the highest rgb value for a red/green/blue color is 255, which is f in hex, you don't have to worry about translating hexidecimal any further past a 10's digit.

Hexidecimal Color Codes For SFO FORUM=

[code:1]#000000[/code:1] =BLACK
[code:1]#FFFFFF[/code:1] =WHITE
[code:1]#FF0000[/code:1] =RED
[code:1]#0000FF[/code:1] =BLUE
[code:1]#00FFFF[/code:1] =LIGHTBLUE
[code:1]#FFFF00[/code:1] =YELLOW
[code:1]#00FF00[/code:1] =LIMEGREEN
[code:1]#32CD32[/code:1] =GREEN
[code:1]#FF00FF[/code:1] =ORCHID
[code:1]#000080[/code:1] =NAVY
[code:1]#FF8040[/code:1] =TEAL
[code:1]#000F22[/code:1] =DARKNAVY
[code:1]#FF8040[/code:1] =LIGHTORANGE
[code:1]#FF7F00[/code:1] =ORANGE
[code:1]#CCCCCC[/code:1] =LIGHTGRAY
[code:1]#A8A8A8[/code:1] =GRAY
[code:1]#F52887[/code:1] =PINK
[code:1]#F660AB[/code:1] =LIGHTPINK
[code:1]#3BB9FF[/code:1] =AQUA 1
[code:1]#FDD017[/code:1] =LIGHTTAN
[code:1]#ADA96E[/code:1] =KHAKI
[code:1]#E77471[/code:1] =PEACH
[code:1]#736AFF[/code:1] =PURPLE[code:1]#728FCE[/code:1] =SEABLUE
[code:1]#810541[/code:1] =MAROON
[code:1]#348781[/code:1] =TEAL
[code:1]#48CCCD[/code:1] =AQUA 2
[code:1]#EE9A4D[/code:1] =LIGHTTAN
[code:1]#FA9B3C[/code:1] =TAN
[code:1]#8D38C9[/code:1] =DARK PURPLE

B. Links

If the current selection at SFO isn't enough please proceed to this website to read up on color schemes in Hexidecimal coding.

http://www.hypergurl.com/rgbcolorchart.html

If you want to learn more about how to use html or need a more in depth explanation of it, then try checking out Blanka09's Advised HTML Tutorial Link and 2000warrior's Original Sudjestion(Please Double Click Underlined Text)

I'm out. http://bbs.projectx.cyberfuturism.co...cons/icon5.gif

PS: 2000warrior The Great One Created This tutorial first,but it was over looked...like alot of his attempts were,but at anyrate think of him while viewing this.</font>

Edited By SBYRD5 on 1106247030