LESSON 8: LISTS AND TABLES

Lesson Topics
• List Tags and Its Attributes
• Table Tags
• Table Attributes
List Tags and Its Attributes
• HTML also features tags used for itemizing or
giving details with the use of list tags. Two
types of these tags are actually equivalent of
bullets and numberings in MS Office
List Tags and Its Attributes
• Ordered List – is equivalent to the
numbering feature of MS Office. Its list
items are marked with numbers or letters.
This is appropriate list type in itemizing
anything that has something to do with
sequences, steps, chronology or
hierarchy.
List Tags and Its Attributes
<ol> - Designates the start of an ordered list.
<li> - Designates an item in the list.
</li> - Closing tag for every list item.
</ol> - Designates the end of an ordered list.
List Tags and Its Attributes
Attributes Description Value
1 – use for the regular
numbering

A – use for uppercase alphabet

sets the type of numbering to label
type a - use for lowercase alphabet
item
I – use for uppercase Roman
Numeral
i – use for lower case Roman
Numeral
deprecated: use styles instead
specifies the starting point in a list
Any numbers, letters or
start Ex:: <ol type=”I” start=”III”>
Roman Numerals
Will start numbering from III instead
of I.
List Tags and Its Attributes
• Sample Program
List Tags and Its Attributes
List Tags and Its Attributes
List Tags and Its Attributes

• Unordered List Tag - is equivalent to the

bullets feature of MS Office. Its list
items are marked with special symbols.
List Tags and Its Attributes
• <ul> - Designates the start of an
unordered list.
• <li> - Designates an item in the list.
• </li> - Closing tag for every list item.
• </ul> - Designates the end of an
unordered list.
List Tags and Its Attributes

Attributes Description Value

disc – solid-shaded
Deprecated. Use styles bullets
instead.
circle – circular/hole
type Specifies the style of
bullets
the bullet points of the
list items square – dark square
bullets
List Tags and Its Attributes
• Sample Program
List Tags and Its Attributes
• Output
List Tags and Its Attributes

• Definition List Tag - a definition list is

not a list of single items. It is a list of
items with a description of each item
(term).
List Tags and Its Attributes
• <dl> - designates the start of definition list.
• </dl> - designates the end of definition list.
• <dt> - This specifies the term to be defined,
and has no closing tag (definition term).
• <dd> - This specifies the definition and has no
closing tag (definition description).
List Tags and Its Attributes
• Sample program
List Tags and Its Attributes
• Output
Table Tags

• The TABLE element characterizes a grid for

multi-dimensional data arranged in rows and
columns.
Table Tags

• The thead, tfoot, and tbody elements then

follow with groups of rows. The optional thead
and tfoot elements include header and footer
rows, respectively; and
• tbody elements supply the table's main row
groups. A row group contains tr elements for
individual rows, and each tr contains th or td
elements for header cells or data cells,
respectively.
Table Tags

• Tables are defined with the <table> tag. A

table is separated into rows (with the <tr> tag),
and each row is divided into data cells (with
the <td> tag). The letters td stands for "table
data," which is the content of a data cell. A
data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc
Table Tags
Table Tags

• Sample Output
Table Attributes
1. Table tag
Table Attributes
Attributes Description Value

Alignment of caption in a table.

There are only four acceptable values:
1. ALIGN=TOP puts the caption on top of the table
Align Top, left, right, center
2. ALIGN=BOTTOM put it below.
3. ALIGN=LEFT puts the caption on top to the left.
4. ALIGN=RIGHT puts it on top to the right.

Creates an image background within the table area.

background Small images are automatically tiled to cover the URL of the image
whole table area.
#RRGGBB color value
bgcolor Sets the background color of the table. or common color
name
Table Attributes
Any positive
Borders are set with an unintuitive set of integer or, 0 if you
border
attributes. want your table to
have no border
#FFFFFF color
Sets the color of the borders around the
bordercolor value or common
frame.
color name
Sets the amount of space (both horizontal and
cellpadding vertical) between the cell borders and the Number of pixels
contents.
Sets the amount of spaces between the cells
cellspacing Number of pixels
of a table.
This attribute explicitly specifies the width of
Width Positive integers
this block element in pixels.
Table Attributes
2. Caption Tag
• The caption element is an optional table
component which displays a caption/title for
the table directly above, below or to either side
of the table. The caption element is contained
within the TABLE element, but is used at the
same level as the table row element [TR] is.
Table Attributes
<caption align = ”value” > - start tag
</caption> - end tag

Attributes Definition Possible Values

Specifies the alignment of the bottom, left, right,

align
caption relative to the table. top, center, middle
Table Attributes
• Table Row Tag
• The <table> tag defines an HTML table.
• A simple HTML table is comprised of the
table element and one or more tr, th and td
elements.
• The tr element defines a table row, the th
element defines a table header, and the td
element defines a table cell.
Table Attributes
Table Attributes
Attributes Description Values

Specifies the alignment of a table

Align left, right, center
according to surrounding text
rgb(x,x,x)
Specifies the background color for a
Bgcolor #xxxxxx, Colorname
table

% relative to the table

width Specifies the width of a table
width or number of pixels

Sets the vertical alignment of the row

valign contents top, middle, bottom
 
Table Attributes
• Table Header Tag

• The contents in the table are made visible in

these cells.
Table Attributes
Attributes Description Values

specifies the position of the table

align with respect to the document; this left, right, center
works the same as the ALIGN
parameter for images

sets the vertical alignment of the

valign contents of the cell; overrides top, middle, bottom
previously set vertical alignment

background specifies
the cell
the background image of URL of the image

colors the table background just as #RRGGBB color value or

bgcolor it would when used with the common color name
<BODY> tag
Table Attributes
height specifies the cell height Number of pixels

nowrap % - relative to the table

avoids word wrapping within a cell width or number of
  pixels

specifies the width of the table in % relative to the table

width absolute pixels or as a percentage of width or number of
the available space pixels

Number of columns
colspan merge multiple columns from the cell, to the
right

rowspan Merges multiple rows Number of columns

from the cell, down
Table Attributes
• Table Border’s Attribute
• Without specifying a border attribute, the table
will be displayed without any borders. Though
this is acceptable, most users prefer to show
the borders. To display a table with borders,
the HTML encoder will have to use the border
attribute:
Table Attributes
Table Attributes
• Sample Output
Table Attributes

• Headings in a Table
• Headings in a table are defined with the <th>
tag.
Table Attributes

• Headings in a Table
• Headings in a table are defined with the
<th> tag.
Table Attributes
Table Attributes
Table Attributes

• Empty Cells in a Table 

• Table cells with no content are not
displayed very well in most browsers.
Table Attributes
Table Attributes
Table Attributes
Table Attributes
• Sample Output
Table Attributes
• <THEAD . . .>, <TBODY. . .>, <TFOOT . . .>
– <thead ...>, <tbody ...>, and <tfoot ...>
create groups of rows.
– <thead ...> indicates that a group of rows are
the header rows at the top of the table.
Table Attributes
– <tbody ...> indicates that a group of rows
are body rows.
– <tfoot ...> indicates that a group of rows are
the footer rows at the bottom of the table.
END OF LESSON
DISCUSSION