Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Html tables examples
Next
Upcoming SlideShare
Html tables examples
Next
Download to read offline and view in fullscreen.

Share

HTML: Tables and Forms

Download to read offline

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
  • revamore

    Sep. 9, 2021
  • ShivamSolanki12

    Oct. 13, 2019
  • greguior

    Mar. 5, 2019
  • 7303533377

    Aug. 28, 2018
  • laveshkumbhalkar

    Nov. 21, 2017
  • KRISHNATHAKUR31

    Oct. 26, 2017
  • HarshithaReddy41

    Sep. 6, 2017
  • ranevelayo

    Jan. 5, 2017
  • SerdarErdem4

    Dec. 1, 2016
  • asmaareda58

    Nov. 19, 2015
  • ThabangPhefo

    Oct. 30, 2015
  • ABISHEKK2

    Aug. 28, 2015
  • 1336735806

    Jul. 14, 2015
  • Pearlquotes

    Dec. 14, 2013
  • urke72

    Nov. 14, 2011

Views

Total views

30,128

On Slideshare

0

From embeds

0

Number of embeds

1,384

Actions

Downloads

1,327

Shares

0

Comments

0

Likes

15

×