More About HTML Table

Okay lets get deeper on HTML tables now.

As I have said on the early part, html have tags and attributes. In order to declare or specify the behaviour of a certain html table's part, you will be needing to manipulate its attrbutes.

Here are some most commonly used table tags:

Attribute	Value	Description
bgcolor	rgb(x,x,x) #xxxxxx colorname	Tells the background color of the table
border	pixels	The border width of the table.
cellpadding	pixels %	The space between the cell walls and contents
cellspacing	pixels %	The space between cells
rules	none groups rows cols all	Displays the vertical and horizontal grid of the table. Note: Can only be used if the "border" attribute is specified, otherwise - no effect!
width	% pixels	Specifies the width of the table
background	(image's link location) pixels	Image background of the table

The table has also a feature function that enables the heading to automatically displayed in bold, which emphasize it. Though you can achieve the same display by using the <font> tag or with the <b> tag. But just to inform you, you can use the <th> (table heading) tag instead of <td> tag, for example:

<table border="1"> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> </table>

Heading 1	Heading 2	Heading 3

In relation, the <tr> and the <td> tag also have its own attribute, One of the most useful and common atrribute of the <tr> tag is the "valign" attribute, for example:

<tr valign="middle"></tr>

This specify the vertical alignment of a certain row, remember that the <tr> tag is a row tag.


MERGING CELLS IN HTML TABLE

The column tag's <td> "rowspan" and "colspan" is used to merge cells in an html table. This table's attribute is one of the most useful among web developers. It offers great flexibilty that enables web designers to develop layouts that would match to their needs.

Example:

<table border="1"> <tr> <th> Column 1 </th> <th> Column 2 </th> <th> Column 3 </th> </tr> <tr> <td rowspan="2"> Row 1 Cell 1 </td> <td> Row 1 Cell 2 </td> <td> Row 1 Cell 3 </td> </tr> <tr> <td> Row 2 Cell 2 </td> <td> Row 2 Cell 3 </td> </tr> <tr> <td colspan="3"> Row 3 Cell 1 </td> </tr> </table>

Now here's the output of the code above:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Didn't that makes our html table flexible? You should remember this two things as they will be very useful as long as you create tables in html.

So that's about the html table tag, lets take a look on other html tags on the next page.

Introduction

Do you have zero knowledge on html? or are you a total beginner in using html?

If yes is your answer to any of the questions above then tutorial is just right for you, HTML - Only for begginers is designed to cater html beginners to help them from commonly confused html terms designing techniques.

As you may have already seen (well, I suppose that you had seen a html source code of any web page), html codes are a little intimidating with all that new characters or tags and code environment. I learned html from my self alone, I will say that I did it in a hard way, reading books and dreamweavers help page and most especially,scanning and downloading actual examples of running web pages on the net. Though, I learned everything I know from myself about html, looking back then, how I wish that there are friendly sites like this that is really made for total begginers.

Though I saw some tutorial sites before who teach html for begginers, but their pacing was too fast for a beginners. I don't know exactly how can I explain the difference of their site with this one that I created, but all I know is that I made this tutorial site, according to what I had felt when I was still on the learning stage of my html world.

As a computer engineering student back then, and having a background on some programming language. I already have some knowledge about computer logic, syntax and tags. But I understand, that not all who want to learn html have the same background like me. So this site will teach you and will deal to you like you're a total beginner with zero to very low knowledge on html. Sounds good right? yeah, the exact tutorial I wished I had before.

So relax, and throw all your fear about learning html. If you thought and if you heard that hml is so hard to learn, then you are totally wrong. Html is as easy as drawing a face on a paper, all you need to do in drawing a face is to know the difference between the nose, eye, mouth and etc, and learn to position them in the right place. In html all you need to know is to know the (very simple) code that creates columns, rows, lines and etc. and to learn to position them on the right place, all according to your needs and desire.

So, are we all set? Let's begine with the introduction on the next page...

Learning Tables' Basic

HTML or HyperText Markup Language is the language for web pages. It is the language which browsers (Internet Explorer, Mozilla’s Firefox, etc.) used to interpret and enables to display a certain webpage. Generally, a webpage is composed of table and nested tables (tables inside the tables). Though the existence of XML had made the usage of table, still as a beginner, I think that learning the purpose and the essence of using a table is a very important step you need to take.

When I still do not know how to create a web page my initial question is how did they know how to place a certain part on this area on this side? Only to know later on that an html web page is composed of tables with columns and rows like this:



Webmasters (persons who create web page) also modify the table according to their need:











First of all, html are composed of various tags, but for now we will first discuss the tags in creating tables, columns and rows.

<table> This is the tag for creating a table
<tr> This is the tag used in creating a row
<td> This is the tag used in crating a column

What you see above are the start tags, every tags have start and end tag. Though there are some tags that do not require end tags, which we can discuss on the future, but for now we will use html elements or tags that use start and end tags to avoid confusion. What we are trying to do in our initial step is to use the basic principle of html, so lets begin.

If you want to create a table you will need to use the table <table> tag, relatively if you want to create column you will use the column <tr> tag, and of course, the same goes with the row <td> tag.

Now here’s a basic composition or code structure of a table with columns and row with it:

<table border="1"> <tr> <td> This is where you place your web page’s content (images, videos, text, etc.) </td> </tr> </table>

The output for our html code at the top will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, we just created a basic table with one column and with one row. First thing first, the actual output of the code we created will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, the table is not visible. By default the table’s border is set to zero unless specified by the user. So I just placed a border to show a table with one column and one row.

I just added an attribute to our table tag <table> for it to have a border, which is:

<table border="1"> <tr> <td> This is where you place your web page’s content (images, videos, text, etc.) </td> </tr> </table>

Html is composed of different tags, but on how you would want a certain tag to be displayed will be its attribute’s job. Different tags have their own attributes, in common people’s term, attributes is people’s characteristics.

For example, html tag could be represented by people’s hair, so it is easy to know that most people have a hair tag. But on what color, style or length will be the hair tag’s attributes, which would be:

<hair color=”red” length=”500cm” style=”retro”> </hair>

Using real html tag, it could be:

<table border=”0” width=”95%” bgcolor=”green” ….etc, etc.> </table>

As I have said, different tags have its different attributes. We will discuss them in detail in future discussion, but for now it is useful to first understand the relationship of tags and their attributes.

It is of course the same principle applied to the column <td> and the row <tr> tags.

<tr valign=”middle” height=”100”> </tr>

<td align=”center” width=”150” bgcolor=”red”> </td>

It is important to know that you should create a logically defined table, meaning that a basic table must have an equal numbers of columns in each rows, or vice-versa. For example:



This is a basic rule of creating a table, in the figure above all columns have three rows and all rows have four columns.

But this doesn’t give much flexibility to a webmaster doesn’t it? What if you need to create a table like this:



1 – Your website’s banner
2 – Navigation links area
3 – Display window

In this case, webmaster use an attribute colspan=”” for the column tag . So, let’s convert the display above into its corresponding html code:

<table> <tr> <td colspan=”2”> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Oh, by the way, as you had noticed on our examples, some of our codes are indented. This is because a good coder must have a good habit of indenting his codes, in this way a coder can easily identify his tags. Since a complete webpage would consist numbers of tag combinations, indenting a tag would enables a coder to pinpoint a tag’s start and ending point. This is called proper nesting of tags, nesting means putting a tag inside a tag, for example:

<table> </tr> </td> </td> </tr> </table>

As you can see, the row tag <tr> is nested inside the table tag <table> and the column tag <td> is nested inside the row tag <tr> and the table tag <table>. What you can see on the above html code are a very simple example of nested tags.

So we are done on the surface of html, let’s go to a more detail discussion on the next topics.