Tables

Table:

A table can be inserted in a webpage to show the data in a tabular form. In the past, table has been used to layout the webpage. This was not a good practice. You'll read later about Webpage Layouts, Here, you can learn to perform the following operations while working with tables:

1. Insert a Table
2. Insert a Row
3. Insert a Heading Row
4. Insert a Column
5. Merge Columns
6. Merge Rows

Insert a Table:

<table></table> Element is used to insert a table in a webpage. It only declare a table but you can't see any table without using some other elements like, <tr></tr>, <th></th> and <td></td>, which are always used within <table></table> Element .

Important Attributes of <table> tag:

Border:

This attribute is used to determine whether the border around the table should be displayed or not. It takes a value of '0' or '1'.

Width:

This attribute determines the width of the table in pixels or percentage. In the first example, given below, width is 100% which means that the table will be displayed as widen as the available space.

Cell Spacing:

Put some space between the cells of table i.e. cellspacing="3".

Cell Padding:

Put some space between the border of each cell and its data i.e. cellpadding="5".

Insert a Row:

<tr></tr> Element is used to insert a row in a table. This element is used inside the <table></table> Element and can contain either <th></th> Element or <td></td> Element.

Important Attributes of <tr> tag:

rowspan:

To merge tow or more rows rowspan attribute is used with an integer value which shows the number of rows to be merged.

Insert a Heading:

<th></th> Element is used to insert Table Headings, usually, appearing as a top most row.This element is used with in the <tr></tr> Element.

Insert a Column:

<td></td> Element is used to insert a column (or a cell by intersecting a row and a column) in a table. This element is used with in the <tr></tr> Element and contains the data to be displayed in a table's cell.

Important Attributes of <td> tag:

colspan:

To merge tow or more columns colspan attribute is used with an integer value which shows the number of columns to be merged.

Table with 100% width and Cellpadding & Cellspacing 0:

Exemplary Code:

<table border="1" width="100%">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>1</sub></td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>2</sub></td>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td>C<sub>3</sub>, R<sub>2</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
        <td>C<sub>3</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C1, R1	C2, R1	C3, R1
C1, R2	C2, R2	C3, R2
C1, R3	C2, R3	C3, R3

C for Column. R for Row.

Table with 50% width and Cellpadding & Cellspacing 10:

Exemplary Code:

<table border="1" width="50%" cellspacing="10" cellpadding="10">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>1</sub></td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>2</sub></td>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td>C<sub>3</sub>, R<sub>2</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
        <td>C<sub>3</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C1, R1	C2, R1	C3, R1
C1, R2	C2, R2	C3, R2
C1, R3	C2, R3	C3, R3

C for Column. R for Row.

Example of Merging Columns (Cells Horizontally):

Exemplary Code:

<table border="1">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th> 
        <th>T Heading 3</th> 
    </tr&gt    
    <tr&gt
        <td colspan="2">C<sub>1&lt/sub> & C<sub>2&lt/sub> are merged, R<sub>1&lt/sub></td>
        <td>C<sub>3&lt/sub>, R<sub>1&lt/sub></td>
    </tr>
    <tr>
        <td>C<sub>1&lt/sub>, R<sub>2&lt/sub>
        <td colspan="2"&gtC<sub>2&lt/sub> & C<sub>3&lt/sub> are merged, R<sub>2&lt/sub></td>
    </tr&gt
    <tr&gt
     <td colspan="3">C<sub>1&lt/sub>, C<sub>2&lt/sub> & C<sub>3&lt/sub> are merged, R<sub>3&lt/sub>.</td>
    </tr&gt
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C1 & C2 are merged, R1		C3R1
C1R2	C2 & C3 are merged, R2
C1, C2 & C3 are merged, R3.

C for Coloumn. R for Row.

Example of Merging Rows (Cells Vertically):

Exemplary Code:

<table border="1" width="80%">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td rowspan="2"> In C<sub>1 </sub>, R<sub>1</sub> & R<sub>2</sub>are merged, </td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td rowspan="2"> In C<sub>3</sub>, R<sub>2</sub> & R<sub>3</sub>are merged, </td>
    </tr>
    <tr>
        <td>C<sub>1, </sub>R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
In C1 , R1 & R2are merged,	C2, R1	C3, R1
	C2, R2	In C3, R2 & R3are merged,
