Embed Size (px)
Citation preview
Using Lists and Tables
Session 3
Objectives Explain Ordered Lists. Explain Unordered Lists. Explain Defination Lists. Explain the Table elements.
Building Dynamic Websites/Session 1/ 2 of 22
Lists A List is a collection
of items. A list can contain
other HTML elements such as image, links or other lists.
Building Dynamic Websites/Session 1/ 3 of 22
Ordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY><H2>Days in a week</H2><OL>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</OL></BODY>
</HTML>Building Dynamic Websites/Session 1/ 4 of 22
Ordered Lists
Building Dynamic Websites/Session 1/ 5 of 22
List-style-type
Building Dynamic Websites/Session 1/ 6 of 22
<OL STYLE="list-style-type:property’s value">
Nested Ordered lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY>
<H2>Web Designing with HTML</H2>
<OL>
<LI>Introducting HTML
<OL STYLE="list-style-type:lower-roman">
<LI>WWW and Internet Overview
<LI>HTML Overview
<LI>Basic HTML Elements
</OL>
<LI>Working with HTML Elements
(continue…)Building Dynamic Websites/Session 1/ 7 of 22
Nested Ordered lists
Building Dynamic Websites/Session 1/ 8 of 22
Unordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY><H2>Wild Animals</H2><UL>
<LI>Lion<LI>Tiger<LI>Leopard<LI>Wolf
</UL></BODY>
</HTML>
Building Dynamic Websites/Session 1/ 9 of 22
Unordered Lists
Building Dynamic Websites/Session 1/ 10 of 22
List-style-type
Building Dynamic Websites/Session 1/ 11 of 22
<OL STYLE="list-style-type:property’s value">
Nested Unordered lists
Building Dynamic Websites/Session 1/ 12 of 22
Definition lists DL DT DD
Building Dynamic Websites/Session 1/ 13 of 22
Unordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY> <H2>Types of noun</H2> <DL> <DT>Common noun
<DD>It is a name of an Objectin general such as pencel, penpaper and so on
<DT>Proper noun <DD>It is a unique name of a person
or a place</DL>
</BODY></HTML>
Building Dynamic Websites/Session 1/ 14 of 22
Tables A table is made up of rows and columns. The intersection of each row and
column is a cell.
Building Dynamic Websites/Session 1/ 15 of 22
Columns heading
Building Dynamic Websites/Session 1/ 16 of 22
Caption
Building Dynamic Websites/Session 1/ 17 of 22
Colspan/Rowspan attribute
Building Dynamic Websites/Session 1/ 18 of 22
• These attributes are used to create cells that span more than one column or row.
• The COLSPAN attribute is used with the <TH> tag, while the ROWSPAN attribute is used with the <TD> tag.
Colspan/Rowspan attribute
Building Dynamic Websites/Session 1/ 19 of 22
Rowspan Colspan
Some attribute WIDTH BORDER CELLSPACING CELLPADDING
Building Dynamic Websites/Session 1/ 20 of 22
Horizontal/Vertical alignment
Building Dynamic Websites/Session 1/ 21 of 22
Align = left Align = center Align = right Align = justify
Valign = top Valign = middle Valign = bottom Valign = baseline
<TD ALIGN = right VALIGN = bottom>
Data Cell 1</TD>
Summary A nested list refers to another list
defined inside an item of a list. The THEAD, TFOOT, TBODY elements
allow grouping the rows in a table. COLGROUP element allow grouping the
column in a table. Hyperlinks within a table ca display by
using A element.
Building Dynamic Websites/Session 1/ 22 of 22
