Introducing Web Tables

Size: px

Start display at page:

Download "Introducing Web Tables"

Tracy Sparks
6 years ago
Views:

1 TABLE AND FRAMESET

2 Introducing Web Tables A table can be displayed on a Web page either in a text or graphical format. A text table: Contains only text, evenly spaced on the Web page in rows and columns Uses only standard word processing characters.

3 Introducing Web Tables A graphical table: It is displayed using graphical elements Can include design elements such as background colors, and colored borders with shading. Allows you to control the size of tables cells, rows, columns and alignment of text within the table.

4 Text table Creating a text table Using the <pre> tag to display preformatted text. It retains any spaces or line breaks indicated in the HTML file. The <pre> tag displays text using a fixed-width font. By using the <pre> tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is using.

5 Text table 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>

6 Graphical Tables Creating a text table <TABLE > <TR> <TD>content 1</TD> <TD>content n</td> </TR> <TR> <TD>content 1</TD> <TD>content n</td> </TR> </TABLE>

7 Graphical table Ex: <html><body> <h4>one column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <body><html>

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

9 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> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

10 Graphical table Creating Header with the <th> tag Headings in a table are defined with the <th> tag.

11 Graphical table Creating a Table Caption: to create a caption Table you use <caption> tag Syntax: <Table> <Caption align= Value > Caption text</caption> <tr> </tr> <Table> <td>cell1</td>

12 Modifying a Table Adding a table border <Table Border =n> <Table> Ex: <Table border=0>

13 Modifying a Table Cellspacing property controls the amount of space inserted between table cells. Ex: <Table CellSpacing = size > <table border="1" cellspacing="10 > <tr><td>first</td><td>row</td></tr> <tr><td>second</td><td>row</td></tr> </table>

14 Modifying a Table CellPadding property controls the space between the table text and the cell borders. Ex: <Table CellPadding = size > <table border="1" cellpadding="10 > <tr><td>first</td><td>row</td></tr> <tr><td>second</td><td>row</td></tr> </table>

15 Modifying a Table 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 >

16 Modifying a Table Text Alignment: The Align property of <TD> tag is used to align text within table cells. The Align property include the values: left, right, center, 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, it include the values: top, middle, bottom

17 Modifying a Table Syntax: <Table> <tr> <td align= left/right/center >cell1</td> </tr> <tr> <td valign= top/middle/bootm >cell2</td> </tr> </Table>

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

19 Modifying a Table Modifying the Table Background: To change the background color of the entire table: <table bgcolor = color > To change the background color of individual cells: insert the bgcolor property in the <tr>, <th> or <td> tag.

20 Modifying 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> </td> text

Modifying a Table <Table border="1" bgcolor= fuschia bordercolor= red align= center Width=50% Height=30%> <caption> Properties of Table</caption> <tr> </tr> <tr> </tr> <tr> <th

21 Modifying a Table <Table border="1" bgcolor= fuschia bordercolor= red align= center Width=50% Height=30%> <caption> Properties of Table</caption> <tr> </tr> <tr> </tr> <tr> <th colspan="3"> Colspan</th> <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> </tr> </table>

22 Table Heading, Body, and Footer HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags. <thead> is used for the table heading <tbody> is used for the table body <tfoot> is used for the table footer These tags do not format the table, but they do contain collections of rows called row groups.

23 The table heading, body, and footer syntax is: <table> <thead> Table Heading, Body, and Footer table rows containing heading information... </thead> <tfoot> table rows containing footer information... </tfoot> <tbody> <tr> first group of table rows... </tbody> <tbody> <tr> second group of table rows... </tbody> </table>

24 Table Heading, Body, and Footer A single table can contain several <tbody> tags to identify different parts of the table. The <thead> and <tfoot> sections must appear before any <tbody> sections in the table structure. These tags are most often used in a table that draws its data from an external data source, or tables that span several Web pages.

25 Table Heading, Body, and Footer The browser will repeat those sections across multiple pages. Not all browsers support this capability. Notice: no styling is applied by the browser when row groups are used apply your own styling.

