Free Republic
Browse · Search
General/Chat
Topics · Post Article

Skip to comments.

HTML Sandbox 2010
FR ^ | 31 May 2008 | sig226

Posted on 09/20/2010 11:32:29 AM PDT by ShadowAce

It's time for a new HTML reference so you can make your posts look cool.

HTML means Hyper Text Markup Language. It's a set of simple commands used to format the text of your posts, add images, or links, or change the appearance.

URL is Uniform Resource Locator. It's the name of the page or the picture that you see, the www.http:// stuff. You'll need to use the URL to make links and post pictures.

Quotation Marks Quotes have to be used around the URLs for web pages and images on Free Republic. Some systems do not require this. Ours does.

Once the Free Republic software detects an HTML tag in your post, it will assume the entire thing was written for HTML. This means it will eliminate paragraphs and line breaks that you used to clarify your writing. In order to prevent that, I'll start with the two simplest tags, <br> and <p>. When you use html tags, they disappear when the post is pasted to the board, so don't worry if they look funny or if your post seems to run on.

This is the break tag. <br>
It tells the computer to end the line and start a new one. <br>
Just type it where you want the line to end. <br>

This is the paragraph tag. <p>

It tells the computer to end the line, insert a blank one, then start a new line.

The rest of the tags have to be used with an on tag and an off tag. This is simple enough. One of the most commonly used tags is the italic tag <i>. This tag turns the italics on. When you want the italics to end, turn them off by using the forward slash with the appropriate command, in this case, </i>.

Commonly used tags:
<p> paragraph
<br> line break
These tags are not used in pairs.

Commonly used pairs:
<i> </i>italics
<b> </b>bold characters
<u> </u>underline
<font color = red>This makes the font red.</font color = red> Orange,blue,green,purple,and yellow also work.
<center> </center>

This will put whatever is between the tags in the center of the page
and center justify the margins.

Headline fonts
Headlines add emphasis to an important point.

<h1> SIZE 1 </h1>

<h5> SIZE 5</h5>

You can use 1,2,3,4, or 5. The tags automatically insert a blank line between the headline and your next paragraph.

Sarcasm tag
</sarc> This is the sarcasm tag. It is not a real HTML tag. It is used to mark your witty repartee so that everyone will know you are making a funny. Type an ampersand - & then lt; then /sarc. An & and gt makes the other carat >.

How to create a link:
<a href="http://www.freerepublic.com/home.htm">www.Free Republic.com</a>
A means anchor. H ref means horizontal reference. It's called horizontal because the computer is going across the web to a different page. There are also vertical links that can go to specific points on the same page. What comes after the a href= is where the computer will go. The horizontal reference is the complete URL of the page you want to link. It's in the navigation bar at the top of your web browser. Highlight it and copy it. Make sure you get all of it. Some URLs are surprisingly long, and if you miss some of the URL, the link might not work.
You can type anything between the <a href=></a> parts.
www.Free Republic.com
Click here.
abc12345
All of these links go to the same page, I just typed different things between <a href=></a> tags.

How to add images to your post:
<img src=></img>
The img tags tell the computer to find and insert a picture.
These tags insert this wonderful image from Rush Limbaugh's website:
<img src="http://www.rushlimbaugh.com/home/daily/site_062807/content/01125113.Par.4584.ImageFile.jpg""height=218""width=285"></img>

You need to know the URL of the picture to do this. You can see the picture's URL when you put your cursor on the picture and right click the mouse. You see a small box with "properties" at the bottom. Left click on "properties" and you get a dialog box with the image URL and dimensions. It says Address: next to the URL, with (URL) underneath. Copy the URL and paste it after your img src= tag. Make sure you get all of the URL for the picture. There isn't a lot of space for the URL and sometimes they are very long. The image Size and Dimensions are beneath the URL. Free Republic allocates memory for each image, and if it doesn't know the dimensions of the image, it will allocate more memory than needed. It tells you the width, then the height of the picture. You don't have to tell the computer that the height of that image was 218 and the width was 285, but it saves memory and memory costs money.

This is called a hotlink. The picture is actually on another computer, but we see it here. This causes the other computer to use it's memory and machinery to provide the image. Some sites prevent it, or object to it. You can't hotlink an image from any of Yahoo's GeoCities pages, for example. Yahoo prevents it.

Do Not Cut And Paste List.
Some websites have forbidden us to copy and paste their material, including images. There have been lawsuits over this. The software will mostly prevent you from using the material that has been blocked, but not always. There are also some image sources that are not allowed on the list. Please don't use them. Lawsuits suck.
Link to the Do Not Cut And Paste List


TOPICS: Computers/Internet
KEYWORDS: 2010html; html; htmlsandbox; posting; sandbox; sandbox2010
Navigation: use the links below to view more comments.
first 1-5051-100101-126 next last
Hat tip to sig226 for the 2008 version. If you can think of anything else that needs to be mentioned here, please mention it!
1 posted on 09/20/2010 11:32:30 AM PDT by ShadowAce
[ Post Reply | Private Reply | View Replies]

To: rdb3; Calvinist_Dark_Lord; GodGunsandGuts; CyberCowboy777; Salo; Bobsat; JosephW; ...

2 posted on 09/20/2010 11:33:08 AM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce; sig226

Bookmarked and saved to favorites ;)


3 posted on 09/20/2010 11:34:32 AM PDT by DCBryan1 (FORGET the lawyers...first kill the "journalists". (Die Ritter der Kokosnuss))
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce
Thanks.
4 posted on 09/20/2010 11:35:48 AM PDT by gov_bean_ counter (Sarah Palin - For such a time as this...)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

WHO NEEDS HTML WHEN THERE’S CAPS LOCK?


5 posted on 09/20/2010 11:38:24 AM PDT by gundog (Why is it that useful idiots remain idiots long after they've exhausted their usefulness?)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

saved!

i gotta learn the pictures formula!


6 posted on 09/20/2010 11:38:43 AM PDT by Adder (Note to self: 11-2-10 Take out the Trash!!!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

Thanks for the post. Always wondered how some of that stuff is done. LOL


7 posted on 09/20/2010 11:39:58 AM PDT by goseminoles
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce
I've been here forever and still can't post a picture.

Can break for paragraphs

Bold

Italics

:-)

8 posted on 09/20/2010 11:39:58 AM PDT by republicangel
[ Post Reply | Private Reply | To 1 | View Replies]

To: gundog
WHO NEEDS HTML WHEN THERE’S CAPS LOCK?

Who needs CAPS LOCK when you know how to BLINK???

9 posted on 09/20/2010 11:44:46 AM PDT by JRios1968 (What’s the difference between 0bama and his dog, Bo? Bo has papers.)
[ Post Reply | Private Reply | To 5 | View Replies]

To: ShadowAce

On the image tag, you don’t need to have a separate closing tag, you can just add a / after the “ closing the url. Example:
(img src=”imageurl.com/image.jpg”/)


10 posted on 09/20/2010 11:47:08 AM PDT by mnehring
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce
HTML Help Threads for Newbies
(And Anyone Else Who Needs It)






11 posted on 09/20/2010 11:49:05 AM PDT by Rightly Biased (Do you know how awkward it is to have a political argument with a naked man?)
[ Post Reply | Private Reply | To 1 | View Replies]

To: mnehring
On the image tag, you don’t need to have a separate closing tag,...

True, but it's always good form to close your tags. :)

12 posted on 09/20/2010 11:49:10 AM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 10 | View Replies]

To: Rightly Biased

Thank you for that list. Hopefully, it will help those here who would like the help....


13 posted on 09/20/2010 11:50:19 AM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 11 | View Replies]

To: ShadowAce

..oh but that takes all the fun away.. or at least it used to when you could mess up the formatting of the entire thread when you didn’t.


14 posted on 09/20/2010 11:51:42 AM PDT by mnehring
[ Post Reply | Private Reply | To 12 | View Replies]

