Faculty of Computer Science and Engineering TABLES-FRAMESET Faculty of Computer Science and Engineering
TABLE Tables on the Web: There are two ways to insert a table of information on a Web page: Text Table. Graphical Table. 1/2/2019 Faculty of Computer Science and Engineering
CREATING A TEXT TABLE Text table use type standard type-writer character, so that a line in text table is created by repeating a pographical such as a hyphen, underline or equals sign. A text table relies on spaces and the characters that fill those spaces to create its columns boundaries. Using the <pre> tag The <Pre> tag display preformatted text, text formatted in ways that you want retained in your Web page.
CREATING A TEXT TABLE <body> <pre> Manufacturer Model Price ==================================== City Computers P325+ $2500 MidWest CPU 586/Ultra $2700 CowCity Computer p133/+ $2450 CMF Computer p150z $2610 </pre> </body>
GRAPHICAL TABLE A graphical Table allows you to include design elements such as color, shading and borders. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The td content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
GRAPHICAL TABLE <TABLE > <TR> <TD>content 1</TD> <TD>content 2</TD> … <TD>content n</TD> </TR> … </TABLE>
GRAPHICAL TABLE Example: <html><body> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <body><html>
GRAPHICAL TABLE <html><body> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <body><html>
GRAPHICAL TABLE <html><body> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <td>400</td> <td>500</td> <td>600</td> </table> <body><html>
GRAPHICAL TABLE Creating Header with the <TH> tag Headings in a table are defined with the <th> tag.
GRAPHICAL TABLE <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
GRAPHICAL TABLE Creating a Table Caption: to create a caption Table you use <CAPTION> tag Syntax: <Table> <Caption align=”Value”> Caption text</Caption> <tr> <td>Cell1</td> <td>Cell1</td>… </tr>…
Modifying the appearance of a Table Adding a table border <Table Border =n>…<Table> Example: <Table border=1> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </table>
Modifying the appearance of a Table Controlling cell spacing and padding: Cellspacing property controls the amount of space inserted between table cells. <Table CellSpacing =”size”> Example: <table border="1" cellspacing="10”> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table>
Modifying the appearance of a Table Controlling cell spacing and padding: Cellspacing property controls the space between the table text and the cell borders. <Table CellPadding =”size”> Example: <table border="1" cellPadding="10”> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table>
Modifying the appearance of a Table Controlling Table Alignment: By default, the browser places table on the page’s left margin. You can change this placement by adding the ALIGN property to the TABLE tag. <TABLE ALIGN=“Left/Right/Center”>
Modifying the appearance of a Table Controlling Text Alignment: The Align property of <TD> tag is used aign text within table cells. The Align property include the values: left, right, center By default, text is aligned with the left of the table cell. The Valign property of <TD> tag allows you to control the vertical placement of text within the table cell. The Valign property include the values: top, middle, bootom
Modifying the appearance of a Table Syntax: <Table> <tr> <td align=“left/right/center”>cell1</td> </tr> <td valign=“top/middle/bootm”>cell2</td> </Table>
Modifying the appearance of a Table Working with Table and Cell size: Defining the Table size: <Table Width=Size height=Size> Defining Cell and Column sizes: <Td Width=Size height=Size>
Modifying the appearance of a Table Modifying the Table Bacground: To change the background color of the entire table, insert the BGCOLOR property in the <TABLE>tag. To change the background color of individual cells, insert the BGCOLOR property in the <TR>, <TH> or <TD>tag.
Modifying the appearance of a Table Spanning Rows and Columns: a spanning cell is a cell that occupies more than one row or column in a table. You can create spanning cells by inserting the ROWSPAN and COLSPAN properties in a <TD> or <TH> tag. Syntax: <TD ROWSPAN=value COLSPAN=value> Text </TD>
Modifying the appearance of a Table <Table border="1" bgcolor= “fuschia” bordercolor=”red” align=”center” Width=50% Height=30%> <caption> Properties of Table</caption> <tr> <th colspan="3"> Colspan</th> </tr> <th Rowspan=”2”> Rowspan</th> <td align=center>Cell 1</td> <td align=center>Cell 2</td> <td align=center> Cell 3</td> <td align=center> Cell 4</td> </table>
Controlling Page Layout with Table
Controlling Page Layout with Table Step 1: create a Table 1 rows and 2 columns <table> <tr> <td> <!— list of hypertext link--> </td> <!--Tabble 2 -- > </tr> </table>
Controlling Page Layout with Table Step 2: Create the second table 3 rows and 2 columns <table> <tr><td colspan =2><!—logo</td></tr> <tr> <td rowspan =2><!--Content1 -- ></td> <td><!--Content2 -- ></td> </tr> <td><!—Content 3 -- ></td> </table>
FRAMES When website containt several pages, each page is dedicated to a particular subject. With frames, you can display more than one Web page in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page Faculty of Computer Science and Engineering
Creating a Frame Layout Syntax: <HTML> <HAED> <TITLE>Page Title</TITLE> </HEAD> <FRAMESET> Frame Definitions </FRAMESET> </HTML> Faculty of Computer Science and Engineering
Creating a Frame Layout Specifying Frame size and Orientation: <HTML> <HEAD><TITLE>Title</TITLE></HEAD> <Frameset Rows=”a, b…” > <Frame name=”Name1” Src=”Content1.htm> <Frame name=”Name2” Src=”Content2.htm> ….. <Frame name=”Name_n” Src=”Content_n.htm> </Frameset> </HTML> Faculty of Computer Science and Engineering
Creating a Frame Layout <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> Faculty of Computer Science and Engineering
Creating a Frame Layout <HTML> <HEAD><TITLE>Title</TITLE></HEAD> <Frameset Cols=”a, b…” > <Frame name=”Name1” Src=”Content1.htm> <Frame name=”Name2” Src=”Content2.htm> ….. <Frame name=”Name_n” Src=”Content_n.htm> </Frameset> </HTML> Faculty of Computer Science and Engineering
Creating a Frame Layout <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> Faculty of Computer Science and Engineering
Creating a Frame Layout If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames. You cannot use the <body> tags together with the <frameset> tags However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body> tags. Faculty of Computer Science and Engineering
The appearance of Frames Noresize: If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Frame Margins: Marginwidth: is the amount of space that appears to the page’s left and right. Marginheight: is the amount of space that appears above and below the content of the page in frame. Faculty of Computer Science and Engineering
Frames and Hypertext Links Assigning a name to a Frame: <Frame name=”Frame_name” src=”Page.htm”> Specifying a link Target: <A Href=”Page.htm Target=”Frame_name”> Nhãn mục liên kết </A> Faculty of Computer Science and Engineering
Frames and Hypertext Links <FRAMESET ROWS="60,*"> <!--- Company logo ---> <FRAME SRC="Logo.htm" marginheight=1 noresize scrolling=NO name=Topframe> <!--- Nested frames ---> <FRAMESET COLS="140,*"> <!--- A list of staff photos ---> <FRAME SRC="Photos.htm" NAME=Leftframe> <!--- Individual staff biographies ---> <FRAME SRC="Bester.htm" NAME=Mainframe> </FRAMESET> Faculty of Computer Science and Engineering
Frames and Hypertext Links Using the <BASE>tag: The <BASE> tag appears within the <HEAD> tags of HTML file and is used to specify global options for the page. One of the properties of the <BASE> taf is the TARGET propety, which indentifies a default target for all of the page’s hyperlinks. <Head> <Base Target=”Frame_name”> <a href=”URL”>Text_link</a> … </head> Faculty of Computer Science and Engineering
Frames and Hypertext Links Using the <NOFRAMES>tag: The <noframes> tag is used for browsers that do not handle frames. The noframes element can contain all the elements that you can find inside the body element of a normal HTML page. The noframes element is most used to link to a non-frameset version of the web site or to display a message to users that frames are required. Faculty of Computer Science and Engineering
Frames and Hypertext Links <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <noframes> Sorry, your browser does not handle frames! </noframes> </frameset> </html> Faculty of Computer Science and Engineering
Frames and Hypertext Links The <iframe> Tag: the <iframe> tag defines an inline frame that contains another document. Syntax: <Iframe Src=”Page.htm” Name=”name” Width= x Height=y Align=left/ right> <p>Your browser does not support iframes.</p> </Iframe> Faculty of Computer Science and Engineering