26 Table Frames and Rules The frame attribute was introduced in HTML therefore might not be supported in older browsers. With the frame and rule attributes you can control how borders and gridlines are applied to the table. The frames attribute allows you to determine which sides of the table will have borders.

27 Table Frames and Rules The frame attribute syntax is: <table frame= type > </table> Type: box (the default), above below hsides vsides lhs, rhs, or void

28 Table Frames and Rules

29 Table Frames and Rules Ex:

30 Table Frames and Rules The rules attribute lets you control how the table gridlines are drawn. The syntax of the rules attribute is: <table rules= type > </table> type : All Rows cols or none

31 Table Frames and Rules Ex:

32 Using Tables for Page Layout Tables can contain images, headings, paragraphs, lists and other tables, so web designers using tables for page layout. The table borders would be hidden from the user, leaving only the table content visible. Tables support a wide variety of possible page layouts -> jigsaw layout

33 Using Tables for Page Layout jigsaw layout: The cell borders have been added to make the table structure clear, but they are removed in the final version of the object. The table contains three rows and three columns with eight background images. Only the middle cell contains any actual content;

34 Using Tables for Page Layout The remaining cells are used to display the graphic images that constitute the rounded border. When rendered by the browser without the table gridlines, it appears like a rectangle with rounded borders.

35 Using Tables for Page Layout

36 Using Tables for Page Layout Create table:

37 Using Tables for Page Layout

38 Using Tables for Page Layout

39 Using Tables for Page Layout Set the table styles: table.roundedbox { margin: 5px; border-collapse: collapse } table.roundedbox td {padding: 0px}

40 Using Tables for Page Layout Set the dimensions of the outside cells: Corner cell Top and bottom cells table.roundedbox td.topleft {width: 16px; height: 16px) table.roundedbox td.topright {width: 16px; height: 16px) table.roundedbox td-bottomleft {width: 16px; height: 16px) table.roundedbox td.bottomright {width: 16px; height: 16px) table.roundedbox td.top {width: auto; height : 16px) table.roundedbox td.bottom {width: auto; height: 16px) Left and right cells table.roundedbox td.left {width: 16px; height: auto) table.roundedbox td.right {width: 16px; height: auto)

41 Using Tables for Page Layout Adding the Rounded Border: The last part of the jigsaw table is to put background images in the eight outside cells. Add the styles to set the background images for the four corner cells:.topleft {background: url(topleft.png) no-repeat top left).topright {background: url(topright.png) no-repeat top right).bottomleft {background: url(bottomleft.png) no-repeat bottom left).bottomright {background url(bottomright.png) no-repeat bottom right)

42 Using Tables for Page Layout Add the styles for the top and bottom cell backgrounds:.top {background: url (top.prig) repeat-x -top).bottom {background: url(bottorn.png) repeat-x bottom) Add the background images for the left and right cells.left {background: url(left.png) repeat-y left).right {background: url(right.png) repeat-y right)

43 FRAMESET When website contain 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

44 Creating a Frame Layout Syntax: <html> <head> <title>page title</title> </head> <frameset> frame definitions </frameset> </html>

45 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= Namen Src= Content_n.htm> </Frameset> </HTML>

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

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

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

49 Creating a Frame Layout 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. Add the <noframes> tag for browsers that do not support frames.

50 Creating a Frame Layout Noframes 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.

51 The appearance of Frames 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

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

53 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. <head> <BASE targer=mainframe/top/left> </head> target property indentifies a default target for all of the page s hyperlinks.

54 Frames and Hypertext Links NOFRAMES The <noframes> tag is used for browsers that do not handle frames. It can contain all the elements that you can find inside the body element of a normal HTML page. It 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.

55 Frames and Hypertext Links Ex : <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>

56 Frames and Hypertext Links Iframe: 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>

INFS 2150 / 7150 Intro to Web Development / HTML Programming

XP Objectives INFS 2150 / 7150 Intro to Web Development / HTML Programming Designing a Web Page with Tables Create a text table Create a table using the , , and tags Create table headers