Your SlideShare is downloading. ×
HTML: Tables and Forms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML: Tables and Forms

13,201
views

Published on

Published in: Education

1 Comment
2 Likes
Statistics
Notes
  • i will study hard.. thanks !!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,201
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
161
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML – Tables and FormsSvetlin NakovTelerik Corporationwww.telerik.com
  • 2. Contents1. HTML Tables  Nested Tables  Cells Width  Cell Spacing and Padding  Column and Row Span 2
  • 3. Contents (2)2. HTML Forms  Form Fields  Form Controls  Text field  Text area  Select  Radio button  Checkbox  Button  Image button 3
  • 4. HTML Tables
  • 5. HTML Tables 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 are losing favor to <div> and <span>, with the CSS revolution 5
  • 6. HTML Tables (2) Start and end of a table <table> ... </table> Start and end of a row <tr> ... </tr> Start and end of a cell in a row <td> ... </td> 6
  • 7. Simple HTML Tables – Example<table border="1" 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> 7
  • 8. Simple HTML Tables – Example (2)<table border="1" 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> 8
  • 9. Simple HTML Tables Live Demo
  • 10. Complete HTML Tables Tables rows split into three sections: heading, body and footer, each containing table rows Divides the table into semantic sections Table sections:  <thead> denotes table heading  <tbody> denotes collection of table rows that contain the very data  <tfoot> denotes table footer but comes BEFORE the <tbody> tag 10
  • 11. Complete HTML Table: Example<table> First comes the header<thead> <tr><td>Column heading</td><td>Column heading</td></tr></thead> Then comes the footer<tfoot> <tr><td>Column footer</td><td>Column footer</td></tr></tfoot> Last comes the body (data)<tbody> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table> 11
  • 12. Complete HTML Table: Example (2)<table> table-full.html<thead> <tr><td>Column heading</td><td>Column heading</td></tr></thead><tfoot> <tr><td>Column footer</td><td>Column footer</td></tr></tfoot><tbody> <tr><td>Cell 1</td><td>Cell 2</td></tr> Although the footer is <tr><td>Cell 3</td><td>Cell 4</td></tr></tbody> before the data in the</table> code, it is displayed last 12
  • 13. Nested Tables Table data “cells” (<td>) can contain nested tables (tables within tables): <table border="1"> nested-tables.html <tr> <td>Contact:</td> <td> <table border="1"> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table> 13
  • 14. Nested Tables Live Demo
  • 15. Cells Width Tables and cells can have width attribute  Width can be given in pixels or percentages table-width.html <table border="1" width="100%" cellspacing="0"> <tr> <td>Left</td> <td width="100%" align="center">Center</td> <td>Right</td> </tr> </table> 15
  • 16. Table Width Live Demo
  • 17. Cell Spacing and Padding Tables have two important attributes:  cellspacing  cellpadding cell cell cell cell cell cell cell cell  Defines the  Defines the empty empty space space around the cell between the cells contents 17
  • 18. Cell Spacing and Padding – Exampletable-cells.html<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0" bgcolor="red"> <tr><td bgcolor="yellow">First</td> <td bgcolor="yellow">Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> <tr><td>First</td><td>Second</td></tr> </table> </body></html> 18
  • 19. Cell Spacing and Padding – Example (2)table-cells.html<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0" bgcolor="red"> <tr><td bgcolor="yellow">First</td> <td bgcolor="yellow">Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> <tr><td>First</td><td>Second</td></tr> </table> </body></html> 19
  • 20. Table Cell Spacing and Cell Padding Live Demo
  • 21. Column and Row Span Table cells have two important attributes:  colspan  rowspan colspan="1" colspan="1" rowspan="2" rowspan="1" cell[1,1] cell[1,2] cell[1,2] cell[1,1] cell[2,1] cell[2,1] colspan="2" rowspan="1"  Defines how  Defines how many columns many rows the the cell occupies cell occupies 21
  • 22. Column and Row Span – Exampletable-colspan-rowspan.html<html> <head><title>Colspan and Rowspan</title></head> <body> <br/> <table cellspacing="0" cellpadding="10" border="1"> <tr bgcolor="yellow"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr bgcolor="#FFCC66"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr bgcolor="#CCCCFF"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> </body></html> 22
  • 23. Column and Row Span –table-colspan-rowspan.html Example (2)<html> <head><title>Colspan and Rowspan</title></head> <body> <br/> <table cellspacing="0" cellpadding="10" border="1"> <tr bgcolor="yellow"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> Cell[1,1] Cell[2,1] <tr bgcolor="#FFCC66"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> Cell[1,2] Cell[3,2] <tr bgcolor="#CCCCFF"><td>Cell[1,3]</td> Cell[2,2] <td>Cell[2,3]</td></tr> </table> Cell[1,3] Cell[2,3] </body></html> 23
  • 24. HTML FormsEntering User Data from a Web Page
  • 25. HTML Forms Forms are the primary method for gathering data from site visitors Create a form block with <form></form> The “method" attribute tells how the form data should be sent – Example: via GET or POST request <form name="myForm" method="post" action="path/to/some-script.php"> ... </form> The "action" attribute tells where the form data should be sent 25
  • 26. Form Fields Text fields are single-line entry fields: <input type="text" name="FirstName" value="This is a text field"> Text areas can contain multiple lines of text: <textarea name="Comments">This is a multi-line text field</textarea> Hidden fields contain data not shown to user: <input type="hidden" name="Account" value="This is a hidden text field">  Often used by JavaScript code 26
  • 27. Form Input Controls Create a checkbox: <input type="checkbox" name="fruit" value="apple"> Create a radio button: <input type="radio" name="title" value="Mr."> Radio buttons can be grouped, allowing only one to be selected from a group: <input type="radio" name="town" value="Sofia"> <input type="radio" name="town" value="Varna"> 27
  • 28. Other Form Controls Pull down menu (drop-down list): <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> Submit button: <input type="submit" name="submitBtn" value="Apply Now"> 28
  • 29. Other Form Controls (2) Reset button – clears the form <input type="reset" name="resetBtn" value="Clear the form"> Image button – acts like submit but image is displayed instead of button <input type="image" src="submit.gif" name="submitBtn" alt="Submit"> Ordinary button – used for JavaScript, no default action <input type="button" value="simple button"> 29
  • 30. Other Form Controls (3) Password input – acts like normal text field but hides the text with * signs <input type="password" name="pass" value=""> Multiple select field – code is like drop down but displays list of items to select <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select> 30
  • 31. HTML Forms – Exampleform.html<form method="POST" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /> <p>Degree: <select name="degree"> <option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option> <option value="MBA" selected="true">Master of Business Administration</option> </select> </p> <p> First Name: <input type="text" name="firstname" /> </p> <p> Last Name: <input type="text" name="lastname" /> </p> <p> Student ID: <input type="password" name="studentid" /> </p> 31
  • 32. HTML Forms – Example (2)form.html (continuation) <p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONSBy clicking the Send Form button you agree to submit thisform.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p></form> 32
  • 33. HTML Forms – Example (3)form.html (continuation) <p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONSBy clicking the Send Form button you agree to submit thisform.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p></form> 33
  • 34. HTML Frames<frameset>, <frame> and <iframe>
  • 35. HTML Frames Frames provide a way to show multiple HTML documents in a single Web page  The page is split into multiple parts horizontally or vertically <html> <head><title>Frames Example</title></head> <frameset cols="25%,*,25%"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> frames.html 35
  • 36. Embedded Frames: <iframe> Embedded frames provide a way to show one Web site inside another Web site: iframe-demo.html <html> <head><title>IFrame Example</title></head> <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe> </html> 36
  • 37. HTML – Tables and FormsQuestions? http://academy.telerik.com

×