Your SlideShare is downloading. ×
0
HTML – Tables and FormsSvetlin NakovTelerik Corporationwww.telerik.com
Contents1.   HTML Tables        Nested Tables        Cells Width        Cell Spacing and Padding        Column and Row...
Contents (2)2.   HTML Forms        Form Fields        Form Controls            Text field            Text area        ...
HTML Tables
HTML Tables Tables represent tabular   data   A table consists of one or several rows   Each row has one or more column...
HTML Tables (2) Start and end of a table   <table> ... </table> Start and end of a row   <tr> ... </tr> Start and end o...
Simple HTML Tables – Example<table border="1" cellspacing="0" cellpadding="5">  <tr>    <td><img src="ppt.gif"></td>    <t...
Simple HTML Tables – Example (2)<table border="1" cellspacing="0" cellpadding="5">  <tr>    <td><img src="ppt.gif"></td>  ...
Simple HTML Tables      Live Demo
Complete HTML Tables Tables rows split                  into three sections: heading, body and footer, each containing ta...
Complete HTML Table: Example<table>            First comes the header<thead>  <tr><td>Column heading</td><td>Column  headi...
Complete HTML Table:                                Example (2)<table>                               table-full.html<thead...
Nested Tables   Table data “cells” (<td>) can contain nested    tables (tables within tables):    <table border="1">     ...
Nested Tables   Live Demo
Cells Width   Tables and cells can have width attribute     Width can be given in pixels or percentages    table-width.h...
Table Width  Live Demo
Cell Spacing and Padding Tables have two important attributes:  cellspacing            cellpadding      cell     cell  ...
Cell Spacing and Padding –                                     Exampletable-cells.html<html>  <head><title>Table Cells</ti...
Cell Spacing and Padding –                                  Example (2)table-cells.html<html>  <head><title>Table Cells</t...
Table Cell Spacing and Cell Padding     Live Demo
Column and Row Span Table cells have two important attributes:    colspan                                 rowspan  cols...
Column and Row Span – Exampletable-colspan-rowspan.html<html>  <head><title>Colspan and Rowspan</title></head>  <body>    ...
Column and Row Span –table-colspan-rowspan.html                                 Example (2)<html>  <head><title>Colspan an...
HTML FormsEntering User Data from a Web Page
HTML Forms Forms are the primary    method for gathering data from site visitors Create a form block with   <form></form...
Form Fields   Text fields are single-line entry fields:     <input type="text" name="FirstName" value="This     is a text...
Form Input Controls   Create a checkbox:     <input type="checkbox" name="fruit"     value="apple">   Create a radio but...
Other Form Controls Pull down menu (drop-down list):  <select name="gender">    <option value="Value 1"      selected="se...
Other Form Controls (2)   Reset button – clears the form     <input type="reset" name="resetBtn"     value="Clear the for...
Other Form Controls (3)   Password input – acts like normal text field but    hides the text with * signs     <input type...
HTML Forms – Exampleform.html<form method="POST" action="apply-now.php">  <input name="subject" type="hidden" value="Class...
HTML Forms – Example (2)form.html (continuation)  <p>    Gender:    <input name="gender" type="radio" value="Male"       c...
HTML Forms – Example (3)form.html (continuation)  <p>    Gender:    <input name="gender" type="radio" value="Male"       c...
HTML Frames<frameset>, <frame> and <iframe>
HTML Frames Frames provide a way to show multiple HTML documents in a single Web page  The page is split into multiple p...
Embedded Frames: <iframe> Embedded frames provide a way to show one Web site inside another Web site:                    ...
HTML – Tables and FormsQuestions?              http://academy.telerik.com
Upcoming SlideShare
Loading in...5
×

HTML: Tables and Forms

14,548

Published on

Published in: Education
1 Comment
3 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
14,548
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
175
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "HTML: Tables and Forms"

  1. 1. HTML – Tables and FormsSvetlin NakovTelerik Corporationwww.telerik.com
  2. 2. Contents1. HTML Tables  Nested Tables  Cells Width  Cell Spacing and Padding  Column and Row Span 2
  3. 3. Contents (2)2. HTML Forms  Form Fields  Form Controls  Text field  Text area  Select  Radio button  Checkbox  Button  Image button 3
  4. 4. HTML Tables
  5. 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. 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. 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. 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. 9. Simple HTML Tables Live Demo
  10. 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. 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. 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. 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. 14. Nested Tables Live Demo
  15. 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. 16. Table Width Live Demo
  17. 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. 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. 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. 20. Table Cell Spacing and Cell Padding Live Demo
  21. 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. 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. 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. 24. HTML FormsEntering User Data from a Web Page
  25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34. HTML Frames<frameset>, <frame> and <iframe>
  35. 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. 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. 37. HTML – Tables and FormsQuestions? http://academy.telerik.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×