SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances (20)

Html table tags
Html table tagsHtml table tags
Html table tags
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
Xml ppt
Xml pptXml ppt
Xml ppt
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Html Table
Html TableHtml Table
Html Table
 
CSS
CSSCSS
CSS
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
Html ppt
Html pptHtml ppt
Html ppt
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
2. html attributes
2. html attributes2. html attributes
2. html attributes
 
Html-list
Html-listHtml-list
Html-list
 
CSS
CSSCSS
CSS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
html-table
html-tablehtml-table
html-table
 
Html 5
Html 5Html 5
Html 5
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 

En vedette

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
 

En vedette (20)

HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html forms
Html formsHtml forms
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
 

Similaire à 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
 

Similaire à 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
 

Plus de Doncho Minkov

Plus 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
 

Dernier

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 

Dernier (20)

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 

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.

Notes de l'éditeur

  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.* ##