Page: 1 2
Wizard27
Global user
Registered: 10-2006
Posts: 122
|
|
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, 7:47
---  |
|
29/11/06, 7:32
|
|
indicaspice
Bronze Member
Global user
Registered: 12-2005
Location: my corner of the universe.
Posts: 191
|
|
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, 0:19
|
|
The Wizard3
Owner / Designer
Global user
Registered: 06-2006
Location: Castle Belgalor
Posts: 1858
|
|
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, 16:25
|
|
indicaspice
Bronze Member
Global user
Registered: 12-2005
Location: my corner of the universe.
Posts: 191
|
|
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, 1:34
--- Click pic |
|
19/12/06, 23:50
|
|
The Wizard3
Owner / Designer
Global user
Registered: 06-2006
Location: Castle Belgalor
Posts: 1858
|
|
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, 16:22
|
|
indicaspice
Bronze Member
Global user
Registered: 12-2005
Location: my corner of the universe.
Posts: 191
|
|
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, 17:28
|
|
indicaspice
Bronze Member
Global user
Registered: 12-2005
Location: my corner of the universe.
Posts: 191
|
|
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, 19:38
|
|
indicaspice
Bronze Member
Global user
Registered: 12-2005
Location: my corner of the universe.
Posts: 191
|
|
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, 20:47
|
|
Add A Reply
Page: 1 2
Link to us
- Blogs
- Hall of Honour
- Chat
|
You are not logged in (login)
Board's time is: 29/11/09, 16:29
|
|
|