![Page 1: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/1.jpg)
Working with Tables & Frames
Lecture 4
![Page 2: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/2.jpg)
Outline
▰ Working with Tables
▰ Working with Frames
2
![Page 3: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/3.jpg)
HTML Table
![Page 4: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/4.jpg)
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
![Page 5: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/5.jpg)
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
![Page 6: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/6.jpg)
HTML Tables
6
![Page 7: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/7.jpg)
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>
![Page 8: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/8.jpg)
Example
8
![Page 9: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/9.jpg)
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
![Page 10: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/10.jpg)
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>
![Page 11: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/11.jpg)
Example
11
![Page 12: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/12.jpg)
Attribute of Table row Tag
▰ align (right, left, center)
▰ bgcolor
12
![Page 13: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/13.jpg)
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>
![Page 14: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/14.jpg)
Example
14
![Page 15: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/15.jpg)
Attribute of Table data Tag
▰ Align (right, left, center)
▰ bgcolor
▰ width
▰ height
15
![Page 16: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/16.jpg)
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>
![Page 17: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/17.jpg)
Example
17
![Page 18: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/18.jpg)
HTML Table - Adding a Caption
18
The <caption> tag must be inserted immediately after the <table> tag.
![Page 19: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/19.jpg)
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>
![Page 20: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/20.jpg)
Example
20
![Page 21: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/21.jpg)
Cells that Span Many Columns
21
To make a cell span more than one column, use the colspan etubirtta
![Page 22: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/22.jpg)
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>
![Page 23: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/23.jpg)
Example
23
Amal Ahmad
![Page 24: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/24.jpg)
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
![Page 25: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/25.jpg)
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>
![Page 26: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/26.jpg)
Example of Nested tables
26
![Page 27: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/27.jpg)
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
![Page 28: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/28.jpg)
HTML Frames
![Page 29: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/29.jpg)
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
![Page 30: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/30.jpg)
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
![Page 31: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/31.jpg)
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
![Page 32: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/32.jpg)
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
![Page 33: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/33.jpg)
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
![Page 34: 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:](https://reader030.vdocuments.net/reader030/viewer/2022041101/5edab5d4272674784f04eff7/html5/thumbnails/34.jpg)
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