C1, R3	C2, R3

C for Column. R for Row.

Definition Lists

Definition List:

Definition List Element <dl></dl> is used to start a definition list.
Definition Term Element <dt></dt> is used to introduce a term.
Definition Description Element <dd></dd> is used to describe the term.

Example of Unordered List of Type Disc:

Exemplary Code:

<dl>
 <dt>
  Abu Muhammad Musa Alkhwarzmi
 </dt>
 <dd>
  A great Muslim Mathematician belonged to Persia (780-850).
 </dd>
 <dt>
  Jabir Bin Hayyan
 </dt>
 <dd>
  A great Muslim Scientist belonged to Persia(721-815).
 </dd>
 <dt>
  Alberoni
 </dt>
 <dd>
  A great Muslim Physician and Geographer.
 </dd>
</dl>

Example Result:

Abu Muhammad Musa Alkhwarzmi:

A great Muslim Mathematician belonged to Persia (780-850).

Jabir Bin Hayyan:

A great Muslim Scientist belonged to Persia(721-815).

Alberoni:

A great Muslim Physician and Geographer.

Ordered List

Lists

HTML provides us three different types of lists which are given as follows:

1. Ordered List
2. Unordered List
3. Definition List

Ordered List:

<ol> tag is used to start an ordered list.

List Item Element <li></li> is used to insert a an item in the list.

There are three types of ordered list.

1. Numbered List
2. Alphabetic List
3. Roman Number List

Important Attributes of <ol> tag:

type: determines the type of the list whether it would be a numbered list, alphabetic list or roman numbers list.

start: determine the starting number for the list whether an alphabetic list should start from the 'a' or from 'd' or form any other alphabet.

Possible values of both the attributes are given in the following table.

Value of type attribute	Value of startattribute
1	Positive integer
a	Positive integer
A	Positive integer
i	Positive integer
I	Positive integer

 

Example of Ordered List with Numbers:

Exemplary Code:

<ol>
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>

Example Result:

1. I'm the first element of the ordered list
2. I'm the second element of the ordered list
3. I'm the third element of the ordered list
4. I'm the fourth element of the ordered list

In the above example we are using an ordered list. We have not defined its type and the starting value as by default it's type is '1' and started from '1'. It increases automatically by 1.

Example of Ordered List with Alphabets:

Exemplary Code:

<ol type="a">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>

Example Result:

1. I'm the first element of the ordered list
2. I'm the second element of the ordered list
3. I'm the third element of the ordered list
4. I'm the fourth element of the ordered list

In the above example we are using an ordered list of type 'a'. We have not defines its starting value as By default it starts from '1'. It also increases automatically by 1.

Exemplary Code:

<ol type="i"start="3">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>

Example Result:

3. I'm the first element of the ordered list
4. I'm the second element of the ordered list
5. I'm the third element of the ordered list
6. I'm the fourth element of the ordered list

In the above example we are using an ordered list of type 'i' starting from '3'. It also increases automatically by 1.

You can try other remaining types of the ordered list.

Unordered List

Unordered List:

<ul> tag is used to start an unordered list.
List Item Element <li></li> is used to insert a an item in the list.
There are three types of unordered list:

1. Disc List
2. Circle List
3. Square List

Important Attributes of <ul> tag:

type: determines the type of the list whether it would be a circle list, disc list or square list.

Possible values of the type attribute are given in the following table.

Value of type attribute
Disc
Circle
Square

Example of Unordered List of Type Disc:

Exemplary Code:

<ul>
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ul>

Example Result:

• I'm the first element of the ordered list
• I'm the second element of the ordered list
• I'm the third element of the ordered list
• I'm the fourth element of the ordered list

In the above example we are using an unordered list. We have not defined its type as by default it's type is 'disc'.

Example of Unordered List of Type Circle:

Exemplary Code:

<ul type="circle">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ul>

Example Result:

• I'm the first element of the ordered list
• I'm the second element of the ordered list
• I'm the third element of the ordered list
• I'm the fourth element of the ordered list

In the above example we are using an unordered list of type 'circle'.

Example of Unordered List of Type Square:

Exemplary Code:

<ul type="square">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ul>

Example Result:

