HTML Tables Frames Internet Technology 1 HTML Tables
HTML Tables & Frames Internet Technology 1
HTML: Tables Table tags u u <table> </table> <th> </th> <tr> </tr> <td> </td> surround the entire table header row (text is boldfaced) surround each row surround each data cell Provide a little more control over where items appear on a web page in relation to one another Example <table border=“ 1”> <tr> <td>Here’s</td> <td>a table</td> </tr> <td>Let’s </td> <td>learn how</td> </tr> </table> Internet Technology 2
HTML: Table Tag Attributes Attribute Value Description <table border= “ 1”> number (0 to n) Specifies the thickness of table border (0 = no border) <table align= “center”> left, center, right Specifies the horizontal position of a table <tr align= “center”> left, center, right Specifies the horizontal position of table row content <tr valign= “top”> top, middle, bottom Specifies the vertical position of table row content <td align= “center”> left, center, right Specifies the horizontal position of table cell content <td valign= “top”> top, middle, bottom Specifies the vertical position of table cell content <td colspan= “ 2”> number (0 to n) Specifies the number of columns a cell should span <td rowspan= “ 2”> number (0 to n) Specifies the number of rows a cell should span <td width= “ 20%”> number (pixel) or % Specifies the width of a cell <td height= “ 20%”> number (pixel) or % Specifies the height of a cell <td bgcolor= “green”> color name Specifies the background color of a cell Example: http: //widit 2. knu. ac. kr/~kiyang/share/html/tabledemo. htm Internet Technology 3
HTML: Frames Frame Tags u u <frameset> </frameset> <frame src=“URL”> holds two or more frame elements defines a frame (window) within a frameset HTML Frames u Divide the browser window into pieces Display multiple HTML document in the same browser window · Each HTML document is called a frame · u A different HTML page loads in each piece, and can be manipulated independently of the others Example <frameset cols="25%, 75%"> <frame src=“left. htm" /> <frame src=“right. htm" /> </frameset> 25% left. htm 75% right. htm http: //widit 2. knu. ac. kr/~kiyang/share/html/frame. Demo. htm Internet Technology 4
HTML: More Frame Examples Nested Frames <frameset rows=“ 10%, 90%"> <frame src=“top. htm" > <frameset cols=“ 50%, 50%"> <frame src=“left. htm"> <frame src=“right. htm"> </frameset> left. htm right. htm Named Frames u u top. htm Use NAME attribute of <frame> tag to designate a name for the target window <frame src=“left. htm" name=‘left’> <frame src=“right. htm" name=‘right’> Use TARGET attribute of <a> tag to display the linked page in the named window <a href=“http: //knu. ac. kr” target=‘right’> Use <noframes> tag to display a message for browsers that do not support frames <noframes><body>This browser does not support frames. </body></noframes> Example: http: //widit 2. knu. ac. kr/~kiyang/share/html/frame. Demo 2. htm http: //widit 2. knu. ac. kr/~kiyang/share/html/frame. Demo 3. htm Internet Technology 5
HTML: i. Frame Inline Frame <h 1>i. Frame</h 1> <iframe src=“index. htm“ > </iframe> u Attributes - name - height, width - scrolling - frameborder Examples: http: //widit 2. knu. ac. kr/~kiyang/share/html/iframe. Demo. htm http: //widit 2. knu. ac. kr/~kiyang/share/html/iframe. Demo 2. htm http: //widit 2. knu. ac. kr/~kiyang/share/html/iframe. Demo 3. htm http: //widit 2. knu. ac. kr/~kiyang/share/html/iframe. Demo 4. htm Internet Technology 6
- Slides: 6