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:

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>



<table border=“8”>

<tr bgcolor=“red” >


<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>


<body>



<table border=“12”>

<tr>


<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>


<body>



<table border=“12” align=“center“>

<caption> Table (1) </caption>

<tr>


<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

Documents

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: