Week Two, Day Two - Beautifying Your Table
Width, Border, Bordercolor


      Open up your index.html, and find your table.

 

<table> 
<tr> 
	<td>  This is table data #1. </td>  
	<td>  This is table data #2. </td>  

</tr>  

<tr> 
	<td>  This is table data #3. </td>  
	<td>  This is table data #4. </td>  

</tr>  

</table>  




Now, in the <table> tag, type this attribute:
<table width="300">

This will tell the table to be 300 pixels wide. Save, and reload the page.
It should look like this:

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



Hm..... looks like more space.
Go up and make that number 200.

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



Hm..... looks like less space. You can control the width of your table in either pixels, or percentages. Make the "200" into a "100%". And remember the double quotations.

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



Yay! And all with the 'width' command.

FAQ: Is pixels or percentages better?
Answer: Depends on what you want the table to do. The indexmain page of IA uses a pixeled table, because I ALWAYS want that page to look basically the same. However, many other tables on my site use a percentaged table. Why use one or the other? Use a pixel table when you want exact widths that won't change from screen to screen - if someone has a 400x600 resolution (which I DISrecommend!), it will look the same as if someone has a 1280x1024 resolution (which I do not recommend, since it is so high. I use a 1024x768, which is pretty much average, or close to average). However, use a percentage table if you want the data to fill up most of the screen, or if you want your page to be able to adjust to a smaller or larger screen.


Make two copies of the above table, and set one to 300 pixels, and one to 100%. Now, make you browser window smaller and larger, and watch the percentage table change. But the pixel table stays the same. That is the difference. Neither table is 'better' than the other, they just have their different usages.



All of this just on width. Let's move on.



Border
Images have borders when they are links; tables have borders regardless. But sometimes you have to specify. If you are taking this tutorial with Netscape, you probably have seen the borders the whole time. If you are using MSIE, you may or may not have. But now, you will.


Go into the table that is set to 100%, and type this:
border="1"
Save and reload.

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



Now you see the borders.
If you don't want to see the borders, you can set them to "0", but for the purposes of this tutorial, leave them on. We'll be messing with commands that make much more sense if you can see the borders.
Also, play with the border. Set it to 2, 3, 5, 9, 15, 40. Just for fun. See what it does.



Bordercolor
This command is the primary reason I dislike Netscape; it has shoddy and spotty support for code-defined table borders. I am of the opinion that this is so important to me, to be able to color my table if I so choose, that I rarely rarely rarely use Netscape. So, Netscape people out there, realize that this command is probably not supported by your current browser, and we can only hope for the future. (It is still a good one to learn, however.)


Right after your border command, type this:
bordercolor="#000000"
Remember hex code? At least I hope you remember this is 'black'. Save, reload.

This is table data #1. This is table data #2.
This is table data #3. This is table data #4.



This table has a black border that is 3 px wide. (px is an abbreviation of pixel.)
And you know how to do it now! You can make borders any color and width you wish. Go forth and have some fun, and come back tomorrow when you will learn:
Week Two, Day Three: Space In Your Table.





This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002. Sanna@SannaSK.com
HTML 3-A-Day
Main Index
SannaSK.com
Hosted by CaravanMultimedia.com