How to insert an image and add tables

This is for anyone unsure of how to include images in your posts here.

First of all you need to know where the image is stored online. Most images that I will be posting here I link from the Pet Society Database site (http://kogaweb.net/index.php) and I get the url to the images there by right clicking on the image and selecting 'copy image location'. If the image is your own you can use image hosting sites (such as imageshack.us)to host them for free for you. There is also a button above where you type your posts to 'Host an image'.

Ok so now you have the url to your image you need to use the bbcode to make it show and we do this by either:

i) clicking the 'Image' button above where you type your post to insert the code automatically. Just click the button and paste your image url into the box.

ii) manually type the tags

Code:

[img][/img]

around the url to your image. e.g.

Code:

[img]http://kogaweb.net/img/1824.png[/img]

will display the Merlin Doll image like this:

Hope this helps but if you are unsure at all just yell!

next question for you--how do you make the nicely formatted tables?

Thanks!

Ann Michele & Minou

There is a button above where you type to 'Insert a Table'. This will help you to add the basic table, rows and cells. It's the middle of the night and I woke up with a bad headache so please excuse me if I don't make 100% sense in this post but I will show you the code I used in my tables on my wishlist and trade list (will break it down for you at the end):

Code:

[table border="10" bordercolor="green"]
[tr]
[td]Bouncy Green Gummy[/td]
[td]Bouncy Red Gummy[/td]
[td]Bouncy Yellow Gummy[/td]
[/tr]

[tr]
[td][img]http://kogaweb.net/img/1694.png[/img] [/td]
[td][img]http://kogaweb.net/img/1692.png[/img] [/td]
[td][img]http://kogaweb.net/img/1693.png[/img] [/td]
[/tr]

[tr]
[td colspan="3"] [/td]
[/tr]
[/table]

This will give you the following table:

Bouncy Green Gummy	Bouncy Red Gummy	Bouncy Yellow Gummy

I removed the text formatting from this to make it easier for you to see the actual table tags but you can easily select your text and use the buttons up top to change the colours, sizes, font etc and it will put in all the tags for you like this:

Code:

[td][font=Comic Sans Ms][b][color=green][center][size=18]Treadmill[/size][/center][/color][/b][/font] [/td]

This would make your text in that table cell look like this:

Treadmill

The button does make tables much easier but I feel you need to be able to recognise the tags that come up. I hope seeing the code helps - you just need to think tables through one step at a time and remember to close all of your tags.

So basically you open your table with the table tag:

Code:

[table]
[/table]

Add borders and colour them if you wish. Adjust the number for the thickness of the border to suit you:

Code:

[table border="5" bordercolor="red"]
[/table]

Tables need rows so we use the tr tag to add a row:

Code:

[table border="5" bordercolor="red"]
[tr][/tr]
[/table]

So now we have our first row we add our first cell using the td tag:

Code:

[table border="5" bordercolor="red"]
[tr]
[td][/td]
[/tr]
[/table]

So now we have a table with 1 row and 1 column. Now we can add some text to the first cell, so we simply type what we want to put there inside the opening and closing td tags:

Code:

[table border="5" bordercolor="red"]
[tr]
[td]Table Cell 1[/td]
[/tr]
[/table]

And it's as simple as that!

Table Cell 1

Add another cell in the same row by using another td tag within the same tr tags:

Code:

[table border="5" bordercolor="red"]
[tr]
[td]Table Cell 1[/td]
[td]Table Cell 2[/td]
[/tr]
[/table]

Table Cell 1

Table Cell 2

Once you have enough columns add the next row:

Code:

[table border="5" bordercolor="red"]
[tr]
[td]Table Cell 1[/td]
[td]Table Cell 2[/td]
[/tr]

[tr]
[td]Table Cell 3[/td]
[td]Table Cell 4[/td]
[/tr]
[/table]

Just keep adding as many new rows (the tr tag) and cells within those rows (the td tag) as you want. To put an image inside the table all you do is the same as in my first post and have that code where you want the image to appear:

Code:

[table border="5" bordercolor="red"]
[tr]
[td]Table Cell 1[/td]
[td]Table Cell 2[/td]
[/tr]

[tr]
[td]Table Cell 3[/td]
[td]Table Cell 4[/td]
[/tr]

[tr]
[td][color=red][font=Courier New][size=20]Treadmill:[/size][/font][/color][/td]
[td][img]http://kogaweb.net/img/1258.png[/img][/td]
[/tr]

[/table]

Table Cell 1	Table Cell 2
Table Cell 3	Table Cell 4
Treadmill:

Again just yell if you need anything clarified.

thank you so much! I hope you are feeling better soon! Didn't know what to do particularly on the table borders. Thanks for being there!

No problem hon :-D

Thanks Donna, your the best!

'Morning Donna,
This is really helpful. Thanks so much for posting it!

I hope your head feels better.

Thanks Donna. Hopes you feel better.
This is really helpful and detailed. I will try it out soon.

I need to find out how to make this topic maybe a sticky now, will try to do soon

Thank you for all the great information! I will have to work on my lists to make them look better.