SlideShare uma empresa Scribd logo
1 de 40
HTML – Tables and Forms Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
Contents  ,[object Object],[object Object],[object Object],[object Object],[object Object]
Contents (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML Tables
HTML Tables ,[object Object],[object Object],[object Object],[object Object],[object Object]
Simple HTML Tables – Example <table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot;> <tr> <td><img src=&quot;ppt.gif&quot;></td> <td><a href=&quot;lecture1.ppt&quot;>Lecture 1</a></td> </tr> <tr> <td><img src=&quot;ppt.gif&quot;></td> <td><a href=&quot;lecture2.ppt&quot;>Lecture 2</a></td> </tr> <tr> <td><img src=&quot;zip.gif&quot;></td> <td><a href=&quot;lecture2-demos.zip&quot;> Lecture 2 - Demos</a></td> </tr> </table>
Simple HTML Tables Live Demo
Complete HTML Tables ,[object Object],[object Object],[object Object],[object Object],[object Object]
Complete HTML Table: Example <table> <colgroup> <col style=&quot;width:100px&quot; /><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
Complete HTML Table: Example (2) <table> <colgroup> <col style=&quot;width:200px&quot; /><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> table-full.html Although the footer is before the data in the code, it is displayed last By default, header text is bold and centered.
Nested Tables ,[object Object],<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table> nested-tables.html
Nested Tables Live Demo
Cell Spacing and Padding ,[object Object],[object Object],[object Object],[object Object],[object Object],cell cell cell cell cell cell cell cell
Cell Spacing and Padding – Example <html> <head><title>Table Cells</title></head> <body> <table  cellspacing=&quot;15&quot; cellpadding=&quot;0&quot; > <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing=&quot;0&quot; cellpadding=&quot;10&quot;> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table- cells .html
Cell Spacing and Padding – Example (2) <html> <head><title>Table Cells</title></head> <body> <table  cellspacing=&quot;15&quot; cellpadding=&quot;0&quot; > <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing=&quot;0&quot; cellpadding=&quot;10&quot;> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table- cells .html
Table Cell Spacing and Cell Padding Live Demo
Column and Row Span ,[object Object],[object Object],[object Object],[object Object],[object Object],cell[1,1] cell[1,2] cell[2,1] colspan=&quot;1&quot; colspan=&quot;1&quot; colspan=&quot;2&quot; cell[1,1] cell[1,2] cell[2,1] rowspan=&quot;2&quot; rowspan=&quot;1&quot; rowspan=&quot;1&quot;
Column and Row Span – Example <table cellspacing=&quot;0&quot;> <tr class=&quot;1&quot;><td>Cell[1,1]</td> <td  colspan=&quot;2&quot; >Cell[2,1]</td></tr> <tr class=“2&quot;><td>Cell[1,2]</td> <td  rowspan=&quot;2&quot; >Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class=“3&quot;><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> table-colspan-rowspan.html
Column and Row Span – Example (2) <table cellspacing=&quot;0&quot;> <tr class=&quot;1&quot;><td>Cell[1,1]</td> <td  colspan=&quot;2&quot; >Cell[2,1]</td></tr> <tr class=“2&quot;><td>Cell[1,2]</td> <td  rowspan=&quot;2&quot; >Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class=“3&quot;><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> 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]
HTML Forms Entering User Data from a Web Page
HTML Forms ,[object Object],[object Object],[object Object],<form></form> <form name=&quot;myForm&quot; method=&quot;post&quot; action=&quot;path/to/some-script.php&quot;> ... </form> The &quot;action&quot; attribute tells where the form data should be sent The “method&quot; attribute tells how the form data should be sent – via GET or POST request
Form Fields ,[object Object],[object Object],[object Object],[object Object],<input type=&quot;text&quot; name=&quot;FirstName&quot; value=&quot;This is a text field&quot; /> <textarea name=&quot;Comments&quot;>This is a multi-line text field</textarea> <input type=&quot;hidden&quot; name=&quot;Account&quot; value=&quot;This is a hidden text field&quot; />
Fieldsets ,[object Object],[object Object],<form method=&quot;post&quot; action=&quot;form.aspx&quot;> <fieldset> <legend>Client Details</legend> <input type=&quot;text&quot; id=&quot;Name&quot; /> <input type=&quot;text&quot; id=&quot;Phone&quot; /> </fieldset> <fieldset> <legend>Order Details</legend> <input type=&quot;text&quot; id=&quot;Quantity&quot; /> <textarea cols=&quot;40&quot; rows=&quot;10&quot;   id=&quot;Remarks&quot;></textarea> </fieldset> </form>
Form Input Controls ,[object Object],[object Object],[object Object],<input type=&quot;checkbox&quot; name=&quot;fruit&quot; value=&quot;apple&quot; /> <input type=&quot;radio&quot; name=&quot;title&quot; value=&quot;Mr.&quot; /> <input type=&quot;radio&quot; name=&quot; city &quot; value=&quot;Lom&quot; /> <input type=&quot;radio&quot; name=&quot; city &quot; value=&quot;Ruse&quot; />
Other Form Controls ,[object Object],[object Object],<select name=&quot;gender&quot;> <option value=&quot;Value 1&quot; selected=&quot;selected&quot;>Male</option> <option value=&quot;Value 2&quot;>Female</option> <option value=&quot;Value 3&quot;>Other</option> </select> <input type=&quot;submit&quot; name=&quot;submitBtn&quot; value=&quot;Apply Now&quot; />
Other Form Controls (2) ,[object Object],[object Object],[object Object],<input type=&quot;reset&quot; name=&quot;resetBtn&quot; value=&quot;Reset the form&quot; /> <input type=&quot;image&quot; src=&quot;submit.gif&quot; name=&quot;submitBtn&quot; alt=&quot;Submit&quot; /> <input type=&quot;button&quot; value=&quot;click me&quot; />
Other Form Controls (3) ,[object Object],[object Object],<input type=&quot;password&quot; name=&quot;pass&quot; /> <select name=&quot;products&quot; multiple=&quot;multiple&quot;> <option value=&quot;Value 1&quot; selected=&quot;selected&quot;>keyboard</option> <option value=&quot;Value 2&quot;>mouse</option> <option value=&quot;Value 3&quot;>speakers</option> </select>
Other Form Controls (4) ,[object Object],[object Object],<input type=&quot;file&quot; name=&quot;photo&quot; /> <form enctype=&quot;multipart/form-data&quot;> ... <input type=&quot;file&quot; name=&quot;photo&quot; /> ... </form>
Labels ,[object Object],[object Object],[object Object],<label for=&quot;fn&quot;>First Name</label> <input type=&quot;text&quot; id=&quot;fn&quot; />
HTML Forms – Example <form method=&quot;post&quot; action=&quot;apply-now.php&quot;> <input name=&quot;subject&quot; type=&quot;hidden&quot; value=&quot;Class&quot; /> <fieldset><legend>Academic information</legend> <label for=&quot;degree&quot;>Degree</label> <select name=&quot;degree&quot; id=&quot;degree&quot;> <option value=&quot;BA&quot;>Bachelor of Art</option> <option value=&quot;BS&quot;>Bachelor of Science</option> <option value=&quot;MBA&quot; selected=&quot;selected&quot;>Master of Business Administration</option> </select> <br /> <label for=&quot;studentid&quot;>Student ID</label> <input type=&quot;password&quot; name=&quot;studentid&quot; /> </fieldset> <fieldset><legend>Personal Details</legend> <label for=&quot;fname&quot;>First Name</label> <input type=&quot;text&quot; name=&quot;fname&quot; id=&quot;fname&quot; /> <br /> <label for=&quot;lname&quot;>Last Name</label> <input type=&quot;text&quot; name=&quot;lname&quot; id=&quot;lname&quot; /> form.html
HTML Forms – Example (2) <br /> Gender:  <input name=&quot;gender&quot; type=&quot;radio&quot; id=&quot;gm&quot; value=&quot;m&quot; /> <label for=&quot;gm&quot;>Male</label> <input name=&quot;gender&quot; type=&quot;radio&quot; id=&quot;gf&quot; value=&quot;f&quot; /> <label for=&quot;gf&quot;>Female</label> <br /> <label for=&quot;email&quot;>Email</label> <input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; /> </fieldset> <p> <textarea name=&quot;terms&quot; cols=&quot;30&quot; rows=&quot;4&quot; readonly=&quot;readonly&quot;>TERMS AND CONDITIONS...</textarea> </p> <p> <input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Send Form&quot; /> <input type=&quot;reset&quot; value=&quot;Clear Form&quot; /> </p> </form> form.html (continued)
HTML Forms – Example (3) form.html (continued)
TabIndex ,[object Object],[object Object],[object Object],[object Object],<input type=&quot;text&quot; tabindex=&quot;10&quot; />
HTML Frames <frameset> ,  <frame>  and  <iframe>
HTML Frames ,[object Object],[object Object],[object Object],[object Object],[object Object]
HTML Frames – Demo <html> <head><title>Frames Example</title></head> <frameset cols=&quot;180px,*,150px&quot;> <frame src=&quot;left.html&quot; /> <frame src=&quot;middle.html&quot; /> <frame src=&quot;right.html&quot; /> </frameset> </html> frames.html ,[object Object]
Inline Frames:  <iframe> ,[object Object],<iframe name=&quot;iframeGoogle&quot; width=&quot;600&quot; height=&quot;400&quot; src=&quot;http://www.google.com&quot; frameborder=&quot;yes&quot; scrolling=&quot;yes&quot;></iframe> iframe-demo.html
HTML – Tables and Forms ,[object Object],http://academy.telerik.com
Exercises ,[object Object],[object Object]
Exercises (2) ,[object Object],See the image  Sample-form.png

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Html forms
Html formsHtml forms
Html forms
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
CSS
CSSCSS
CSS
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 

