CBSE Notes for Class 8 Computer in Action – Tables and Lists in HTML

CBSE Notes for Class 8 Computer in Action – Tables and Lists in HTML

In the previous chapter, we learnt about inserting lists and images in a webpage. Our knowledge of HTML is incomplete without learning about tables and hyperlinks.
Tables help us organise data in a structured manner in a webpage whereas hyperlinks enable us to connect different webpages. We cannot think about interconnection between different webpages without hyperlinks. In this chapter, we will learn about creating tables and hyperlinks in HTML.

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>