CREATING TABLES IN HTML

Tables let us present data in a row and column format. You can use tables to format
and organise information systematically on a webpage. The basic structure of a
table consists of the following tags.

1. <TABLE> tag: The <TABLE> and </TABLE> tags mark the beginning and
the end of a table in an HTML document.
2. <TR> tag: <TR> tag defines a row in the table. It is the <TR> tag that
divides a table into rows.
3. <TH> tag: <TH> tag defines a header cell in the table. The first row of the
table can be divided into data cells using the <TH> tag: The text
enclosed within the <TH> tag is aligned centrally inside the cell and is
displayed in a bolder font.
4. <TD> tag: <TD> tag defines a cell in the table. Subsequent rows after the
first row in the table can be divided into data cells using the <TD> tag.
You can include text, images, lists, form elements or a hyperlink in a
data cell. The number of pairs of <TR> and </TR> determines the
number of rows in a table. A row can have one or more <TD> or <TH>
tags, which determine the columns in the table. You can include the
heading for a table using the <CAPTI0N> tag.
The following diagram illustrates the use of basic table tags.

Attributes of <TABLE> Tag

Attributes of <TABLE> tag include border, bordercolor, bgcolor, background, width,
height, cellspacing and cellpadding. Table 5.1 provides a brief description of these
attributes.
Using the border, bordercolor, bgcolor attributes 0/ <TABLE> tag
The following HTML code uses border, bordercolor and bgcolor attributes of the
<TABLE> tag to display the output as shown in Figure 5.3.
Using tke cellspacing and cellpadding attributes of <TABLE> tag
The following HTML code uses the cellspacing and cellpadding attributes of the
<TABLE> tag with other attributes to display the output as shown in Figure 5.5.
Attributes of <TR>/<TD>/<TH> Tags
You can use attributes of <TR>, <TD> or <TH> tag to control aspects such as
alignment and background colour at the row or cell level. Table 5.2 lists some of the
important attributes of the <TR>, <TD> and <TH> tags.
Using tke bgcolor and align Attributes of the <TR> and <TD> Tags
The use of the bgcolor attribute can be done at the table, row and data cell level.
Note the following.

• The bgcolor at the table level is overridden by the bgcolor at the row
level.
• The bgcolor at the row level is overridden by the bgcolor at the data cell
level.

The same holds true with respect to the use of align attribute at the row and data cell
level.
The following HTML code uses the bgcolor and align attributes of the <TR> and
<TD> tags.

Using tke rowspan and colspan Attributes of the <TD> Tag

You can make use of the rowspan and colspan attributes when there is a need to
merge the data cells. The data cells can be merged column-wise or row-wise. The
following HTML code uses the rowspan attribute of the <TD> tag.
The following HTML code uses the colspan attribute of the <TD> tag.

CREATING HYPERLINKS IN HTML

While surfing the Internet, you come across several text strings or images which,
when clicked, open a different webpage. These text strings or images are called
hyperlinks. Hyperlinks interconnect the webpages over the World Wide Web.
Anckor (< A>) Tag
The Anchor (<A>) tag is used to create hyperlinks in a webpage. It is a container tag.
Any text or image enclosed within the <A> and </A> tags is displayed as a hyperlink.
Table 5.3 illustrates some of the important attributes of the <A> tag.

Types of Unking in HTML

There are three types of linking in HTML. They are:

1. External linking
2. Internal linking
3. Email linking

External linking
The external linking involves connecting two different webpages. When you click a
hyperlink, a new webpage to which the hyperlink is linked gets displayed in the
browser window. You can link pages within the same directory or to any other page
over the Internet. Table 5.4 highlights some of examples of external linking.

The following HTML code illustrates the use of <A> tag in the file first.html to link to
different webpages.
The output of the aforementioned HTML code is shown in Figures 5.13 and 5.14.

When you click on the first link, the contents of the webpage ‘second.html’ are
displayed in the browser window. When you click the second link, the home page of
Google gets displayed in the browser window.
Internal Uniting
Internal linking involves linking various sections of the same webpage. This type of
linking is useful when a webpage is very long. It lets the user view the desired
section of a page quickly. Internal linking serves as a bookmark to go to a particular
segment of the webpage. This helps the user to quickly jump to the information
he/she is looking for. For example, Go to top of the page link in webpages is an
example of internal linking.
Internal linking is a two-step process.
Step 1: Use the name attribute of the <A> tag to give a name to the section to be
linked to.
Example, <a name-“xyz”> You will be linked here</A>
Step 2: Use the href attribute of the <A> tag to refer to the named section preceded
by the # symbol.
Example, <a href=”#xyz”> You will be taken to the linked sectionc</ A>
The following HTML code demonstrates the use of name and href attributes of <A>
tag to link the text ‘Go to top of the page’ to the top of the page.
Email linking (linking to an email address)
To link text to an email address, you use the mailto: keyword before the email
address in the href attribute of the <A> tag. For example, to link the text ‘Send an
Email’ to the email address mariaJoseph@gmail.com, you can write the following
HTML code.
<a href=”mailto:maria_joseph@gmail.com”>Send an Email</a>