5.

0 Structured Design Elements of HTML

Lesson Introduction
Previous lesson, you have learned to use wed designing IDEs with HTML editors. During this
week you will learn structures such as Tables, ordered list in XHTM/HTML syntax. You may also
try these examples in WYSIWYG IDEs as an additional exercises.

Learning Outcomes:

After completion of this lesson, the learner will be able to create web tables on a given
guideline and create lists according to the information structure.

• Create tables with rows and columns

• Set the properties of tables and manage page spaces
• Create ordered, unordered and sub lists
• Apply group elements and organize information

Lesson Outline:

• Table properties
Borders, Background, column width, row height, span etc.
• Page divisions and structuring methods
• List types
Ordered, unordered, numbered, and other types of lists
• Information grouping and div tags
• Multimedia insertion and page designing.

5.1 HTML Tables

The HTML table element <table> allows designers to arrange data such as text, preformatted
text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. It may
contain a visible border or sometimes the border is invisible.
Each table may have an associated caption child element <caption> that provides a labeled
description of the table. A longer description can be included in the summary attribute, this
attribute can be used for the benefit of people using speech or Braille-based user agents.
5.1.1 Elements of a Table

<table> - designates start of a table

<caption> - Usually displayed at top of table

<tr> - New table row

<thead> - Contains column headers

<th> - Header data cell

<tbody> - Contains table body

<td> - Table data cell, data of any cell enclosed in these tags.

<table border = “xxx”> - border attribute assign the visible thickness of the table border.

<table width = “xxx”> - width attribute assign the width of the table where it can be relative
measurement or absolute measurement.

Let’s see an exercise how the above elements can be used to create a very basic table.
Implement the above html code and observe the following output.

Figure 5.1: a basic table with thead and tbody

 Activity 5.1: Design a table on a web page to display your family members and friends by
male and female categories. You have to structure your table to display the above classes.
You may include up to 10 people.

5.1.2 Structural Elements and Attributes of <table>

Table rows can be grouped into a head <thead>, foot <tfoot>, and body <tbody> sections of a
table. Row groups convey additional structural information. When very long tables are printed
on sheets, the head and foot information may be repeated on each page that contains table
data.

Designers can group columns to provide additional structural information. Furthermore,

designers may declare column properties at the start of a table definition by using
the COLGROUP and COL elements.

• Element colgroup

Groups columns

• Element col

Formats columns within colgroup

• Attribute rowspan of element th and td

Specifies row size

• Attribute colspan of elements th and td

Specifies column size

• Attribute valign of elements th, td and tr

Specifies vertical alignment of text

The following code provide a usage of the above tags in a web page with additional
components such as including images. Perform the following exercise and observe the output
given below in the figure 5.2.
The output of the above code can be seen on the following figure 5.2.

Figure 5.2: Intermediate table with group tags

 Activity 5.2: Watch the following two video tutorial for your skill enhancement. The second
video tutorial provide an opportunity to use expression web for table creation.
Table creation : https://www.youtube.com/watch?v=HPpjaz5xRAQ
Table manipulation with expression web: https://www.youtube.com/watch?v=r20sSwEeL_M
Design the table given in figure 5.2 by using expression web. Add the following features as
necessary: Background color, boarder colour, boarder thickness, cell colour.

5.1.3 Table manipulation in Expression web

If you have study and perform according to the video tutorials given in above activity, you will
know how to manipulate tables with expression web IDE. Further to the given instructions, the
followings are some directions to use in expression web.
• To add a cell to a table
– Place the insertion point in the cell next to where you want to add a cell.
– On the Table menu, point to Insert, and then click Cell to the Left or Cell to the
Right.
• To add a row to a table
– Place the insertion point in the row above or below the row that you want to
add.
– On the Table menu, point to Insert, and then click Rows or Columns.
– Click Rows, and then type or select the number of rows you want to add.
– Under Location, specify if you want to place the row above or below the selected
row.
• To add a column to a table
– Place the insertion point in the column next to where you want to add a column.
– On the Table menu, point to Insert, and then click Rows or Columns.
– Click Columns, and then type or select the number of columns you want to add.
– Under Location, specify if you want to place the column to the right or left of the
selected column.
 • To split cells in a table
