Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1 Tables Structural technique based on rows and columns 2 Tables on the World Wide Web • A table allows you to organize information on a web page using HTML tags • Useful when you want to arrange information into rows and columns • Useful for newspaper style websites or for lists • Can be complex with • Images • Borders • Background colors • Information spanning rows or columns 3 Defining a Table Structure The first step to creating a table is to plan and specify the table structure: 4 the number of rows and columns the location of column headings the placement of a table caption Once the table structure is in place, you can start entering data into the table Using the <table>, <tr>, and <td> Tags • • • • • 5 Tables consist of rows, columns and cells A row is a horizontal line of information A column is a vertical line of information A cell is the intersection of a row and a column The tags involved are <table> tag that identifies the start and ending of the table <tr> (for table row) <td> (for table data) tag indicates the presence of individual table cells HTML Structure of a Table Beginning of the table structure Table cells First row of six in the table You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. End of the table structure 6 Creating Headings with the <th> Tag HTML provides the <th> tag for table headings Text formatted with the <th> tag is centered within the cell and displayed in a boldface font The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text 7 Adding Table Headings to the Table Text in cells formatted with the <th> tag is bold and centered above each table column Row of table headings 8 Result of Table Headings as Displayed in the Browser Table headings appear bold and centered over their columns 9 Creating a Table Caption HTML allows you to specify a caption for a table The syntax for creating a caption is: <caption align=“alignment”>caption text</caption> 10 alignment indicates the caption placement a value of “bottom” centers the caption below the table a value of “top” or “center” centers the caption above the table a value of “left” or “right” place the caption above the table to the left or right Inserting a Table Caption Placing the caption text within a pair of <b> tags causes the caption to display as bold Caption text Caption will be centered above the table 11 Result of a Table Caption A table with caption Table caption 12 Modifying the Appearance of a Table You can modify the appearance of a table by adding: gridlines borders background color HTML also provides tags and attributes to control the placement and size of a table 13 Working with the Table Border By default, browsers display tables without table borders A table border can be added using the border attribute to the <table> tag The syntax for creating a table border is: <table border=“value”> … </table> value is the width of the border in pixels The size attribute is optional; if you don’t specify a size, the browser creates a table border 1 pixel wide Can also use CSS 14 Tables with Different Borders Values The effect on a table’s border when the border size is varied 15 Adding a 5-Pixel Border to a Table Only the outside border is affected by the border attribute; the internal gridlines are not affected 16 Spanning Rows and Columns To merge several cells into one, you need to create a spanning cell A spanning cell is a cell that occupies more than one row or column in a table Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. The syntax for these attributes is: <td rowspan=“value” colspan=“value”> … </td> 17 value is the number of rows or columns that the cell spans in the table Spanning Rows and Columns When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row When a cell spans several rows, the rows below the spanning cell must also be adjusted 18 Example of Spanning Cells This cell spans two columns and two rows This cell spans three rows 19 This cell spans three columns A Table Structure with a Row-Spanning Cell Four table cells in the first row Only three table cells are required for the second and third rows HTML code Resulting table 20 Adding Spanning Cells to a Table These cells span three rows 21 Spanning cells This cell spans two columns Aligning a Table and its Contents By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge You can specify a different horizontal alignment for a <td> or <th> element with: align=“position” Or CSS 22 Aligning a Table on the Web Page To align a table with the surrounding text, use the align attribute as follows: align=“alignment” alignment equals “left”, “right”, or “center” left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it 23 Aligning the Contents of a Table By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge By using the align and valign attributes, you can specify the text’s horizontal and vertical placement To align the text for a single column, you must apply the align attribute to every cell in that column Or use CSS 24 Values of the align and valign Attributes 25 Setting a Background Color Table elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the <table>, <tr>, <td>, or <th> tags as follows: <table bgcolor=“color”> <tr bgcolor=“color”> <td bgcolor=“color”> <th bgcolor=“color”> color is either a color name or hexadecimal color value Or use CSS 26 Results of a Table with a Colored Background 27 Applying a Background Image to a Table, Row, and Cell parch.jpg <tr background=“parch.jpg”> <table background=“parch.jpg”> 28 <td background=“parch.jpg”> Forms Data Entry and data capture 29 Creating Web Forms Control elements Elements in a form in which a user can enter information 30 Input boxes Selection lists Option buttons Check boxes Group boxes Text areas Buttons Parts of a Web Form 31 Form tag Surrounds all form related tags (input, textarea, etc.) SYNTAX <form id=“formname” name=“formname” action=“page2.html” method=“get” > other form elements go in between </form> 32 Input tag Used for a variety of input boxes SYNTAX <input type=“sometype” ……./> 33 Text boxes, Password boxes, Hidden boxes By default, displays 20 characters of text on a single line To change width, add width <input type=“text” size="value“ value=“show me in box” width=“30”/> <input type=“hidden” value=“show me in box” /> <input type=“password” /> 34 TextArea Used to display a tall and wide textbox SYNTAX <textarea cols=“number” rows=“number”> content </textarea> 35 Radio button types Also called option buttons (buttons with circles) SYNTAX Football <input type=“radio” name=“mydot” value=“F” checked/> Baseball <input type=“radio” name=“mydot” value=“B” /> Tennis <input type=“radio” name=“mydot” value=“T” /> Choose a sport: Football ● 36 Baseball o Tennis o Checkbox button types Also called option buttons (buttons with circles) SYNTAX Football <input type=“checkbox” name=“box1” value=“Football” /> Baseball <input type=“checkbox” name=“box2” value=“B” checked/> Tennis <input type=“checkbox” name=“box3” value=“Tennis” /> Choose a sport: Football □ 37 Baseball ■ Tennis □ Button types 3 types Submit – sends web page to server Reset – clears all form fields Push – performs activity on web page SYNTAX <input type=“submit” name=“submitButton” value=“Submit Form” /> <input type=“button” name=“pushButton” onclick=“javascript functionx();” /> <input type=“reset” name=“reset” value=“Reset Form” /> <script> functionx() { statements ….. } </script> 38 HTML 5 HTML5 has several new input types for forms. These new features allow better input control and validation. Color - used for input fields that should contain a color Date - select a date Datetime - select a date and time (with time zone) datetime-local - select a date and time (no time zone) Month - select a month and year Time - select a time Week - select a week and year 39 HTML 5 HTML5 has several new input types for forms. These new features allow better input control and validation. Email – an email address. * Number - input fields that should contain a numeric value – can restrict values Range - used for input fields that should contain a value from a range of numbers Search - used for search fields (a search field behaves like a regular text field) Tel – a telephone number url - used for input fields that should contain a URL address * 40 * - automatically validated