Informatics Computer School CS114 Web Publishing HTML Lesson 3

2 Lesson Outline §Introduction to tables §Formatting tables §Introduction to frames §Formatting frames §Sample codes

3 Introduction to tables Tables Tables could be designed in HTML using simple tags but the specific rows and cells must be clearly defined. A very useful and easy to use feature. Especially useful when displaying images or forms on HTML pages to look presentable. Tables are specified by the and tags.

4 Basic Outline of a table in HTML

5 Basic Tags Beginning of the table design. The attributes of this tag are border,cellspacing, cellpadding, and bgcolor. Must be closed with a tag. Specifying the table row. Must be closed with a tag. The individual cells are placed within the and tags.

6 Specifies the table data. Logically, it represents a column. Specifies the table header. Displays a title to the table. Specifies the thickness of the table border Specifies the size of the area surrounding the neighbouring cells. Specifies the size of the area surrounding the data in a cell.

7 Allows to span (merge) a number of columns. Allows to span (merge) a number of rows. Allows to do a horizontal align (left, right) of the data in a cell. Allows to do a vertical align (top, middle, bottom) of the data in a cell.

8 Sample Codes for tables Code 1 (To create a simple table with one row) My First Table Tables Are Cool !

9 Code 2 (To create a simple table with two rows) My First Table Tables Are Cool ! And Easy Too!

10 Code 3 (To specify the attribute of the table) Tables Are Cool ! And Easy Too!

11 Code 4 (To specify table headers) Name Age Sex Alex 26 Male

12 Alex 26 Male Diana 21 Female Charlie 16 Male

13 Code 5 (To specify the row spans) Row 1 cell 1 spanning 2 rows Row 1 cell 2 Row 1 cell 3 Row 2 cell 2 Row 2 cell 3

14 Code 5 (To specify the row spans) Row 1 cell 1 spanning 2 cells Row 1 cell 2 Row 2 cell 1 Row 2 cell 2 Row 2 cell 3

15 Code 6 (To specify the row spans and col spans) NAMES CS 101 TOTAL MARKS ASSIGNMENT TEST EXAM JAMES BOND PASS

16 FRAMES Frames allow us to display more than one.html pages on a single window. It allows us to provide more features and also allow us to have a form of control over the website. Before we decide to use frames, we need to plan well. Not all browsers support frames and we must consider this fact.

17 Basic Tags for Frames The tags that specify the ‘family’ of frames in a particular set. This tag must be closed with tag. The Frame Source. Specifies what HTML page will be displayed on that particular frame. The identifier of a frame. Each frame must be given a name so that any hyperlinks that want to display a page on any frame, would know which frame to display on.

18 This tag would be used in any hyperlink call. Would not be used on a the main frames page. The target value would be the NAME value. Defines whether the user would be able to scroll. Values are either ‘yes’ or ‘no’ or ‘auto’ which is the default.

19 Defines whether the user would be able to resize the frame. Must do proper planning before setting this attribute to ‘no’. Specifies whether the frame would have the grey border. To disable the border, the value is ‘no’.

20 Sample Codes for Frames Code 1 (To design a page with 2 frames (row-wise)) Note: Frame commands will not work within the tags.

21 Code 2 (To design a page with 2 frames (col-wise))

22 Code 2 (To design a page with 2 frames (col-wise)) NOTE: This frame page will contain 3 frames. There will be one top frame in the first row and the second row will be further divided into 2 other columns. If we wish to display the links listed in the index frame onto the main frame, in the index.htm page, these attributes must be added : Feedback Form