silver-melusine
June 24th, 2006, 06:41 PM
- HTML Basics: Lesson # 9 (Part Two: Spicing up the table)
Hey everyone,
Time to begin spicing up that table. Today we will learn to create the border and edit it, inserting color, alignment, and a few other tricks. So lets get to it eh?
****
First let us begin with our basic html as we always do.
<html>
<head>
<title>Lesson # 9, pt. 2</title>
</head>
<body>
<center><b>Lesson # 9, pt. 2</b>
So let us begin with making borders for a table. You start out as you usually do with a table, however, we will be putting attributes in the table tag to make a border. Let me show you how.
<table border="2">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Look at my examples page. The first example has a border around it. Now you can vary the border size just by changing the value. For example you can put <table border="5"> and that will make the border larger. Now lets go to the next example.
<table border="2" bordercolor="red">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Now with example # 2, I changed the border color to red. With the 'bordercolor' attribute the same rule applies as with fonts and color backgrounds. You can use either the color name or the hexidecimal code. I just chose red because it was simple.
****
Okay we are finished with learning about spicing up the borders, lets move onto adding a background. Now you have two options here which I will show you. You can either make one background for the entire table in which you will put in with your table tag or you can make a background for each individual table cell. Lets see the examples.
<table border="2" bgcolor="silver">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Now notice in example # 3 that the same attribute we use in our body tag for the color background of a page, we can use in our table tag.
<table border="2" bordercolor="black">
<tr>
<td bgcolor="red">One</td>
<td bgcolor="yellow">Two</td>
</tr>
<tr>
<td bgcolor="green">Three</td>
<td bgcolor="blue">Four</td>
</tr>
</table>
Now in example # 4 the table cells all have different colors. Cool huh?
****
Next, we are going to learn about alignment and how to specify width and height.
<table border="2" width="400" height="400">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
First off, notice that the attributes width and height have a 400. 400 is how many pixels that the width and height is. Take a look at my example # 5. See how I have changed the width and height of the table in that example. Remember, you don't want a table to be more than 800 pixels because everyone has different screen resolutions on their computer. Now lets learn about alignment.
<table border="2" width=400 height=400>
<tr>
<td align="center" valign="top">One</td>
<td align="center" valign="center">Two</td>
</tr>
<tr>
<td align="center" valign="bottom">Three</td>
<td align="right" valign="top">Four</td>
</tr>
</table>
Now notice in my example # 6 that my text in each of the cells are in different places. First lets establish the two attributes that you use.
align - is the horizontal alignment. You use left, center, and right for align.
valign - is the vertical alignment. You use top, center, and bottom for it.
****
Lets go on to the last part of our lesson which will cover a few more things you need to know about tables.
<table border="2" bordercolor="black" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="red">One</td>
<td bgcolor="yellow">Two</td>
</tr>
<tr>
<td bgcolor="green">Three</td>
<td bgcolor="blue">Four</td>
</tr>
</table>
The reason why I used my coding from before is because I wanted to show you what the difference is if you left it without changing the cellspacing and cellpadding attributes and what it would be like when I changed the attributes. In example # 7 you see that the cells are closer together compared to example # 4 where there is white space between them. Cellspacing changes the area around the cell, which was the white space. Cellpadding can add or subtract extra room from the inside of the cell.
<table border="2" width="400" height="400">
<tr>
<td colspan=2>One</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Finally we learn how to have a table where one row is a cell and the next row is two cells. In example # 8 we see how a table is affected by the colspan attribute.
<table border="2" width="400" height="400">
<tr>
<td rowspan="2">One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
If we look at example # 9 we see that one column is basically a cell and next to it is two cells. So it is basically colspan flipped sideways. So that is it for lesson # 9. I hope you enjoyed learning!
Resources:
http://www.htmlgoodies.com/tutorials/tables/article.php/3479791
Example:
http://www.geocities.com/mwhtmlclass/basichtml/lesson9pt2.html
Hey everyone,
Time to begin spicing up that table. Today we will learn to create the border and edit it, inserting color, alignment, and a few other tricks. So lets get to it eh?
****
First let us begin with our basic html as we always do.
<html>
<head>
<title>Lesson # 9, pt. 2</title>
</head>
<body>
<center><b>Lesson # 9, pt. 2</b>
So let us begin with making borders for a table. You start out as you usually do with a table, however, we will be putting attributes in the table tag to make a border. Let me show you how.
<table border="2">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Look at my examples page. The first example has a border around it. Now you can vary the border size just by changing the value. For example you can put <table border="5"> and that will make the border larger. Now lets go to the next example.
<table border="2" bordercolor="red">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Now with example # 2, I changed the border color to red. With the 'bordercolor' attribute the same rule applies as with fonts and color backgrounds. You can use either the color name or the hexidecimal code. I just chose red because it was simple.
****
Okay we are finished with learning about spicing up the borders, lets move onto adding a background. Now you have two options here which I will show you. You can either make one background for the entire table in which you will put in with your table tag or you can make a background for each individual table cell. Lets see the examples.
<table border="2" bgcolor="silver">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Now notice in example # 3 that the same attribute we use in our body tag for the color background of a page, we can use in our table tag.
<table border="2" bordercolor="black">
<tr>
<td bgcolor="red">One</td>
<td bgcolor="yellow">Two</td>
</tr>
<tr>
<td bgcolor="green">Three</td>
<td bgcolor="blue">Four</td>
</tr>
</table>
Now in example # 4 the table cells all have different colors. Cool huh?
****
Next, we are going to learn about alignment and how to specify width and height.
<table border="2" width="400" height="400">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
First off, notice that the attributes width and height have a 400. 400 is how many pixels that the width and height is. Take a look at my example # 5. See how I have changed the width and height of the table in that example. Remember, you don't want a table to be more than 800 pixels because everyone has different screen resolutions on their computer. Now lets learn about alignment.
<table border="2" width=400 height=400>
<tr>
<td align="center" valign="top">One</td>
<td align="center" valign="center">Two</td>
</tr>
<tr>
<td align="center" valign="bottom">Three</td>
<td align="right" valign="top">Four</td>
</tr>
</table>
Now notice in my example # 6 that my text in each of the cells are in different places. First lets establish the two attributes that you use.
align - is the horizontal alignment. You use left, center, and right for align.
valign - is the vertical alignment. You use top, center, and bottom for it.
****
Lets go on to the last part of our lesson which will cover a few more things you need to know about tables.
<table border="2" bordercolor="black" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="red">One</td>
<td bgcolor="yellow">Two</td>
</tr>
<tr>
<td bgcolor="green">Three</td>
<td bgcolor="blue">Four</td>
</tr>
</table>
The reason why I used my coding from before is because I wanted to show you what the difference is if you left it without changing the cellspacing and cellpadding attributes and what it would be like when I changed the attributes. In example # 7 you see that the cells are closer together compared to example # 4 where there is white space between them. Cellspacing changes the area around the cell, which was the white space. Cellpadding can add or subtract extra room from the inside of the cell.
<table border="2" width="400" height="400">
<tr>
<td colspan=2>One</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
Finally we learn how to have a table where one row is a cell and the next row is two cells. In example # 8 we see how a table is affected by the colspan attribute.
<table border="2" width="400" height="400">
<tr>
<td rowspan="2">One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
If we look at example # 9 we see that one column is basically a cell and next to it is two cells. So it is basically colspan flipped sideways. So that is it for lesson # 9. I hope you enjoyed learning!
Resources:
http://www.htmlgoodies.com/tutorials/tables/article.php/3479791
Example:
http://www.geocities.com/mwhtmlclass/basichtml/lesson9pt2.html