– Right-click the cell that you want to split, point to modify, and then click Split
Cells.
– Click Split into columns or Split into rows.
– In the Number of columns or Number of rows field, type the number of columns
or rows that you want to split the cell into.
• To merge cells in a table
– Select a row, column, or group of adjacent cells.
– Right-click, point to Modify, and then click Merge Cells.

5.2 HTML List elements

HTML provides web designers a several options for specifying lists of information. All lists must
contain one or more list elements. Lists may contain:

 Unordered information
 Ordered information
 Definitions

<ul> − An unordered list. This will list items using plain bullets.

<ol> − An ordered list. This will use different schemes of numbers to list your items.

<dl> − A definition list. This arranges your items in the same way as they are arranged in a
dictionary.

5.2.1 Unordered list

An unordered list is a collection of related items that have no special order or sequence. This
list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
The following code provide a brief description of the usage of an unordered list.
 <!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Colombo</li>
<li>Matara</li>
<li>Galle</li>
<li>Kalutara</li>
</ul>
</body>
<html>

Try the above code and observe the view of unordered list. You can use type attribute for <ul>
tag to specify the type of bullet you like. By default, it is a disc. Following are the possible
options:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Modify the above code to view different types of bullets as given above.

5.2.2 Ordered list

Web designers are given option to put items in a numbered list instead of bulleted, for this
purpose HTML ordered list are used. This list is created by using <ol> tag. The numbering starts
at one and is incremented by one for each successive ordered list element tagged with <li>.
The following code shows an application of an ordered list.
 <!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol>
<li>Colombo</li>
<li>Matara</li>
<li>Galle</li>
<li>Kalutara</li>
</ol>
</body>
<html>

Try the above code to view an ordered list where the default order generate the index 1, 2, 3 .. .
Here by using type attribute for <ol> tag, you can specify the type of numbering. By default, it is
a number. Following are the possible options:

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Modify the above coding to view different types of indexing options given above.
5.2.3 Definition List

HTML and XHTML supports a list style which is called definition lists where entries are listed like
in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of
terms, or other name/value list.

Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
The following example shows a code of a sample definition display in a web page.

<!DOCTYPE html>

<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Try the above code to view the display of definition list.

The following code shows the use of list elements to create nested structure using different
types of lists.
The above code will illustrate the following view in figure 5.3 on a web browser. Further, it
demonstrate the use of internal links (within a page itself).

Figure 5.3: Nested list with internal links

5.3 Structuring HTML pages with DIV tag

The <div> tag defines a division or a section in an HTML document. The <div> tag is often used
as a container for other HTML elements to style them separately or to perform certain tasks
with client side script which you are going to learn later.

By investigating through the following example, you will be able to understand the applicability
of div tag for structuring a web content.

<html>
<head>
<title> Div example </title>
</head>
<body>

<div id="my_menu" align="right" style="background-color:yellow">

<a href="#">HOME</a> |
<a href="#">CONTACT</a> |
<a href="#">ABOUT</a> |
<a href="#">SITEMAP</a>
</div>
<div id="my_content1" align="left" style="background-color:white">
<h4>HTML Div tag</h4>
<p>An HTML tag that is widely used to break apart a Web page into elements, each
with its own layout attributes. DIV defines an entire block of data on the page.</p>
</div>
<div id="my_content2" align="center” style="background-color:green;border:3px
solid gold;">
<h4> Significance </h4>
<p>The Div macro wraps content in a div tag with optional class and styles. The div
tag is a non-visual element that can be used to apply additional properties to
content contained within it. Unlike the span tag</p>
</div>
</body>
</html>
 Activity 5.4: Try the above code and modify the code to view the content in different
alignments and with different colors.