Runboard.com
You're welcome.







runboard.com       Sign up (learn about it) | Sign in (lost password?)

Page:  1  2 

 
Wizard27 Profile
Live feed
Blog
Friends
Miscellaneous info



Registered: 10-2006
Posts: 122
Karma: 0 (+0/-0)
reply | quote
Using Tables


Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

The letters td stands for "table data," which is the content of a data cell.
A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc., here is a basic example....

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

If you want to use a header in your table then you <th> tag

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Cell Padding
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.

<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" cellpadding="10"><tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Cell Spacing
This example demonstrates how to use cellspacing to increase the distance between the cells.

<html>
<body>

<h4>Without cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Adding a background colour or image[/big
Here is an example.....

<html>
<body>

<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>A background image:</h4>
<table border="1" background="your picture URL goes here">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>


Wizard27, 29/11/06, 8:47


---

29/11/06, 8:32 Link to this Post Send an Email to this person   Send a PM to this person
 
indicaspice Profile
Live feed
Blog
Friends
Miscellaneous info

Bronze Member

Registered: 12-2005
Location: my corner of the universe.
Posts: 191
Karma: 0 (+0/-0)
reply | quote
Re: Using Tables


Hi Wiz,
I have a table on my board, but when I go to add more links to it, I end up stretching it out widthwise instead of lenghtwise. I am a bit confused as to which of those codes I need to add.

---
Click pic
19/12/06, 1:19 Link to this Post  
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Owner / Designer

Registered: 06-2006
Location: Castle Belgalor
Posts: 2201
Karma: 3 (+3/-0)
reply | quote
Re: Using Tables


If you want to keep things shorter then add the <br> tag. This tag will start a new line underneath your wording.

Here is an example.....

<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second<br>open</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

As stated in this section, open a plain notepad and enter the above HTML and then use 'Save as'.

Save it as Testpage.html to your desktop, this will show the 'e' icon with Testpage underneath it.

Double-click to open it, this will start the internet explorer window with the table, click on 'View' then 'Source', this will open your notepad window with the HTML, make a few changes, click on 'Save', go back to your testpage and hit refresh icon or F5 to see the changes.

Have a play around, if you get stuck then I can maybe help you setup your table box with the content you wish to add, this way you can see the HTML setup and then adjust it to your liking
19/12/06, 17:25 Link to this Post Send a PM to this person Blog
 
indicaspice Profile
Live feed
Blog
Friends
Miscellaneous info

Bronze Member

Registered: 12-2005
Location: my corner of the universe.
Posts: 191
Karma: 0 (+0/-0)
reply | quote
Re: Using Tables


Thanks, I shall play with it and see what happens. Luckily I have a test board that I practice on that way I don't mess up the real board....lol!

Ok, I sort of got it and I like the way it went except when I got the second row, some went into a third row or cell and I have some gaps. Where did I mess up? My test board is here...
http://com1.runboard.com/bgvtestboard
And I did add it to the real board as well.



indicaspice, 20/12/06, 2:34


---
Click pic
20/12/06, 0:50 Link to this Post  
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Owner / Designer

Registered: 06-2006
Location: Castle Belgalor
Posts: 2201
Karma: 3 (+3/-0)
reply | quote
Re: Using Tables


Hi indica,

You did very, very well for a first time, the reason why some were not showing is that you forgot to close the <td> tag on some the entries, the close tag is </td>

I've viewed the test page and the table looks good.

Here is the finished HTML I've edited for you, I've added a few websites just get them in the table for you so it hasn't any gaps

<h4></h4>
<table border="1">
<tr>
  <td><a href=http://thegardenofweedin.com/SMF/index.php>Garden of Weedin</a> </td>
  <td><a href=http://com4.runboard.com/bdysrushdragon> Dy's Rushdragon</a></td>
  <td><a href="http://com3.runboard.com/bastepupfromthetrailerpark">Gillihunts Trailer Park</a></td>
</tr>
  <td><a href=http://cookingwithspice.yuku.com/directory/>Cooking With Spice</a></td>
  <td><a href=http://grannie.proboards28.com/index.cgi?>Pitszal's Place</a></td>
  <td><a href=http://www.yahoo.com>Yahoo</a></td>
</tr>
  <td><a href=http://ellesemporium.yuku.com/forum/viewtopic/id/363>Elle's Emporium</a></td>
  <td><a href=http://p079.ezboard.com/bacesasylumworld>Ace's Asylum</a></td>
  <td><a href=http://www.msn.com>MSN</a></td>
<tr>
  <td><a href=http://com4.runboard.com/bnomoresheep>No More Sheep</a></td>
  <td><a href=http://com3.runboard.com/bastepupfromthetrailerpark>Gillihunts Trailer Park</a></td>
  <td><a href=http://cookingwithspice.yuku.com/directory/>Cooking With Spice</a></td>
</tr>
</table>

</body>
</html>

I've highlighted the ones I've added in yellow for you, all you have to do is simply delete the URL address and add your own.

Again, very well done, if you need further assistance then don't be shy on asking for it, always a pleasure to help

Wiz

20/12/06, 17:22 Link to this Post Send a PM to this person Blog
 
indicaspice Profile
Live feed
Blog
Friends
Miscellaneous info

Bronze Member

Registered: 12-2005
Location: my corner of the universe.
Posts: 191
Karma: 0 (+0/-0)
reply | quote
Re: Using Tables


Ah thanks. I should have realized it needed a / in front as that is the common denominator they all have when ending something. Ok, off to try...lol!

---
Click pic
20/12/06, 18:28 Link to this Post  
 
indicaspice Profile
Live feed
Blog
Friends
Miscellaneous info

Bronze Member

Registered: 12-2005
Location: my corner of the universe.
Posts: 191
Karma: 0 (+0/-0)
reply | quote
Re: Using Tables


I've had to delete a couple of links. I added heavenly hideaway but it seemed to go into first row. I guess I should have just deleted the url of the board and replaced it with heavenly hideaways instead. That way I wouldn't have those two big gaps now......argh!!!!

---
Click pic
1/1/07, 20:38 Link to this Post  
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Owner / Designer

Registered: 06-2006
Location: Castle Belgalor
Posts: 2201
Karma: 3 (+3/-0)
reply | quote
Re: Using Tables


I've corrected your HTML and placed the new code in your computer section, plus sent you a PM note about it too

Wiz
1/1/07, 21:08 Link to this Post Send a PM to this person Blog
 
indicaspice Profile
Live feed
Blog
Friends
Miscellaneous info

Bronze Member

Registered: 12-2005
Location: my corner of the universe.
Posts: 191
Karma: 0 (+0/-0)
reply | quote
Re: Using Tables


Thanks so much, it looks much better now. But what if I want to add another row across instead of going down with 2 rows of 4. Have 3 rows of 4 or 4 rows of 4. Am I making sense?

---
Click pic
1/1/07, 21:47 Link to this Post  
 
The Wizard3 Profile
Live feed
Blog
Friends
Miscellaneous info

Owner / Designer

Registered: 06-2006
Location: Castle Belgalor
Posts: 2201
Karma: 3 (+3/-0)
reply | quote
Re: Using Tables


This is the code if you want 4 columns across and 2 rows down


<h4></h4>
<table border="1" bgcolor="white">

  <td><a href=http://cookingwithspice.yuku.com/directory/>Cooking With Spice</a></td>
  <td><a href=http://grannie.proboards28.com/index.cgi?>Pitszal's Place</a></td>
  <td><a href=http://http://com1.runboard.com/bwizardsworkshop>Wizards PC Workshop</a></td>
  <td><a href=http://ellesemporium.yuku.com/forum/viewtopic/id/363>Elle's Emporium</a></td>
</tr>

  
  <td><a href=http://p079.ezboard.com/bacesasylumworld>Ace's Asylum</a></td>
  <td><a href=http://com3.runboard.com/bastepupfromthetrailerpark>Gillihunts Trailer Park</a></td>
  <td><a href=http://p079.ezboard.com/bacesasylumworld>Ace's Asylum</a></td>
  <td><a href=http://com3.runboard.com/bastepupfromthetrailerpark>Gillihunts Trailer Park</a></td>
  
</tr>

</table>
</body>
</html>


Also, look at my Table Example pics, this will give you some idea on how to organize your tables

The Wizard3, 1/1/07, 22:34
1/1/07, 22:21 Link to this Post Send a PM to this person Blog
 


Add A Reply

Page:  1  2 





You are not logged in (login)
--> The Runboard Web-Ring <--
Previous | Home | Join | Random | Next