Академический Документы
Профессиональный Документы
Культура Документы
ITEC229
Client-Side Internet and Web Programming
LOGO
1
Contents
4.1 Lists
4.1.1 Ordered Lists
4.1.2 Unordered Lists
4.1.3 Definition Lists
4.1.4 Nested Lists
4.2 Tables
2
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
1
1/5/2019
4.1 LISTs
Ordered Lists
Unordered Lists
Definition Lists
Nested Lists
3
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
4.1 LISTs
An ordered list starts with the <ol> tag and finishes with
</ol> tag.
2
1/5/2019
4.1 LISTs
<ol type=“a”>
<li>Apples</li> a. Apples
<li>Bananas</li> b. Bananas
<li>Coconuts</li> c. Coconuts
</ol>
5
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
4.1 LISTs
<ul>
<li>Apples</li> • Apples
<li>Bananas</li> • Bananas
<li>Coconuts</li> • Coconuts
</ul>
6
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
3
1/5/2019
4.1 LISTs
<ul type=”square”>
<li>Apples</li> Apples
<li>Bananas</li> Bananas
<li>Coconuts</li> Coconuts
</ul>
7
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
4.1 LISTs
8
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
4
1/5/2019
4.1 LISTs
<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape</dd>
</dl>
Internet Explorer
Developed by Microsoft
Netscape
Developed by Netscape
9
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
4.1 LISTs
10
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
10
5
1/5/2019
4.2 TABLEs
Tables are used when you need to show "tabular data" i.e.
information that is logically presented in rows and columns.
TABLE Attributes;
BORDER: lets you set the width of the table’s border in pixels
ALIGN: specifies the horizontal alignment of the content in
the entire table, in a row or in a single cell. For example, left,
center or right.
WIDTH: pixels (absolute) or a percentage
VALIGN: specifies the vertical alignment of the content in a
cell. For example, top, middle or bottom.
11
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
11
4.2 TABLEs
TABLE Elements
THEAD element
• Header info
• For example, titles of table and column headers
TBODY element
• Used for formatting and grouping purposes
12
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
12
6
1/5/2019
4.2 TABLEs
<TR>…</TR>
stands for "table row"
starts and ends horizontal rows.
<TH>…</TH>
suitable for titles and column headings
used in the header part of a table.
all major browsers will display the text in the
<th> element as bold and centered.
13
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
13
4.2 TABLEs
<TD>...</TD>
stands for "table data".
starts and ends each cell in the rows of the table.
holds the content of a data cell.
used in the body part of a table.
aligned left by default.
a <td> tag can contain
text,
links,
images,
lists,
forms,
14
other tables, etc.
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
14
7
1/5/2019
4.2 TABLEs
15
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
15
4.2 TABLEs
<html>
<body>
<h4>Horizontal Headers:</h4>
Horizontal Headers:
<table border="1">
<tr>
Name Telephone Telephone
<th>Name</th>
<th>Telephone</th> Bill Gates 555 77 854 555 77 855
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
16
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
16
8
1/5/2019
4.2 TABLEs
<html>
<body>
<h4>Vertical Headers:</h4> Vertical Headers:
<table border="1">
<tr>
First Name: Bill Gates
<th>First Name:</th>
<td>Bill Gates</td> Telephone: 555 77 854
</tr> Telephone: 555 77 855
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
17
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
17
4.2 TABLEs
<table border="1">
<caption> TABLE 1 </caption>
<THEAD>
<tr>
<th>Header 1</th> TABLE 1
<th>Header 2</th> Header 1 Header 2
</tr>
</THEAD> row 1, cell 1 row 1, cell 2
<TBODY> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</TBODY>
</table>
18
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
18
9
1/5/2019
4.2 TABLEs
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th>
<th colspan="2">Telephone</th></tr>
<tr> Cell that spans two columns:
<td>Bill Gates</td>
<td>555 77 854</td> Name Telephone
<td>555 77 855</td>
Bill Gates 555 77 854 555 77 855
</tr>
</table> Cell that spans two rows:
<h4>Cell that spans two rows:</h4> First Name: Bill Gates
<table border="1">
<tr><th>First Name:</th><td>Bill 555 77 854
Gates</td></tr> Telephone:
<tr><th rowspan="2">Telephone:</th>
555 77 855
<td>555 77 854</td>
</tr>
<tr><td>555 77 855</td></tr>
</table>
</body>
</html>
19
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
19
4.2 TABLEs
COLGROUP element
Used to group and format columns
20
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
20
10
1/5/2019
4.2 TABLEs
21
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
21
4.2 TABLEs
22
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
22
11
1/5/2019
4.2 TABLEs
23
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
23
4.2 TABLEs
24
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
24
12
1/5/2019
END of CHAPTER 4
LOGO
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
25
13