Destaque

Web engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and AccuracyWeb engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and AccuracyNosheen Qamar
 
Web Engineering - Web Application Testing
Web Engineering - Web Application TestingWeb Engineering - Web Application Testing
Web Engineering - Web Application TestingNosheen Qamar
 
IWMW 1999: SMIL and the world smiles with you
IWMW 1999: SMIL and the world smiles with youIWMW 1999: SMIL and the world smiles with you
IWMW 1999: SMIL and the world smiles with youIWMW
 
SMIL it should all be open and on the Internet
SMIL it should all be open and on the InternetSMIL it should all be open and on the Internet
SMIL it should all be open and on the Internetsignagelive
 
Web engineering - An overview about HTML
Web engineering -  An overview about HTMLWeb engineering -  An overview about HTML
Web engineering - An overview about HTMLNosheen Qamar
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSSNosheen Qamar
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASICUKM PROGRESS
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML FormNosheen Qamar
 
Need for Web Engineering
Need for Web EngineeringNeed for Web Engineering
Need for Web EngineeringNosheen Qamar
 
Open Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudOpen Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudTim O'Reilly
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginnersMunir Hoque
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tagsHyejin Oh
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tagsHyejin Oh
 
Web Engineering - Basic CSS Properties
Web Engineering - Basic CSS PropertiesWeb Engineering - Basic CSS Properties
Web Engineering - Basic CSS PropertiesNosheen Qamar
 

