 |
|
|
|
HTML Tables Tutorial
What are HTML tables?I am going to explain here how to use tables in your Web pages. Basically, it all boils down to only 3 tags...
Keep in mind: a table is made up of rows, and rows are made up of cells.
Well, those are the tags! Now you will make your first table. The exercises in this tutorial can be made just using Window's Notepad. Open Notepad, and copy the following to begin:
<HTML> <HEAD> <TITLE>Exercise on tables</TITLE> </HEAD> <BODY> </BODY> </HTML>
Save it as exercise1.html. Start up your browser: Internet Explorer, Firefox, Opera, or whatever you prefer. Open exercise1.html in your browser: "File,Open". Keep both windows opened, Notepad and the browser. After you make a change to your page, save the document, shift to the browser's window, and press the "Refresh" key. This way you can create your pages and see at once the results of your work. Type the TABLE tags. This simply reserves the place for a table. I have included the keyword "BORDER" so that you can see on the screen where each row and cell starts and ends.
<HTML> <HEAD> <TITLE>Exercise on tables</TITLE> </HEAD> <BODY> <TABLE BORDER> </TABLE> </BODY> </HTML>
Every table must have at least one row.
<HTML> <HEAD> <TITLE>Exercise on tables</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> </TR> </TABLE> </BODY> </HTML>
And every row must have at least one cell.
<HTML> <HEAD> <TITLE>Exercise on tables</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD></TD> </TR> </TABLE> </BODY> </HTML>
In the rest of the example I will just write what is within the table tags. I will leave out the head, body, title, etc., tags so as not to waste space, but of course you must leave them in your document. Now you will type something into the only cell, for example, your pet's name: Buster. Let us put Buster in the cell.
<TABLE BORDER> <TR> <TD>Buster</TD> </TR> </TABLE>
You have now finished the making of a full HTML table! Refresh the browser and check that everything is OK. If things were done correctly, your table should look like this:
HTML table bordersIn this lesson I will show you what can be done with borders. Every time you make a change and want to see how it looks, you must hit the reload hotkey on your browser. This could be F5 or Control-R; there could be also a button labeled "Actualize" or "Refresh." We will begin by giving a value to the border.
<TABLE BORDER="1"> <TR> <TD>Buster</TD> </TR> </TABLE>
Now we will increase the border to 5.
<TABLE BORDER="5"> <TR> <TD>Buster</TD> </TR> </TABLE>
And now to 25.
<TABLE BORDER="25"> <TR> <TD>Buster</TD> </TR> </TABLE>
You can also have no borders.
<TABLE> <TR> <TD>Buster</TD> </TR> </TABLE>
The default (that is, what happens when the border is not specified) is a border-less table. For now, I will use just a border of 2.
<TABLE BORDER="2"> <TR> <TD>Buster</TD> </TR> </TABLE>
All that you make with text outside of a table can be made with the text contained in a cell. For example, you may apply bold formatting to Buster.
<TABLE BORDER="2"> <TR> <TD><B>Buster</B></TD> </TR> </TABLE>
Or you may make the name of Buster a link to its picture.
<TABLE BORDER="2"> <TR> <TD><A HREF="buster.jpg">Buster</A></TD> </TR> </TABLE>
HTML table widthIf I specify no size, the table is just as big as it needs to be.
<TABLE BORDER="2"> <TR> <TD>Buster, Puppy and Doggy</TD> </TR> </TABLE>
However, specifying a size for the table is very simple.
<TABLE BORDER="2" WIDTH="100%"> <TR> <TD>Buster, Puppy and Doggy</TD> </TR> </TABLE>
The 100% width gives the table the full width of the browser's window. I will make it now of 75%.
<TABLE BORDER="2" WIDTH="75%"> <TR> <TD>Buster, Puppy and Doggy</TD> </TR> </TABLE>
I will stay for now with Buster, and make the table width of 50%.
<TABLE BORDER="2" WIDTH="50%"> <TR> <TD>Buster</TD> </TR> </TABLE>
Let us see what happens if we use an absolute value of 50 instead of a percentage.
<TABLE BORDER="2" WIDTH="50"> <TR> <TD>Buster</TD> </TR> </TABLE>
Now, I will make the width to have a value of 100.
<TABLE BORDER="2" WIDTH="100"> <TR> <TD>Buster</TD> </TR> </TABLE>
There are two ways to specify a table's width: absolute and percentage. You can use each style as you see fits. The height can also be modified.
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD>Buster</TD> </TR> </TABLE>
HTML table alignmentYou can control the vertical (VALIGN) and horizontal (ALIGN) alignment of the cell's contents.
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="CENTER">Buster</TD> </TR> </TABLE>
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="RIGHT">Buster</TD> </TR> </TABLE>
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT">Buster</TD> </TR> </TABLE>
The default value is left alignment. You have probably gathered by know that the default value is the value that the browser assumes if you have not told it otherwise. Now, I will change the vertical alignment.
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT" VALIGN="TOP">Buster</TD> </TR> </TABLE>
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT" VALIGN="BOTTOM">Buster</TD> </TR> </TABLE>
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT" VALIGN="MIDDLE">Buster</TD> </TR> </TABLE>
The default is middle vertical alignment. Besides text, tables can also include images. I will use next an IMG tag as the content of our cell to show you a picture of Buster.
<TABLE BORDER="2" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT" VALIGN="MIDDLE"><IMG SRC="buster.jpg" WIDTH="100" HEIGHT="100"></TD> </TR> </TABLE>
It is always good practice to include size attributes in all image tags. This makes things easier to the browser, and so the page is displayed faster.
HTML table cellsFor this lesson we will return to text mode, and to begin we will left Buster alone in the table.
<TABLE BORDER="3" WIDTH="100" HEIGHT="75"> <TR> <TD ALIGN="LEFT" VALIGN="MIDDLE">Buster</TD> </TR> </TABLE>
I will also take out any alignment so that changes are more easily seen.
<TABLE BORDER="3" WIDTH="100" HEIGHT="75"> <TR> <TD>Buster</TD> </TR> </TABLE>
We will enlarge our table to make room for Doggy.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD>Buster</TD> </TR> </TABLE>
And now let us put Doggy in his own cell.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD>Buster</TD> <TD>Doggy</TD> </TR> </TABLE>
Each column of the table may have its own width. If you specify no width, the browse will calculate an optimal one. Here I will make each column of 150.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="150">Buster</TD> <TD WIDTH="150">Doggy</TD> </TR> </TABLE>
You could also express widths as percentages.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="50%">Buster</TD> <TD WIDTH="50%">Doggy</TD> </TR> </TABLE>
Let us give Buster a bigger place in the table.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="80%">Buster</TD> <TD WIDTH="20%">Doggy</TD> </TR> </TABLE>
To put also Puppy in its own cell, I will take a little space from Buster's cell.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="60%">Buster</TD> <TD WIDTH="20%">Doggy</TD> <TD WIDTH="20%">Puppy</TD> </TR> </TABLE>
HTML table rowsThree dogs that just came by also want to be in the table. We will lodge them in another row.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="60%">Buster</TD> <TD WIDTH="20%">Doggy</TD> <TD WIDTH="20%">Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
As you can see, the second row inherits the cell widths of the first row.
If we take out Rusty's cell, the table is still a correct one. The second row just happens to have only two cells.
<TABLE BORDER="3" WIDTH="300" HEIGHT="75"> <TR> <TD WIDTH="60%">Buster</TD> <TD WIDTH="20%">Doggy</TD> <TD WIDTH="20%">Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> </TR> </TABLE>
I will put Rusty again in its place and remove the width attributes to prepare things for the next lesson.
<TABLE BORDER="3"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
HTML table padding and spacingI will treat now the topic of padding. Inner padding within a cell is called "cell padding", and padding among cells is called "cell spacing." Both can be modified through the corresponding attributes.
<TABLE BORDER="3" CELLPADDING="12"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
The default value for CELLPADDING is 1, for aesthetic reasons. I will now modify CELLSPACING so that you can see the effect.
<TABLE BORDER="3" CELLSPACING="12"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
The default value for CELLSPACING is 2. Values can be set for both attributes simultaneously.
<TABLE BORDER="3" CELLSPACING="12" CELLPADDING="12"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
HTML table colorsI will show you next how to add colors to your table. To begin, we will return to our simple table.
<TABLE BORDER="3"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
You can specify a background color for a whole table, for a row, or for a single cell. The attribute BGCOLOR is used in all cases. The colors I will be using here are: silver, blue, magenta, olive, lime, cyan, red, green, and yellow.
<TABLE BORDER="3" BGCOLOR="yellow"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
<TABLE BORDER="3"> <TR BGCOLOR="cyan"> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR BGCOLOR="lime"> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
<TABLE BORDER="3"> <TR BGCOLOR="magenta"> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD BGCOLOR="red">Toby</TD> <TD>Buddy</TD> <TD BGCOLOR="red">Rusty</TD> </TR> </TABLE>
There is an order of priority among table, row, and cell attributes. It can be simply expressed thus: the more local attribute overrides the less local one. You can see it in the following example.
<TABLE BORDER="3" BGCOLOR="olive"> <TR BGCOLOR="green"> <TD BGCOLOR="silver">Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
HTML table spanningI will introduce now two attributes: COLSPAN and ROWSPAN. Here is our pet table.
Let us suppose that Doggy leaves the table. This is what we have.
<TABLE BORDER="3"> <TR> <TD>Buster</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
The filled cells gather at the left and there is an empty place at the right. If we want that Buster occupies the middle cell that was formerly of Doggy, we must use the COLSPAN attribute.
<TABLE BORDER="3"> <TR> <TD COLSPAN="2">Buster</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
To show you how the browser tries to amend what we make wrongly, I will put Doggy back, but I will "forget" to remove the COLSPAN of Buster's cell. Let us see how the browser handles this.
<TABLE BORDER="3"> <TR> <TD COLSPAN="2">Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
The result is that our table now appears to have four columns instead of three. The browser doesn't complain of our error, and tries to do its best with what we handle it. The point is that you must specify exactly what you want if you don't want to get bad surprises. Let us take Doggy and Puppy out altogether. As Buster has all the row to itself, it will stand in the middle.
<TABLE BORDER="3"> <TR> <TD COLSPAN="3" ALIGN="CENTER">Buster</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
Let us go back to the beginning so that you can learn about ROWSPAN.
<TABLE BORDER="3"> <TR> <TD>Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Toby</TD> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
ROWSPAN works the same as COLSPAN, but with rows instead of columns. Removing Toby, we can make that Buster ocuppies its cell.
<TABLE BORDER="3"> <TR> <TD ROWSPAN="2">Buster</TD> <TD>Doggy</TD> <TD>Puppy</TD> </TR> <TR> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
ROWSPAN and COLSPAN can be used simultaneously, as in the following example.
<TABLE BORDER="3"> <TR> <TD ROWSPAN="2">Buster</TD> <TD COLSPAN="2">Doggy</TD> </TR> <TR> <TD>Buddy</TD> <TD>Rusty</TD> </TR> </TABLE>
Tables can be nested, that is a table can be put within another table. Let us start again with a simple table.
<TABLE BORDER="3"> <TR> <TD>Contents</TD> </TR> </TABLE>
Now, we will make the table a little bigger.
<TABLE BORDER="3" WIDTH="105" HEIGHT="100"> <TR> <TD>Contents</TD> </TR> </TABLE>
Replace "Contents" with another table.
<TABLE BORDER="3" WIDTH="105" HEIGHT="100"> <TR> <TD> <TABLE BORDER="3"> <TR> <TD>Contents</TD> </TR> </TABLE> </TD> </TR> </TABLE>
The main table can be centered using the <CENTER> tag.
<CENTER> <TABLE BORDER="3" WIDTH="105" HEIGHT="100"> <TR> <TD> <TABLE BORDER="3"> <TR> <TD>Contents</TD> </TR> </TABLE> </TD> </TR> </TABLE> </CENTER>
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
