Chapter 2. List, Tables,Frame and Forms

Size: px

Start display at page:

Download "Chapter 2. List, Tables,Frame and Forms"

Edwin May
6 years ago
Views:

1 Chapter 2 List, Tables,Frame and Forms

2 Definition list <dl>,<dt>,<dd> dl represents a list of definitions of terms (block) dt represents each term, and dd its definition

3 Frames HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

4 (:SASOutput frame W i n d Internet lxplor cr r8] File Edit Yiew Favorites Tool$ H e r SAS""'pu'" - Tableof Contents (""'""' lli!seled f";) Q The SAS System ttp g rools " 1 The Reg Procedure race=1 MODEL1 Fit i wnte 1 Number of Qbserval!pn:;. Analysis of vanance Ftt Stattsbcs Parameter Estunates _ The REG Procedure Model; MODEL1 Dependent Variable: write writing score race=1 Number of Observations Read 24 Number of Observations Used Analysis of Variance 24 Sum of Mean F - p... e... u_._a.._f! 1 : v > My Computer lf( 100'1..

5 Creating Frames

6 Example

7 Result

8 Cols attribute

9 Tables:<table>,<tr>,<td><tc>

10 border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0". Table heading can be defined using <th> tag. cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

11 Table headers, captions:<th>,<caption>

12 Example <!DOCTYPE html> <html> <head> <title>hh'l Table Cellpadding </title> </head> <body> <table border="l" cellpadding="5" cellspacing="s"> <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>ramesh Raman</td> <td>seee</td> </tr> <tr> <td>shabbir Hussein</td> <td>7099</td> </tr> </table> </body> </html> This wil l produce following result :

13 You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

14 Examp le <!DOCTYPE ht ml> <html> <head > <t i t le> HHIL Tabl e Colspan/ROI span </t i t l e> </head> <body> <table border ''1''> <tr> <t h>column <th>column <th >Column </t r > 1</t h> 2</th> 3</t h> This will produce fo llowing result : <tr><t d r o 1span ="2">Ro l 1 Cell 1</td>< t d >Row 1 C e l l 2</t d ><td> Row 1 C e l l 3 </td></tr> <t r><t d >Ro l 2 Cell 2</t d ><t d>row 2 Cell 3</t d></ t r > <tr><t d col span "3">Ro l 3 Cell 1</td></ tr > </t ab l e > </body> </h tml > Column 1 Row 1Cell Column 2 Row 1Cell 2 1 Row 2 Cell 2 Column 3 Row 1Cell 3 Row 2 Cell 3 Row 3 Cell 1

15 Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute.

16 Example <!DOCTYPE html> <html> <head> <title>html Table Background </title> </head> <body> <table border="l" bordercolor="green" bgcolor="yellow"> <tr> <th>column <th>column <th>column </tr> 1</th> 2</th> 3</th> This will produce following result : Column 1 Column 2 Column 3 Row 1Cell Row 1Cell 2 Row 1Cell 3 Row 3 Cell 1 Row 2 Cell 2 <tr><td rovjspan="2">rovl 1 Cell 1</td><td>Rovl 1 Cell 2</td><td>Row 1 Cell 3 <tr><td>rovl 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">row 3 Cell 1</td></tr> </table> </body> </html> Row 2 Cell 3

17 Form Basics form: a group of UI controls that accepts information from the user and sends the information to a web server. forms use HTML UI controls (buttons, checkboxes, text fields, etc.) the information is sent to the server as a query string JavaScript can be used to create interactive controls (seen later)

18 HTML form : required action attribute gives the URL of the server web service that will process this form's data

19 Form example <form action=" <div> Let 's search Google: <input name="q" I> <input type="submit" I> <ldiv> </form> HTML Let's search Google: Submit Query I output should wrap the form's controls in a block element such as d i v

20 Form controls: 1 t t,... he fil ' i,

21 Text fields:

22 Text boxes<textarea>:

23 Checkboxes <input>:

24 Radio buttons:

25 Text labels: <label>

26 Drop-down list: <select><option>

27 Using <select> for list

28 Option groups:<optgroup>

29 Reset buttons

Chapter 4 Notes. Creating Tables in a Website

Chapter 4 Notes. Creating Tables in a Website Chapter 4 Notes Creating Tables in a Website Project for Chapter 4 Statewide Realty Web Site Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table Create a