Destaque (20)

HTML Forms
HTML FormsHTML Forms
HTML Forms
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Html forms
Html formsHtml forms
Html forms
 
Web engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and AccuracyWeb engineering - Measuring Effort Prediction Power and Accuracy
Web engineering - Measuring Effort Prediction Power and Accuracy
 
Web Engineering - Web Application Testing
Web Engineering - Web Application TestingWeb Engineering - Web Application Testing
Web Engineering - Web Application Testing
 
IWMW 1999: SMIL and the world smiles with you
IWMW 1999: SMIL and the world smiles with youIWMW 1999: SMIL and the world smiles with you
IWMW 1999: SMIL and the world smiles with you
 
SMIL it should all be open and on the Internet
SMIL it should all be open and on the InternetSMIL it should all be open and on the Internet
SMIL it should all be open and on the Internet
 
Podcasting & SMIL
Podcasting & SMILPodcasting & SMIL
Podcasting & SMIL
 
Web engineering - An overview about HTML
Web engineering -  An overview about HTMLWeb engineering -  An overview about HTML
Web engineering - An overview about HTML
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
 
PROGRESS - CSS BASIC
PROGRESS - CSS BASICPROGRESS - CSS BASIC
PROGRESS - CSS BASIC
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
 
Need for Web Engineering
Need for Web EngineeringNeed for Web Engineering
Need for Web Engineering
 
