HTML Tutorial part 3

HTML Tables

Tables are an essential part of HTML. Tables can be used to organize data or to create layouts in HTML.

Tables are very helpful to organize data. Here’s an example of an HTML table:

Row 1
Row 2

The code for the above table is:

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

This may be a bit confusing so let’s slow down. The basic tag to create a table is the <table> tag. We also used certain attributes such as setting the “width” to 100%. The border=”1″ attribute displays a border around our table. If you want to change the size of the border, just change the number in the border attribute.

There are two types of tags used inside the <table> tag: the <tr> tag and the <td> tag.

The <tr> creates a table row. The <td> tag creates a table column.


You cannot create a table column without first creating a table row. Table rows always come before table columns. Likewise, you cannot create <tr> tags without first creating the <table> tag. So let’s go over this order again:

1. <table>
2. <tr>
3. <td>

<tr> and <td> tags must always be inside a table. With that said, let’s examine the <tr> and <td> tags from our example:

<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>

Notice how we created two rows. Every row must have at least one column; thus, we had to use at least one <td> tag for each row.

Now what if you want to create more columns? Simple, just create more <td> tags. Here’s an example:

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

Once again, we still only have two rows. However, this time, we also have two columns.

The above code will produce:

Column 1 Column 2
Column 1 Column 2

Whenever you create a new column, every row in the table must have the same number of columns. For example, row #1 cannot have two rows while row #2 has three.

HTML Forms

HTML forms allow user interaction and input. Forms can be used for contacting the website owner, adding a guestbook entry, and more. Forms require a web script written in languages such as Perl, PHP or ASP in order to be processed. If you have no intention to learn these languages in the future, you can skip this section if you wish. This was written for your future reference.

Forms can contain input fields such as text boxes, password fields, and more.

The basic code to setup a form is:

<form action="/path/to/script" method="post">
Form Data Goes Here

Make sure you define the path to your script that will handle the form in your form’s “action” attribute.

In order for our form to have anything to process, we must create fields for the user to provide input. Secondly, we must also create a “submit” button that sends our form’s data to the web script.

Text and Password Fields

Text fields can be created with the following code:

<input type="text" name="nameOfTextField" value="Initial Value">

The above code will produce:

The “name” field can be anything. It’s used to identify your text field so you can retrieve what the user inputted with your script. Unless you’re able to script, you won’t have to worry about this attribute for now — just make your “name” attribute descriptive. The “value” attribute is used to set the default text for your text field. If you do not want to set anything by default, leave this field empty or remove it completely.

When we type in passwords, we don’t want to use a regular text field because everyone will be able to see what we’re typing in. Luckily, HTML has a special “password” text box to remedy this:

<input type="password" value="password">

The above code will produce:

Radio Buttons

Radio buttons are used if you want the user to only be able to select from a few options.

Here’s an example of a radio button:

Male Female

The code for this is:

<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female

Notice the “name” attribute for both radio buttons are the same. This is important. If the names for the radio buttons are not the same then both radio buttons would be able to be selected. However, as long as the names are the same, only one option can be selected.

Although you cannot “see” it, we added a “value” attribute anyways. The reason is that the “value” will be sent to the web script once the form is submitted. This allows the script to process the data and see which option was selected.


If we want to provide the user with multiple options to choose from, we can use checkboxes.

Turkey Steak

Here’s the code:

<input type="checkbox" name="food" value="turkey"> Turkey <input type="checkbox" name="food" value="steak"> Steak

Drop-down Lists

Sometimes, we may have so many options that it would be inconvenient for us to display it all on the page. For example, if we want the user to select which country he is from. We cannot use radio buttons because there would be too many and it makes it difficult for the user to view our web page. Therefore, we can use drop-down lists:

The user will only be able to select one option. Here’s the code:

<select name="food">
<option value="turkey">Turkey</option>
<option value="steak">Steak</option>
<option value="pork">Pork</option>

Submit Button

Finally, in order for us to send the data from our form to the web script that processes it, we must create a submit button that transfers the user to our web script.

<input type="submit" value="Send this Form">

The above code will produce a button for the user to click to submit the form:

Make sure you have a web script to process the entire form!



View more posts from this author