View
20
Download
0
Category
Preview:
Citation preview
Working with Tables & Frames
Lecture 4
Outline
▰ Working with Tables
▰ Working with Frames
2
HTML Table
HTML Table
▰ A table in HTML can be used to display:
▰ Many types of content
Calendars, financial data, lists, etc…
▰ Any type of data
Images, Text , Links and Other tables
4
HTML Table
▰ HTML table is created using the <table> element .
▰ Each table row is defined with the <tr> element.
▰ A table header is defined with the <th> t element.
▰ By default, table headings are bold and centered.
▰ A table data/cell is defined with the <td> tag.
▰ The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists,
other tables.
5
HTML Tables
6
Example
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
7
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
Example
8
Attribute of Table Tag
▰ Align (right, left, center)
▰ bgcolor
▰ border
▰ Cellspacing: It is a space between the cells.
▰ Cellpadding: It is a space between the cell content and its borders.
9
Example
<!DOCTYPE html>
<html>
<head> <title> Student Grade </title>
</head>
<body>
<h3><center> Grade of Course Web
Technologies(1) </h3></center>
<table align="center" bgcolor="grey"
border="12" cellspacing="10"
cellpadding="8">
<tr >
<th>Student Name</th>
<th>Grade</th>
</tr>10
<tr>
<td>Noura Ahmad</td>
<td>89</td>
</tr>
<tr>
<td>Sara Ali</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Example
11
Attribute of Table row Tag
▰ align (right, left, center)
▰ bgcolor
12
Example
<!DOCTYPE html>
<html>
<title> Student Grade </title>
<body>
<h3><center> Grade of Course Web
Technologies(1) </h3></center>
<table border=“8”>
<tr bgcolor=“red” >
<th>Student Name</th>
<th>Grade</th>
</tr> 13
<tr align="right“
bgcolor="yellow">
<td>Noura Ahmad</td>
<td>89</td>
</tr>
<tr align="left" bgcolor="pink">
<td>Sara Ali</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Example
14
Attribute of Table data Tag
▰ Align (right, left, center)
▰ bgcolor
▰ width
▰ height
15
Example
<!DOCTYPE html>
<html>
<title> Student Grade </title>
<body>
<h3><center> Grade of Course Web
Technologies(1) </h3></center>
<table border=“12”>
<tr>
<th>Student Name</th>
<th>Grade</th>
</tr> 16
<tr>
<td align="center”
bgcolor="green">Noura Ahmad</td>
<td align="center"
bgcolor="cyan">89</td>
</tr>
<tr>
<td align="left" bgcolor="green"
width="15">Sara Ali</td>
<td align="left" bgcolor="cyan"
height="13">94</td>
</tr>
</table>
</body>
</html>
Example
17
HTML Table - Adding a Caption
18
The <caption> tag must be inserted immediately after the <table> tag.
Example
<!DOCTYPE html>
<html>
<title> Student Grade </title>
<body>
<h3><center> Grade of Course Web
Technologies(1) </h3></center>
<table border=“12” align=“center“>
<caption> Table (1) </caption>
<tr>
<th>Student Name</th>
<th>Grade</th>
</tr>19
<tr>
<td align="center”
bgcolor="green">Noura Ahmad</td>
<td align="center"
bgcolor="cyan">89</td>
</tr>
<tr>
<td align="left" bgcolor="green"
width="15">Sara Ali</td>
<td align="left" bgcolor="cyan"
height="13">94</td>
</tr>
</table>
</body>
</html>
Example
20
Cells that Span Many Columns
21
To make a cell span more than one column, use the colspan etubirtta
Example
22
<table >
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Amal Ahmad</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Example
23
Amal Ahmad
Nested tables
▰ Nested tables is placing one table over another
table.By opening and closing the <table> tag any
number of tables can be constructed inside the table.
24
Example of Nested tables
<html>
<body >
<table border=5 bordercolor=red>
<tr>
<td>
Fisrt Column of Outer Table
</td>
<td>
<table border=5 bordercolor=green>
<tr>
<td>
First row of Inner Table
</td>
</tr>25
<tr>
<td>
Second row of Inner
Table
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Example of Nested tables
26
HTML Table Tags
27
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
HTML Frames
HTML Frames
▰ Frames are vaguely similar to tables
▰ Frames are designed to control the layout of web pages rather than tables and
should not be used for page layout.
▰ The main disadvantage of frames is that they are not compatible with most
assistive technologies such as screen readers
29
Inline Frames
▰ A more flexible type of frame is the inline frame.
▰ It is called an inline frame because the frame and its contents are placed on the
web page as if they were an inline element, such as an image.
30
Iframe Syntax
▰ An HTML iframe is defined with the <iframe> tag:
▰ The src attribute specifies the URL (web address) of the inline frame page.
Syntax:
<iframe src="URL"></iframe>
31
Iframe - Set Height and Width
▰ Use the height and width attributes to specify the size of the iframe.
▰ The height and width are specified in pixels by default:
32
Example (1)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width
attributes to specify the size of the
iframe:</p>
<iframe src="demo_iframe.htm"
height="200" width="300"></iframe>
</body>
</html>33
Example (2)
<!DOCTYPE html>
<html>
<body>
<h3>An iframe of our book's page.</h3>
<iframe src="books.html" width="80%"
height="350"> If you see this, your
browser does not support iframes.
</iframe>
</body>
</html>34
Recommended