Open Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudOpen Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the Cloud
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
 
[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags[Basic HTML/CSS] 3. html - table tags
[Basic HTML/CSS] 3. html - table tags
 
Web Engineering - Basic CSS Properties
Web Engineering - Basic CSS PropertiesWeb Engineering - Basic CSS Properties
Web Engineering - Basic CSS Properties
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
CSS Tutorial
CSS TutorialCSS Tutorial
CSS Tutorial
 

Semelhante a Tables and Forms in HTML

We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0wangjiaz
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style SheetsJerome Locson
 
1 06-more html-elements
1 06-more html-elements1 06-more html-elements
1 06-more html-elementsapnwebdev
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elementsapnwebdev
 
Tables overview 2010
Tables overview 2010Tables overview 2010
Tables overview 2010Mark Carter
 
Working with html tables
Working with html tablesWorking with html tables
Working with html tablesAndz Bass
 
Working with tables
Working with tablesWorking with tables
Working with tablesAndz Bass
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tablesBulldogs83
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarkstcooper66
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPyucefmerhi
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7phuphax
 
XML Training Presentation
XML Training PresentationXML Training Presentation
XML Training PresentationSarah Corney
 
3 xml namespaces and xml schema
3   xml namespaces and xml schema3   xml namespaces and xml schema
3 xml namespaces and xml schemagauravashq
 

Semelhante a Tables and Forms in HTML (20)

Html Ppt
Html PptHtml Ppt
Html Ppt
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Tables
TablesTables
Tables
 
1 06-more html-elements
1 06-more html-elements1 06-more html-elements
1 06-more html-elements
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elements
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Tables overview 2010
Tables overview 2010Tables overview 2010
Tables overview 2010
 
AK html
AK  htmlAK  html
AK html
 
Cheat codes
Cheat codesCheat codes
Cheat codes
 
Working with html tables
Working with html tablesWorking with html tables
Working with html tables
 
Working with tables
Working with tablesWorking with tables
Working with tables
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarks
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITP
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
XML Training Presentation
XML Training PresentationXML Training Presentation
XML Training Presentation
 
3 xml namespaces and xml schema
3   xml namespaces and xml schema3   xml namespaces and xml schema
3 xml namespaces and xml schema
 
Lect_html1
Lect_html1Lect_html1
Lect_html1
 
Html intro
Html introHtml intro
Html intro
 

Mais de Doncho Minkov

Mais de Doncho Minkov (20)

Web Design Concepts
Web Design ConceptsWeb Design Concepts
Web Design Concepts
 
Web design Tools
Web design ToolsWeb design Tools
Web design Tools
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS Presentation
CSS PresentationCSS Presentation
CSS Presentation
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
CSS 3
CSS 3CSS 3
CSS 3
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Slice and Dice
Slice and DiceSlice and Dice
Slice and Dice
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
 
WPF Concepts
WPF ConceptsWPF Concepts
WPF Concepts
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
 
WPF and Databases
WPF and DatabasesWPF and Databases
WPF and Databases
 

Último

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 

Último (20)

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 

Tables and Forms in HTML

  • 1. HTML – Tables and Forms Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
  • 2.
  • 3.
  • 5.
  • 6. Simple HTML Tables – Example <table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot;> <tr> <td><img src=&quot;ppt.gif&quot;></td> <td><a href=&quot;lecture1.ppt&quot;>Lecture 1</a></td> </tr> <tr> <td><img src=&quot;ppt.gif&quot;></td> <td><a href=&quot;lecture2.ppt&quot;>Lecture 2</a></td> </tr> <tr> <td><img src=&quot;zip.gif&quot;></td> <td><a href=&quot;lecture2-demos.zip&quot;> Lecture 2 - Demos</a></td> </tr> </table>
  • 7. Simple HTML Tables Live Demo
  • 8.
  • 9. Complete HTML Table: Example <table> <colgroup> <col style=&quot;width:100px&quot; /><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
  • 10. Complete HTML Table: Example (2) <table> <colgroup> <col style=&quot;width:200px&quot; /><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> table-full.html Although the footer is before the data in the code, it is displayed last By default, header text is bold and centered.
  • 11.
  • 13.
  • 14. Cell Spacing and Padding – Example <html> <head><title>Table Cells</title></head> <body> <table cellspacing=&quot;15&quot; cellpadding=&quot;0&quot; > <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing=&quot;0&quot; cellpadding=&quot;10&quot;> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table- cells .html
  • 15. Cell Spacing and Padding – Example (2) <html> <head><title>Table Cells</title></head> <body> <table cellspacing=&quot;15&quot; cellpadding=&quot;0&quot; > <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing=&quot;0&quot; cellpadding=&quot;10&quot;> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> table- cells .html
  • 16. Table Cell Spacing and Cell Padding Live Demo
  • 17.
  • 18. Column and Row Span – Example <table cellspacing=&quot;0&quot;> <tr class=&quot;1&quot;><td>Cell[1,1]</td> <td colspan=&quot;2&quot; >Cell[2,1]</td></tr> <tr class=“2&quot;><td>Cell[1,2]</td> <td rowspan=&quot;2&quot; >Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class=“3&quot;><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> table-colspan-rowspan.html
  • 19. Column and Row Span – Example (2) <table cellspacing=&quot;0&quot;> <tr class=&quot;1&quot;><td>Cell[1,1]</td> <td colspan=&quot;2&quot; >Cell[2,1]</td></tr> <tr class=“2&quot;><td>Cell[1,2]</td> <td rowspan=&quot;2&quot; >Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class=“3&quot;><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> 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]
  • 20. HTML Forms Entering User Data from a Web Page
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30. HTML Forms – Example <form method=&quot;post&quot; action=&quot;apply-now.php&quot;> <input name=&quot;subject&quot; type=&quot;hidden&quot; value=&quot;Class&quot; /> <fieldset><legend>Academic information</legend> <label for=&quot;degree&quot;>Degree</label> <select name=&quot;degree&quot; id=&quot;degree&quot;> <option value=&quot;BA&quot;>Bachelor of Art</option> <option value=&quot;BS&quot;>Bachelor of Science</option> <option value=&quot;MBA&quot; selected=&quot;selected&quot;>Master of Business Administration</option> </select> <br /> <label for=&quot;studentid&quot;>Student ID</label> <input type=&quot;password&quot; name=&quot;studentid&quot; /> </fieldset> <fieldset><legend>Personal Details</legend> <label for=&quot;fname&quot;>First Name</label> <input type=&quot;text&quot; name=&quot;fname&quot; id=&quot;fname&quot; /> <br /> <label for=&quot;lname&quot;>Last Name</label> <input type=&quot;text&quot; name=&quot;lname&quot; id=&quot;lname&quot; /> form.html
  • 31. HTML Forms – Example (2) <br /> Gender: <input name=&quot;gender&quot; type=&quot;radio&quot; id=&quot;gm&quot; value=&quot;m&quot; /> <label for=&quot;gm&quot;>Male</label> <input name=&quot;gender&quot; type=&quot;radio&quot; id=&quot;gf&quot; value=&quot;f&quot; /> <label for=&quot;gf&quot;>Female</label> <br /> <label for=&quot;email&quot;>Email</label> <input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; /> </fieldset> <p> <textarea name=&quot;terms&quot; cols=&quot;30&quot; rows=&quot;4&quot; readonly=&quot;readonly&quot;>TERMS AND CONDITIONS...</textarea> </p> <p> <input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Send Form&quot; /> <input type=&quot;reset&quot; value=&quot;Clear Form&quot; /> </p> </form> form.html (continued)
  • 32. HTML Forms – Example (3) form.html (continued)
  • 33.
  • 34. HTML Frames <frameset> , <frame> and <iframe>
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.

Notas do Editor

  1. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  2. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  3. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  4. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  5. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  6. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  7. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  8. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  9. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  10. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  11. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  12. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  13. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  14. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  15. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  16. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  17. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  18. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  19. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  20. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  21. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##