Html - Tables, Forms and Frames by Telerik Academy
Download as PPTX, PDF5 likes1,791 views
The document discusses various HTML5 elements for tables, forms, and frames. It covers the basics of creating tables with <table>, <tr>, and <td> tags. It describes more advanced table features like header, footer, column and row groups. The document also covers HTML form elements for text, buttons, checkboxes, selects, and other inputs. It provides examples of creating forms and applying attributes like required, pattern and autofocus. Finally, it discusses HTML frames for displaying multiple pages using the <frameset>, <frame> and <iframe> tags.
![ rowspan
Defines how
many rows the
cell occupies
colspan
Defines how
many columns
the cell occupies
Column and Row Span
Cells have two attributes related to merging
25
cell[1,1] cell[1,2]
cell[2,1]
colspan="1"colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2" rowspan="1"
rowspan="1"](https://image.slidesharecdn.com/html-5-tables-forms-frames-140522025522-phpapp01/85/Html-Tables-Forms-and-Frames-by-Telerik-Academy-25-320.jpg)
![Column and Row Span –
Example
26
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class="2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class="3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
table-colspan-rowspan.html](https://image.slidesharecdn.com/html-5-tables-forms-frames-140522025522-phpapp01/85/Html-Tables-Forms-and-Frames-by-Telerik-Academy-26-320.jpg)
![<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class="2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class="3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Column and Row Span –
Example (2)
27
table-colspan-rowspan.html
Cell[2,3]Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]Cell[1,1]](https://image.slidesharecdn.com/html-5-tables-forms-frames-140522025522-phpapp01/85/Html-Tables-Forms-and-Frames-by-Telerik-Academy-27-320.jpg)
![Input Fields withValidation
Email – provides a simple validation for email
Can be passed a pattern for validation
On a mobile device brings the email keyboard
URL – has validation for url
On a mobile device brings the url keyboard
Telephone
Brings the numbers keyboard
44
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />](https://image.slidesharecdn.com/html-5-tables-forms-frames-140522025522-phpapp01/85/Html-Tables-Forms-and-Frames-by-Telerik-Academy-44-320.jpg)
Html - Tables, Forms and Frames by Telerik Academy
- 1. HTML 5 –Tables, Forms and Frames Doncho Minkov Telerik Web Design Course html5course.telerik.com TechnicalTrainer http://minkov.it
- 2. Contents HTMLTables SimpleTables Complete HTML 5Tables Data cells and Header cells NestedTables Complex tables Cells Width Cell Spacing and Padding Column and Row Span 2
- 3. Contents (2) HTML Forms Form Fields and Fieldsets Text boxes Buttons Checkboxes and Radio Buttons Select fields Hidden fields Sliders and Spinboxes Validation fields 3
- 4. Contents (3) HTML Frames Frame and Noframe tags IFrames 4
- 5. HTMLTables
- 6. HTMLTables Tables represent tabular data A table consists of one or several rows Each row has one or more columns Tables comprised of several core tags: <table></table>: begin / end the table <tr></tr>: create a table row <td></td>: create tabular data (cell) Tables should not be used for layout. Use CSS floats and positioning styles instead 6
- 7. Simple HTMLTables – Example 7 <table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr> </table>
- 9. Data Cells and Header Cells Two kinds of cells in HTML 5 tables Data cells – containing the table data Header cells – used for the column names or some more important cells in a table Why two kinds of cells? Used to semantically separate the cells <tr> <th>Full name</th> <th> Mark </th> </tr> <tr> <td>Doncho Minkov</td> <td>Very good 5</td> </tr> <tr> <td>Georgi Georgiev</td> <td>Exellent 6</td> </tr>
- 10. Data and Header Cells Live Demo 10
- 11. Complete HTML 5Tables With Header, Footer and Body 11
- 12. Complete HTMLTables Table rows split into three semantic sections: header, body and footer <thead> denotes table header and contains <th> elements, instead of <td> elements <tbody> denotes collection of table rows that contain the very data <tfoot> denotes table footer but comes BEFORE the <tbody> tag <colgroup> and <col> define columns (used to set column widths) 12
- 13. Complete HTMLTable: Example 13 <table> <colgroup> <col style="width:100px" /><col /> </colgroup> <thead> <tr><th>Column 1</th><th>Column 2</th></tr> </thead> <tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr> </tfoot> <tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> </tbody> </table> header footer Last comes the body (data) th columns
- 14. <table> <colgroup> <col style="width:200px" /><col /> </colgroup> <thead> <tr><th>Column 1</th><th>Column 2</th></tr> </thead> <tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr> </tfoot> <tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> </tbody> </table> Complete HTMLTable: Example (2) 14 table-full.html Although the footer is before the data in the code, it is displayed last
- 15. Complete HTML 5Tables Live Demo 15
- 16. NestedTables Tables inTables inTables inTables… 16
- 17. NestedTables Table "cells" (<td>) can contain nested tables (tables within tables): 17 <table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table> nested-tables.html
- 19. ComplexTables With Padding, Spacing and Stuff
- 20. cellpadding Defines the empty space around the cell content cellspacing Defines the empty space between cells Cell Spacing and Padding Tables have two attributes related to space 20 cell cell cell cell cell cell cell cell
- 21. Cell Spacing and Padding – Example 21 <html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table-cells.html
- 22. Cell Spacing and Padding – Example (2) 22 <html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table-cells.html
- 23. Table Cell Spacing and Cell Padding Live Demo
- 24. Row and Column Spans How to make a two-cells column? Or row?
- 25. rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Column and Row Span Cells have two attributes related to merging 25 cell[1,1] cell[1,2] cell[2,1] colspan="1"colspan="1" colspan="2" cell[1,1] cell[1,2] cell[2,1] rowspan="2" rowspan="1" rowspan="1"
- 26. Column and Row Span – Example 26 <table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> table-colspan-rowspan.html
- 27. <table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> Column and Row Span – Example (2) 27 table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
- 28. Row and Columns Spans Live Demo 28
- 29. HTML 5 Forms Entering User Data from a Web Page
- 30. What are HTML 5 Forms? The primary method for gathering data from site visitors HTML 5 Forms can contain Text fields for the user to type Buttons for interactions like "Register", "Login", "Search" Menus, Sliders, etc… Check Google,Yahoo, Facebook Google search field is a simpleText field 30
- 31. How to Create Forms? Create a form block with Example: 31 <form></form> <form name="myForm" method="post" action="path/to/some-script.php"> ... </form> The "action" attribute tells where the form data should be sent The "method" attribute tells how the form data should be sent – via GET or POST request
- 32. Text Fields Single-line text input fields: Multi-line text input fields (textarea): Password input – a text field which masks the entered text with * signs 32 <input type="text" name="FirstName" value="This is a text field" /> <textarea name="Comments">This is a multi-line text field</textarea> <input type="password" name="pass" />
- 33. Buttons Reset button – brings the form to its initial state Submit button: Image button – acts like submit but image is displayed and click coordinates are sent Ordinary button – no default action, used with JS 33 <input type="reset" name="resetBtn" value="Reset the form" /> <input type="image" src="submit.gif" name="submitBtn" alt="Submit" /> <input type="button" value="click me" /> <input type="submit" value="Apply Now" />
- 34. Checkboxes and Radio Buttons Checkboxes: Radio buttons: Radio buttons can be grouped, allowing only one to be selected from a group: 34 <input type="checkbox" name="fruit" value="apple" /> <input type="radio" name="title" value="Mr." /> <input type="radio" name="city" value="Lom" /> <input type="radio" name="city" value="Ruse" />
- 35. Select Fields Dropdown menus: Multiple-choice menus 35 <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> </select>
- 36. Hidden Fields Hidden fields contain invisible data Not shown to the user Used by JavaScript and server-side code ViewState, SessionState, etc.. 36 <input type="hidden" name="Account" value="This is a hidden text field" />
- 37. Labels Labels are used to associate an explanatory text to a form field using the field's ID. Clicking on a label focuses its associated field (checkboxes are toggled, radio buttons are checked) Labels are both a usability and accessibility feature and are required in order to pass accessibility validation. 37 <label for="fn">First Name</label> <input type="text" id="fn" />
- 38. Fieldsets Fieldsets are used to enclose a group of related form fields: The <legend> is the fieldset's title. 38 <form method="post" action="form.aspx"> <fieldset> <legend>Client Details</legend> <input type="text" id="Name" /> <input type="text" id="Phone" /> </fieldset> <fieldset> <legend>Order Details</legend> <input type="text" id="Quantity" /> <textarea cols="40" rows="10" id="Remarks"></textarea> </fieldset> </form>
- 39. HTML 5 Forms Inputs Fields Live Demo 39
- 40. Sliders and Spinboxes Lets make it spin
- 41. Range and Spinbox Restricts users to enter only numbers Additional attributes min, max and step and value Can become Spinbox or Slider, depending on the input type Have some differences on different browsers Sliders and Spinboxes do not work on Firefox Shown as regular textboxes 41 <input type="range" min="0" max="100" /> <input type="number" min="0" max="100" />
- 42. Sliders and Spinboxes Live Demo 42
- 43. Attributes from HTML 5 Autocomplete The browser stores the previously typed values Brings them back on a later visit on the same page Autofocus The field becomes on focus on page load Required The field is required to be filled/selected 43
- 44. Input Fields withValidation Email – provides a simple validation for email Can be passed a pattern for validation On a mobile device brings the email keyboard URL – has validation for url On a mobile device brings the url keyboard Telephone Brings the numbers keyboard 44 <input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/> <input type="url" required="true" /> <input type="tel" required="true" />
- 46. TabIndex The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing theTAB key tabindex="0" (zero) - "natural" order If X <Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" Elements with negative tabindex are skipped, however, this is not defined in the standard 46 <input type="text" tabindex="10" />
- 48. HTML Frames <frameset>, <frame> and <iframe>
- 49. HTML Frames Frames provide a way to show multiple HTML documents in a single Web page The page can be split into separate views (frames) horizontally and vertically Frames were popular in the early ages of HTML development, but now their usage is rejected Frames are not supported by all user agents (browsers, search engines, etc.) A <noframes> element is used to provide content for non-compatible agents. 49
- 50. HTML Frames – Demo 50 <html> <head><title>Frames Example</title></head> <frameset cols="180px,*,150px"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> frames.html Note the target attribute applied to the <a> elements in the left frame.
- 51. Inline Frames: <iframe> Inline frames provide a way to show one website inside another website: 51 <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe> iframe-demo.html
- 52. HTML –Tables and Forms Questions? http://academy.telerik.com
- 53. Homework 53 1. Create Web Pages like the following using tables: 2. Create aWeb Page like the following using forms:
- 54. Homework (2) 3. Create aWeb form that looks like this sample: 54
- 55. Homework (3) 4. Create a Calculator-like table. You should use a HTML 5 form for the Calculator Buttons for all the numbers and operators (+, -, etc.) Textbox for the result Do not make the same styles as the example. 55
- 56. Homework (4) 5. Create the following using tables and forms: 56
- 57. Homework (5) 6. Construct the following Grid component: Try to make a HTML page, that looks just like the example Not required to style for the homework 57
- 58. Homework (7) 7. Create the following HTML 5 Page Hint: Use Fieldsets and Nested tables 58