HTML Tables & Frames Internet Technology
HTML: Tables Table tags <table> </table> surround the entire table <th> </th> header row (text is boldfaced) <tr> </tr> surround each row <td> </td> 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> </table> Internet Technology
HTML: Table Tag Attributes 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”> 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”> Specifies the horizontal position of table cell content <td valign= “top”> Specifies the vertical position of table cell content <td colspan= “2”> Specifies the number of columns a cell should span <td rowspan= “2”> Specifies the number of rows a cell should span <td width= “20%”> number (pixel) or % Specifies the width of a cell <td height= “20%”> Specifies the height of a cell <td bgcolor= “green”> color name Specifies the background color of a cell Example: http://widit2.knu.ac.kr/~kiyang/share/html/tabledemo.htm Internet Technology
HTML: Frames Frame Tags HTML Frames Example 1/13/2019 HTML: Frames Frame Tags <frameset> </frameset> holds two or more frame elements <frame src=“URL”> defines a frame (window) within a frameset HTML Frames Divide the browser window into pieces Display multiple HTML document in the same browser window Each HTML document is called a frame 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% 75% left.htm right.htm http://widit2.knu.ac.kr/~kiyang/share/html/frameDemo.htm Internet Technology
HTML: More Frame Examples 1/13/2019 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> </frameset> Named Frames 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> top.htm left.htm right.htm Example: http://widit2.knu.ac.kr/~kiyang/share/html/frameDemo2.htm http://widit2.knu.ac.kr/~kiyang/share/html/frameDemo3.htm Internet Technology
HTML: iFrame Inline Frame 1/13/2019 HTML: iFrame Inline Frame <h1>iFrame</h1> <iframe src=“index.htm“ > </iframe> Attributes - name - height, width - scrolling - frameborder Examples: http://widit2.knu.ac.kr/~kiyang/share/html/iframeDemo.htm http://widit2.knu.ac.kr/~kiyang/share/html/iframeDemo2.htm http://widit2.knu.ac.kr/~kiyang/share/html/iframeDemo3.htm http://widit2.knu.ac.kr/~kiyang/share/html/iframeDemo4.htm Internet Technology