Web Technology

sec#5
Eng Basma Elsharkawy
 HTML - Tables
• The HTML tables allow web authors to arrange data
like text, images, links, other tables, etc. into rows and
columns of cells.
• The HTML tables are created using the <table> tag in
which the <tr> tag is used to create table rows and
<td> tag is used to create data cells.
• The elements under <td> are regular and left aligned
by default

2
Colspan and Rowspan Attributes
HTML tables can have cells that span over multiple rows
and/or columns.
You will use colspan attribute if you want to merge two or
more columns into a single column.
Similar way you will use rowspan if you want to merge two
or more rows.
The value of the rowspan attribute represents the number of
rows to span
The value of the colspan attribute represents the number of
columns to span.
3
HTML Table - Colspan

4
HTML Table - Rowspan

5
Tables Backgrounds
We can set table background using one of the following two
ways :
 bgcolor attribute : You can set background color for
whole table or just for one cell.
 background attribute : You can set background image for
whole table or just for one cell.
<table border = "1" bordercolor = "green"
background = "/images/test.png">
We can also set border color also using border color
attribute.
6
7
Image as background

8
Table Height and Width

9
 Table Caption
The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table.

10
Nested Tables
You can use one table inside another table. Not only tables
you can use almost all the tags inside table data tag <td>.

11
HTML – Lists
Lists may contain :
<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.

12
HTML Unordered Lists&
The type Attribute
• 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.
• 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"> 13
<ul type = "circle">
14
15
HTML Ordered Lists
• If you are required to put your items in a numbered list
instead of bulleted, then HTML ordered list will be 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>.

16
17
The type Attribute
• You can use type attribute for <ol> tag to specify the type
of numbering you like. 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.

18
19
The start Attribute
• You can use start attribute for <ol> tag to specify the
starting point of numbering you need.
• Following are the possible options −
 <ol type = "1" start = "4"> - Numerals starts with 4.
 <ol type = "I" start = "4"> - Numerals starts with IV.
 <ol type = "i" start = "4"> - Numerals starts with iv.
 <ol type = "a" start = "4"> - Letters starts with d.
 <ol type = "A" start = "4"> - Letters starts with D.

20
 HTML Definition Lists
• 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

21
22
Section Task

23
Assignment
1. What are Table Header, Body and Footer?
2. What are the role of the following and
how we can apply them?
 <thead>
 <tbody>
 <tfoot>

24