To: ShadowAce
¿Sandbox? ¡No se!
15 posted on 09/20/2010 11:52:29 AM PDT by rdb3 (The mouth is the exhaust pipe of the heart.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

I cut my teeth on HTML on FR but don’t use it much anymore.

It took me a bit to remember how to add the 2010 thread..

Backhoe actually got me started and I picked up his baton to help out as we grew.


16 posted on 09/20/2010 11:53:10 AM PDT by Rightly Biased (Do you know how awkward it is to have a political argument with a naked man?)
[ Post Reply | Private Reply | To 13 | View Replies]

To: ShadowAce

bookmark, and thanks.


17 posted on 09/20/2010 11:53:10 AM PDT by IrishCatholic (No local Communist or Socialist Party Chapter? Join the Democrats, it's the same thing!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: buckalfa

bumpity


18 posted on 09/20/2010 11:54:03 AM PDT by buckalfa (Confused and Bewildered)
[ Post Reply | Private Reply | To 11 | View Replies]

To: ShadowAce
I remeber way back when. If you didn't close your tag all the posts subsequent t yours would follow whatever HTML command you'd last entered. If it was < i > all the posts would be in italics until someone closed the tag.

Ah...the good old days...

19 posted on 09/20/2010 11:54:05 AM PDT by pgkdan (Protect and Defend America! End the practice of islam on our shores before it's too late!)
[ Post Reply | Private Reply | To 12 | View Replies]

To: ShadowAce

Firefox makes HTML easy with these addons:

BBCodeXtra is an extension, compatible with Mozilla FireFox and Mozilla Suite, which adds to the context menu new commands to insert BBCode/Html/XHtml codes in an easy and fast way.

BBCode - Adds BBCode, HTML, XHTML & Symbols formatting to the context menu for Blogs and forums (PHPBB and others).

These are essentially the same but each has a couple of extra features not found in the other.

Word Count Plus — Counts the number of words in selected text - great to avoid cutting and pasting and then finding out you exceeded the number of words (usually 300) allowed for excerpts from copyrighted material.


20 posted on 09/20/2010 11:55:41 AM PDT by CedarDave (Ten-year anniversary - proudly Freeping since Aug 17, 2000)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

Favorites, thank you.


21 posted on 09/20/2010 11:55:41 AM PDT by Navy Patriot (Sarah and the Conservatives will rock your world.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: pgkdan
...until someone closed the tag.

Usually after ten people yelled at you instead of closing it.

22 posted on 09/20/2010 11:57:41 AM PDT by gundog (Why is it that useful idiots remain idiots long after they've exhausted their usefulness?)
[ Post Reply | Private Reply | To 19 | View Replies]

To: ShadowAce
"True, but it's always good form to close your tags. :) "

Italians be gone!

23 posted on 09/20/2010 11:58:23 AM PDT by Henchster (Free Republic - the BEST site on the web!)
[ Post Reply | Private Reply | To 12 | View Replies]

To: JRios1968

Speaking of which, what happened to the blinking tag function?


24 posted on 09/20/2010 12:01:16 PM PDT by gundog (Why is it that useful idiots remain idiots long after they've exhausted their usefulness?)
[ Post Reply | Private Reply | To 9 | View Replies]

To: ShadowAce
Don't forget ascii maps ☺
25 posted on 09/20/2010 12:01:26 PM PDT by mylife (Opinions $1 Halfbaked 50c)
[ Post Reply | Private Reply | To 1 | View Replies]

To: mylife

I defer to you to post that one.... :)


26 posted on 09/20/2010 12:03:03 PM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 25 | View Replies]

To: gundog
Speaking of which, what happened to the blinking tag function?

Works just fine

27 posted on 09/20/2010 12:05:18 PM PDT by JRios1968 (What’s the difference between 0bama and his dog, Bo? Bo has papers.)
[ Post Reply | Private Reply | To 24 | View Replies]

To: ShadowAce

Bttt !

BTTT
28 posted on 09/20/2010 12:07:54 PM PDT by ADemocratNoMore (Jeepers, Freepers, where'd 'ya get those sleepers?. Pj people, exposing old media's lies.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: JRios1968
Not for me. :(
29 posted on 09/20/2010 12:07:59 PM PDT by gundog (Why is it that useful idiots remain idiots long after they've exhausted their usefulness?)
[ Post Reply | Private Reply | To 27 | View Replies]

To: ShadowAce
maps are different on different machines. http://www.danshort.com/ASCIImap/ Try alt 1 that gives me a smiley face, try alt 13 or 14.. that gives me musical notes ♪
30 posted on 09/20/2010 12:08:10 PM PDT by mylife (Opinions $1 Halfbaked 50c)
[ Post Reply | Private Reply | To 26 | View Replies]

To: ShadowAce

http://www.danshort.com/ASCIImap/


31 posted on 09/20/2010 12:08:59 PM PDT by mylife (Opinions $1 Halfbaked 50c)
[ Post Reply | Private Reply | To 26 | View Replies]

To: ShadowAce

THANKS TONS.

1. I put the copyright list in Word in 3 columns and printed for easy ref.

2. The last month or so, “navy” as color can end up green when other colors are put below it. I have to use “000066” to get it to stay navy. I have no idea why.

3. I understand that fonts are a function of one’s browser and settings etc. However, clearly some of the Word fonts work and some do not even in IE8 . . . I don’t know about Firefox, I haven’t dinked around much with fonts and Firefox.

4. If anyone has a list of viable easy to read fonts that also have some uniqueness—that work on FR with IE8, I’d be thrilled to have such a list. Have gone through all the Word fonts I was interested and laboriouisly tried them on FR in IE8 . . . a small percentage worked. And now I’ve misplaced that list. Silly me.


32 posted on 09/20/2010 12:10:43 PM PDT by Quix (PAPAL AGENT DESIGNEE: Resident Filth of non-Roman Catholics; RC AGENT DESIGNATED: "INSANE")
[ Post Reply | Private Reply | To 1 | View Replies]

To: republicangel
I've been here forever and still can't post a picture.

Try the View Source command for items you are having trouble accomplishing.

Right click on any page that has an image posting done in a manner you wish to duplicate. Or for that matter, has any formatting you wish to try and learn.

One of the choices after right clicking is "View Source" which will open a page of text code for that HTML page on your web browser -- in other words, how that page and its code comes across in plain text with the HTML flags.

From post numbers you can (with some study) find your way to the exact image or effect and see the actual code used. Copy and past that code to a notepad or word file for plain text and then modify it for the URL picture you want to post a link to.

Be sure to include the quotes and also to remember that a picture you have on your computer can't be shown -- it must be posted to the web by you or someone else to have a URL address that can be accessed.

33 posted on 09/20/2010 12:12:38 PM PDT by KC Burke
[ Post Reply | Private Reply | To 8 | View Replies]

To: ShadowAce

It would be great if you’d put the primer up on

TABLES

as well as colored borders for tables

. . .

as well as background colors with some attention as to easy on the eyes colors for backgrounds. Supposedly some research suggests that dark backgrounds and light text is physiologically easier and less tiring on the eyes. That’s why the founders of ATS (AboveTopSecret.com) use black background and grey text as their default. May be but I still like light background and black or navy text. LOL.

If you do the tables primer . . . it would be nice to also know how to size the tables and pair them so that a left side, e.g. which has a bigger paragraph is still kept next to a right side which has a short paragraph in some sort of reasonable proportion—if I’m making sense.


34 posted on 09/20/2010 12:14:48 PM PDT by Quix (PAPAL AGENT DESIGNEE: Resident Filth of non-Roman Catholics; RC AGENT DESIGNATED: "INSANE")
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

Thank you!


35 posted on 09/20/2010 12:14:59 PM PDT by GinaLolaB
[ Post Reply | Private Reply | To 1 | View Replies]

bump


36 posted on 09/20/2010 12:15:48 PM PDT by JoSixChip (You think your having a bad day?.....Just remember, somewhere out there is a Mr. Pelosi!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Quix

Good idea. I will look into that when I get home from work this evening—unless some other FReeper gets to it first.


37 posted on 09/20/2010 12:16:33 PM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 34 | View Replies]

To: ShadowAce

Thanks for the helpful summary.

It would be helpful if you could describe how to include tables.


38 posted on 09/20/2010 12:17:00 PM PDT by kidd
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

ping


39 posted on 09/20/2010 12:17:22 PM PDT by Mr. Jazzy ("I AM JIM THOMPSON and moderates make me PUKE!!!")
[ Post Reply | Private Reply | To 1 | View Replies]

To: kidd
It would be helpful if you could describe how to include tables.

Posts #34 and #37. Thanks for the idea.

40 posted on 09/20/2010 12:18:04 PM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 38 | View Replies]

To: gundog

Yep...you remember too!


41 posted on 09/20/2010 12:18:15 PM PDT by pgkdan (Protect and Defend America! End the practice of islam on our shores before it's too late!)
[ Post Reply | Private Reply | To 22 | View Replies]

To: pgkdan

As an ancillary to he none closed tags we also had some threads or posts with outright HTML bombs in them that turned the whole thread to never ending gibberish.

I think that John has closed most of those loop holes for such stuff now so that every post is filtered and closed by the posting software.


42 posted on 09/20/2010 12:24:02 PM PDT by KC Burke
[ Post Reply | Private Reply | To 41 | View Replies]

To: pgkdan
I only did it once, I swear! And I got yelled at because the guy tried to close my i tag with an /em tag. So sue me....
43 posted on 09/20/2010 12:25:30 PM PDT by gundog (Why is it that useful idiots remain idiots long after they've exhausted their usefulness?)
[ Post Reply | Private Reply | To 41 | View Replies]

To: ShadowAce

Thanks a lot!

Gotta get to it!

44 posted on 09/20/2010 12:27:38 PM PDT by melancholy (It ain't Camelot, it's Scam-a-lot!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: goseminoles

Anytime u need a private HTML lesson, just let me know ;)


45 posted on 09/20/2010 12:27:56 PM PDT by Howudoing
[ Post Reply | Private Reply | To 7 | View Replies]

To: Howudoing

Oh really????


46 posted on 09/20/2010 12:48:19 PM PDT by goseminoles
[ Post Reply | Private Reply | To 45 | View Replies]

To: ShadowAce

BUMP!


47 posted on 09/20/2010 12:53:53 PM PDT by G Larry (“patty-cake diplomacy” must give way to strong, decisive action!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce

JerseyHigh(Zoo)lander’s School For Kids Who Can’t HTML Good:

1. go to http://www.getfirefox.com
2. download and install firefox browser.
3. Open Firefox browser.
4. go to https://addons.mozilla.org/en-US/firefox/addon/1449/
5. Download Xinha Here! extension
6. go to https://addons.mozilla.org/en-US/firefox/addon/748/
7. Download and install the Greasemonkey extension for Firefox browser.
8. Shutdown and restart Firefox browser.
9. Go to http://userscripts.org/scripts/show/13598
10. Download and install the FR Posting Form Enhancer (hat tip to Freeper Cynwoody who developed this addon)
11. Go to http://userscripts.org/scripts/show/8972
12. Download and install the FR Tree Viewer (hat tip to Freeper Cynwoody who developed this addon)
13. Restart Firefox Browser.
14. Go to http://www.freerepublic.com/tag/*/index and sign in.
15. Bookmark http://www.freerepublic.com/tag/*/index

Ok... now what did you just do?


Firefox is a well known browser.


Xinha Here! is...
http://www.hypercubed.com/projects/firefox/

Portable WYSIWYG editor! No matter what site you’re visiting you can launch a WYSIWYG right in your browser.

Xinha Here! is a wrapper for the Xinha HTML editor that enables WYSIWYG editing in any HTML textarea and text input elements. Xinha Here! opens Xinha editor on the client side. This allows you to edit the field data in a WYSIWYG editor on any website without coping and pasting to a secondary editor. To use Xinha Here! simply select Xinha Here! from the context menu of the desired textarea or text input element. Up will pop a Xinha WYSIWYG HTML editor. Press OK and the raw HTML is pushed back to the original text box. Simple as that.

Because the Xinha editor is installed on your local machine rather then a server it is both portable (use it on any website) and faster (files don’t need to be transfered over the net). This extension goes great with the SpellBound spell checker extension.


Greasemonkey is...

Allows you to customize the way a webpage displays using small bits of JavaScript.

Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.


Free Republic Posting Form Enhancer is...
http://cynwoody.appspot.com/fr_posting_form_enhancer.html

Free Republic Posting Form Enhancer (FRPFE) is a user script that modifies the forum’s posting form to help with the entry of common HTML tags and to make better use of available screen real estate. It allows you more room to enter a post, and it displays the post preview at full window width, giving you a more accurate rendition of how your post will look when added to the thread. Free Republic is a political discussion site.

FRPFE makes the following changes to the posting page, immediately after it is loaded:

* Adds a toolbar above the reply box designed to save typing when entering HTML tags (see below).
* Makes the input elements and content boxes use the full width of the browser window.
* Reduces the To: box to a single line.
* Expands the Your Reply: box vertically, so that it takes up about half the height of the browser window.
* Lightens up the borders on the various content boxes.
* Adds keyboard shortcuts that allow you to activate the spell check, post preview, and post functions while keying in the reply box (see below).

For full usage details, please see the script homepage.


FR Tree Viewer is....
http://cynwoody.appspot.com/fr_tree_viewer.html

Free Republic Posting Form Enhancer
Free Republic Posting Form Enhancer (FRPFE) is a user script that modifies the forum’s posting form to help with the entry of common HTML tags and to make better use of available screen real estate. It allows you more room to enter a post, and it displays the post preview at full window width, giving you a more accurate rendition of how your post will look when added to the thread. Free Republic is a political discussion site.

FRPFE makes the following changes to the posting page, immediately after it is loaded:

* Adds a toolbar above the reply box designed to save typing when entering HTML tags (see below).
* Makes the input elements and content boxes use the full width of the browser window.
* Reduces the To: box to a single line.
* Expands the Your Reply: box vertically, so that it takes up about half the height of the browser window.
* Lightens up the borders on the various content boxes.
* Adds keyboard shortcuts that allow you to activate the spell check, post preview, and post functions while keying in the reply box (see below).

For full usage details, please see the script homepage.


Optional... download https://addons.mozilla.org/en-US/firefox/addon/655/
View Source Chart 3.02
so you can view, copy, and paste html source from various websites to post to FR. Especially useful when posting articles.


Optional... download https://addons.mozilla.org/en-US/firefox/addon/2257/
http://imtranslator.net/Translator-For-Firefox-ImTranslator_v_3_3_4.asp
ImTranslator includes Online Translator in 1640 language combinations


48 posted on 09/20/2010 12:54:21 PM PDT by JerseyHighlander
[ Post Reply | Private Reply | To 1 | View Replies]

To: ShadowAce; Quix; kidd

Help With Creating HTML Tables

Basic Table Tags

The three most important tags for tables is the opening table tag, <table> and the table row and table data tags - <tr> and <td> respectively.

The <tr> tag represents a row for the table

The <td> tag represents a cell (or column) inside the row.

Now, with that in mind, let's create a simple table:

<table>

<tr>  
<td>A</td>
<td>B</td>
<td>C</td>  
</tr>

<tr>  
<td>X</td>
<td>Y</td>
<td>Z</td>  
</tr>

</table>

And this is what the table would look like published:

A B C
X Y Z

Notice that by looking at the code, you can tell how many rows and columns are included just by looking at the code.  The two opening <tr> tags indicate two rows and the three opening <td> tags on each line represents three data cells (or three columns).

So if you wanted to add another row, you would just start with another <tr> and so forth....

Adding Table Borders

Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:

<table border="2">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example.  So now your table will look like this:

A B C
X Y Z

Changing a Table's Border Color

(Does not seem to work on FR)

You can change the color of a table border by simply adding the bordercolor attribute.

<table border="2" bordercolor="red">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

And here's what it would look like...

A B C
X Y Z

Adjusting Table Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing  attributes.

The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.

<table border="2" cellspacing="10" cellpadding="3">

<tr><td>A</td>  <td>B</td>  <td>C</td> </tr>

<tr><td>X</td>  <td>Y</td>  <td>Z</td> </tr>

</table>

This is what the table would look like now...

A B C
X Y Z

See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell.

If you want a table to have a single border (with no border around the letters), simply set the cellspacing to "0" and your table will look like this....

A B C
X Y Z

Specifying a Table Width

You can specify the width of a table by using either a percentage or a pixel width.

<table width="100%" border="2">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly.  Here's what it would look like.

 

A B C
X Y Z

As we mentioned, you can also set the table width using pixels instead of percentages.  So instead of setting it to 100%, you could set it to 300 pixels:

<table width="300" border="2">

<tr><td>A</td>  <td>B</td>  <td>C</td> </tr>

<tr><td>X</td>  <td>Y</td>  <td>Z</td> </tr>

</table>

The table would look like this:

A B C
X Y Z

Setting Column Widths

Sometimes you may not always want your columns to be the same width.  If this is the case, you need to set values on your table data <td> cells.  Again, you can set them by using percentages or pixel widths.

<table width="300" border="2">

<tr>
<td width="70%">
A</td>
<td>B</td>
<td>C</td>
</tr>

<tr>
<td width="70%">
X</td>
<td>Y</td>
<td>Z</td>
</tr>

</table>

This is what this table would look like.
 

A B C
X Y Z

See how the column width for the first column in both rows is set to 70%.  Notice there is no value set for the other 2 columns.  If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally.

Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table equally (roughly 45 pixels a piece).

You could also have expressed the column widths of this table in pixels instead of percentages.  The code would have looked like this:

<table width="300" border="2">

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

 

A B C
A B C
 

See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table.

What's the Difference Between Using Percentages and Pixel Widths?

Many people prefer to express their table width and column widths in percentages because that will ensure that the table takes up the same amount of screen no matter how big or small the screen resolution is. 

If someone is using a 21 inch monitor to view your site and you have a table width set to 300 pixels, the table will show up very small on their screen.  However if you set the table width to 70%, it will take up 70% of the screen no matter what size monitor the person is using. 

Or, let's say you create a table that is 760 pixels wide and someone has a 15 inch monitor set to a 640x480 resolution, then that person will have to scroll left and right just to see the entire table. 

On the other hand, if you set the table width to 100%, the table will fit the screen no matter what resolution the browser is set to.

So it's really up to you to decide what's the best layout for your tables. Personally I prefer to use percentages.  That way the table takes up the same amount of screen no matter what size monitor/resolution people are using.

Specifying a Table's Height

You can also set the table height by adding the height tag to the table code.

<table height="250" width="300" border="2">

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

Which will produce the following table:

A B C
A B C

Horizontally Aligning the Content Inside Tables

The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.

<table width="300" border="2">

<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

 

A B C
A B C

See how the first column is aligned to the center?  You can also right align the columns by using the align="right" inside the <td> cells.

Vertically Aligning the Content Inside the Table Cells

So far we've kept the table cell alignment at the default, which is the middle.  Notice in the above table that the A, B, and C are all three aligned in the middle of their cells.  Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:

<table height="250" width="300" border="2">

<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

 

A B C
A B C

I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top.  You can also align to the "bottom" or the "middle".

Creating a Left Navigation Layout With Tables

As we mentioned earlier, most left and right navigations are created using tables.  All you do is create a table with one row, two columns and no border.  Then align both of your columns to the top (using the valign tag) so your text will start in the top of the columns, not the middle.  Then depending on if you're going to have a right or left navigation, you'll make one column significantly smaller than the other.

Here's a simple left navigation layout:

<table width="100%" border="0">

<tr>
<td valign="top" width="25%">Left Nav Links Here</td>
<td valign="top" width="75%">Body Here</td>
</tr>

</table>

And here's what it would look like: 

Left Nav Links Here Body Here
 

Notice I set the border to "0" but it's still showing in the example.  I just did that to show how the layout would look. If you set your border to "0" you won't see any lines around your table.


So there ya have it!  That's a general overview of tables.  There's so much more you can do with them, but if you can understand the basic layout, you'll be able to do so much with the design of your web site.

49 posted on 09/20/2010 12:55:26 PM PDT by ShadowAce (Linux -- The Ultimate Windows Service Pack)
[ Post Reply | Private Reply | To 37 | View Replies]

To: ShadowAce
Testing 1-2, 1-2
50 posted on 09/20/2010 12:56:53 PM PDT by Beaten Valve
[ Post Reply | Private Reply | To 1 | View Replies]


Navigation: use the links below to view more comments.
first 1-5051-100101-126 next last

Disclaimer: Opinions posted on Free Republic are those of the individual posters and do not necessarily represent the opinion of Free Republic or its management. All materials posted herein are protected by copyright law and the exemption for fair use of copyrighted works.

Free Republic
Browse · Search
General/Chat
Topics · Post Article

FreeRepublic, LLC, PO BOX 9771, FRESNO, CA 93794
FreeRepublic.com is powered by software copyright 2000-2008 John Robinson