• I'm the first element of the ordered list
• I'm the second element of the ordered list
• I'm the third element of the ordered list
• I'm the fourth element of the ordered list

In the above example we are using an ordered list of type 'i' starting from '3'. It also increases automatically by 1.
You can try other remaining types of the ordered list.

Target Attribute of Anchor Element

Target Attribute:

Target Attribute is used to specify whether the linked webpage/document/file will be:

• opened in the current tab of the browser.
• opened in the new tab, next to the current tab, of the browser.
• opened in the new window (not in new tab).

An example of the target attribute is given as following which covers all the three possible states.

Exemplary Code:

&ltb&gt<a href="url of directed webpage or web site">Hello! I'm testing the Hyper Link tag of HTML. </a></b>
                

Example Result:

Hey click me! I will open in a new tab.
Hey click me! I will open in the current tab.
Hey click me! I will open in a new window.

Image Hyper Link

Anchor Element and Its Important Attributes:

An Anchor Element with Image Element is used to create a Image Hyper-link.
Syntax: <a attribute="value"><img src="any source" alt="img_text" /></a>

Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Image Hyperlink Targeting a Webpage/Document
2. Image Hyperlink Targeting a Section with in a Same Webpage
3. Image Hyperlink Targeting a Section in a Different Webpage

Image Hyperlink Targeting a Webpage/Document:

Exemplary Code:

<a href = "https://www.facebook.com/webdevelopmentwithkhuram/"><img src="W3_Logo_3.png" width="150" height="150"/></a>
                

Example Result:

Explanation of the Example:

1. Anchor Element containing Image Element ,with in it, is used to create an Image Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The picture to be displayed is put in between <a> and </a> tags using <img /> Element.

Image Hyperlink Targeting a Section with in a Same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplar text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.

3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Image Hyperlink Targeting a Section in a Different Webpage:

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="http://localhost/Blogger/Hyper_Link.html#target_1" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="http://localhost/Blogger/Hyper_Link.html#target_2" alt="" height="30" width="30"/></a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 3

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 4

Top

Explanation of the Example:

1. Anchor Element is used to create a Text Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Font Faces and Font Colors in HTML

Different font styles (faces) are used in the webpages as well as in other documents to show the text in different styles and formats. For this purpose HTML provides us element. Using font element we can format the text in different styles, color and size. Let have look at each of the following!

Font Face:

Font face is the name of the Font which you are using currently in for your webpage or part/section of the webpage. Different famous and mostly used font faces are Arial, Comic Sans, Courier, Georgia, Times New Roman and Verdana.

Example:

Code:

<font face="Arial">I’m <b>Arial</b> style text</font><br />
<font face="Courier">I’m <b>Courier</b> style text</font><br />
<font face="Times New Roman">I’m <b>Times New Roman</b> style text</font><br />
<font face="verdana">I’m <b>Verdana</b> style text</font><br />

Result:

I’m Arial style text
I’m Courier style text
I’m Times New Roman style text
I’m Verdana style text

Font Color:

Color property of the Font element is used to display the text in different colors instead of default black. HTML provides some color names-such as red, green, blue, sky blue, white, etc. - which can be used as value of the color property.

Example:

Code:

<font color="green">I’m <strong>Green</strong> colored text</font><br />
<font color="blue">I’m <strong>Blue</strong> colored text</font><br />
<font color="purple">I’m <strong>Purple</strong> colored text</font><br />
<font color="orange">I’m <strong>Orange</strong> colored text</font><br />

Result:

I’m Green colored text.
I’m Blue colored text.
I’m Purple colored text.
I’m Orange colored text.

Font Size:

Size is also a property of the font element which is used to display text in different size. It ranges from 1 to 7 units.

Example:

Code:

<font size="1">I’m size <strong>1</strong> text</font><br />
<font size="2">I’m size <strong>2</strong> text</font><br />
<font size="3">I’m size <strong>3</strong> text;</font><br />
<font size="4">I’m size <strong>4</strong> text</font><br />
<font size="5">I’m size <strong>5</strong> text</font><br />
<font size="6">I’m size <strong>6</strong> text</font><br />
<font size="7">I’m size <strong>7</strong> text</font><br />

Result:

I’m size 1.
I’m size 2.
I’m size 3.
I’m size 4.
I’m size 5.
I’m size 6.
I’m size 7.