Sunday, 12 August 2012

HTML lesson #4 - Tables


In this lesson we are going to learn about tables. Tables are one of the most important things in web site building. Just about all websites use tables but you don't see them very often because they're hidden. Tables are used to format the text and images.

Your first table

To create a table you need to use the <table> tag. Here is what it look like:
<table>
</table>

As you can see they're just like normal tags but you have not got a table yet. You need to make table rows that contain table cells which hold your data. The <tr> tag is for a row and the <td> tag is for a table data cell. Here is a row with 3 cells in it:
123

<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

It is important to put something in a td otherwise it won't show up. Also note that I said border=1. If you want the table border to show up in some browsers you have to do this. You can change the 1 to something higher if you want a thicker border. In the following example we're going to create 2 rows each with 2 cells:
12
12

<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Width and height

If you want to change the width or height of the cells then you use the width and height attributes. Theses can be used for the table or the tr or the td. Here's an example of making the table 100 pixels high and making each of the top cells 100 pixels wide:
12
12

<table border="1" height="100">
<tr>
<td width="100">1</td>
<td width="100">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Look at how the cells in the second row are the same width as the ones above them but don't have the width=100 attribute. Widths and heights are not only measured in pixels but can also be set in %. By simply putting a % after the 100 we make the table 100% of the width of the page.

Colspan and Rowspan

What if we wanted 1 cell in the top row and 2 cells directly underneath that cell? If you just make 1 cell in the top row and 2 in the bottom row it doesn't work. You need to use colspan:
1
12

<table border="1">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

As you can see the top row spans 2 columns. You can do the same with rows like this:
12
1
<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>

We just made the first cell span across 2 rows.

Text alignment

By default text in a table will be on the left side of the cell in the middle. Sometimes you'll want to position the text in the center of the cell or make at the top. We us the align attribute for horizontal text alignment and the valign attribute for vertical alignment. Here are examples of what you can get:
leftcenterrighttopmiddlebottom

<table border="1" height="100">
<tr>
<td width="100" align="left">left</td>
<td width="100" align="center">center</td>
<td width="100" align="right">right</td>
<td width="100" valign="top">top</td>
<td width="100" valign="middle">middle</td>
<td width="100" valign="bottom">bottom</td>
</tr>
</table>

Cellpadding and cellspacing

In each cell you'll notice that the text is not right up against the border of the cell. The space between the text and the border is called padding and we can increase or decrease it with the cellpadding attribute:
1

<table border="1" cellpadding="0">
<tr>
<td>1</td>
</tr>
</table>

1

<table border="1" cellpadding="9">
<tr>
<td>1</td>
</tr>
</table>

You can also increase or decrease the space between cells with the cellspacing attribute:
12

<table border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

12

<table border="1" cellspacing="9">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Colors

You can change the border color of a table or cell with the bordercolor attribute:
1

<table border="1" bordercolor="red">
<tr>
<td>1</td>
</tr>
</table>

You can also change the background color of a table or a cell:
1

<table border="1" bgcolor="red">
<tr>
<td>1</td>
</tr>
</table>

HTML lesson #3 - Images and links


In this lesson we will learn about:

-Putting images on your page

-Links

-Viewing other people's source code

Putting images on your page

To put an image on your page you must use the <IMG> tag. Notice that I say tag and not tags.
<img src="smile.jpg">


The result will be:

You can use the ALT property for when a picture doesn't show up:
<img src="nothing.jpg" alt="Picture not available">

Result:

Picture not available

Notice the yellow popup that appears after holding your mouse over it for a while. This popup will also appear if the picture is there. If you don't see the popup don't worry, some browsers don't respond that fast. Also if the above picture were to for some reason not fully load on your browser it should show "Picture not available".
What is important is that you know what the <alt> tags are for and how to use them.

Links

To put a link on your page you must use the <a> tags:
<a href="http://www.html.com">click here</a>
And this is what you'll get:
This is how you make a linking image:
<a href="http://www.html.com"><img src="lrnhtml2.jpg"></a>
And you'll get:


Something you may have noticed is the blue border around the image. To get rid of the border you must do the following:
<a href="http://www.html.com"><img src="lrnhtml1.jpg" border="0"></a>






Viewing other people's source code

Not recommended but some people learn better this way so If you would like to take a look at the code of a website, all you have to do is click on the "View" menu and choose "Source" while viewing the website. You can try it right now in your web browser, to view this page's source code. It's a bit more complex compared to what you've learnt so far, so don't scratch your head, if you don't understand anything. Bottom line is, you can always copy and paste source code (depending on how its licensed) if you like but it's better if you do your own coding so that you are actually learning something.