SlideShare a Scribd company logo
HTML – Tables and Forms

Svetlin Nakov
Telerik Corporation
www.telerik.com
Contents
1.   HTML Tables
        Nested Tables
        Cells Width
        Cell Spacing and Padding
        Column and Row Span




                                               2
Contents (2)
2.   HTML Forms
        Form Fields
        Form Controls
            Text field
            Text area
            Select
            Radio button
            Checkbox
            Button
            Image button
                                           3
HTML Tables
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
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
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
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
Simple HTML Tables
      Live Demo
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
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
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
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
Nested Tables
   Live Demo
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
Table Width
  Live Demo
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
Cell Spacing and Padding –
                                     Example
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>
                                                18
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
Table Cell Spacing
 and Cell Padding
     Live Demo
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
Column and Row Span – Example
table-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
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
HTML Forms
Entering 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>
                     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
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
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
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
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
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
HTML Forms – Example
form.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
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 CONDITIONS
By clicking the Send Form button you agree to submit this
form.</textarea>
  </p>
  <p>
    <input type="submit" name="button" value="Send Form" />
  </p>
</form>
                                                              32
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 CONDITIONS
By clicking the Send Form button you agree to submit this
form.</textarea>
  </p>
  <p>
    <input type="submit" name="button" value="Send Form" />
  </p>
</form>
                                                              33
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 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
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
HTML – Tables and Forms




Questions?


              http://academy.telerik.com

More Related Content

What's hot (20)

PPTX
HTML Forms
Ravinder Kamboj
 
PDF
Html table tags
eShikshak
 
PPTX
Java script
Abhishek Kesharwani
 
PPT
cascading style sheet ppt
abhilashagupta
 
PPTX
Html coding
Briana VanBuskirk
 
PDF
Html frames
eShikshak
 
PPTX
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
PPTX
Html form tag
shreyachougule
 
PPT
Css Ppt
Hema Prasanth
 
PPTX
Dynamic HTML (DHTML)
Himanshu Kumar
 
PPTX
Basic HTML
Sayan De
 
PDF
Introduction to html
eShikshak
 
PPT
HTML Tables.ppt
ShararehShojaei1
 
PDF
Intro to HTML and CSS basics
Eliran Eliassy
 
PPTX
Css types internal, external and inline (1)
Webtech Learning
 
PPTX
css.ppt
bhasula
 
PPTX
Html images syntax
JayjZens
 
PPTX
Complete Lecture on Css presentation
Salman Memon
 
PPTX
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
PPTX
Css selectors
Parth Trivedi
 
HTML Forms
Ravinder Kamboj
 
Html table tags
eShikshak
 
Java script
Abhishek Kesharwani
 
cascading style sheet ppt
abhilashagupta
 
Html coding
Briana VanBuskirk
 
Html frames
eShikshak
 
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Html form tag
shreyachougule
 
Css Ppt
Hema Prasanth
 
Dynamic HTML (DHTML)
Himanshu Kumar
 
Basic HTML
Sayan De
 
Introduction to html
eShikshak
 
HTML Tables.ppt
ShararehShojaei1
 
Intro to HTML and CSS basics
Eliran Eliassy
 
Css types internal, external and inline (1)
Webtech Learning
 
css.ppt
bhasula
 
Html images syntax
JayjZens
 
Complete Lecture on Css presentation
Salman Memon
 
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Css selectors
Parth Trivedi
 

Viewers also liked (8)

PDF
Html tables examples
Mukesh Tekwani
 
PPT
Tables frames
Vasya Petrov
 
PDF
HTML practicals
Abhishek Sharma
 
PPTX
Web html table tags
Kainat Ilyas
 
PPTX
HTML Tables
Nisa Soomro
 
PPTX
html5.ppt
Niharika Gupta
 
PPTX
Take Better Care of Library Data and Spreadsheets with Google Visualization A...
Bohyun Kim
 
PDF
Introduction to spreadsheets
Casey Robertson
 
Html tables examples
Mukesh Tekwani
 
Tables frames
Vasya Petrov
 
HTML practicals
Abhishek Sharma
 
Web html table tags
Kainat Ilyas
 
HTML Tables
Nisa Soomro
 
html5.ppt
Niharika Gupta
 
Take Better Care of Library Data and Spreadsheets with Google Visualization A...
Bohyun Kim
 
Introduction to spreadsheets
Casey Robertson
 
Ad

Similar to HTML: Tables and Forms (20)

PPT
HTML 5 Tables and Forms
Doncho Minkov
 
DOC
Handout5 tables
Nadine Guevarra
 
PDF
Web I - 03 - Tables
Randy Connolly
 
PPTX
Tables and their padding in HTML etc.pptx
SALT13
 
PPT
Tables and Forms in HTML
Doncho Minkov
 
PPTX
01 HTML-Tables-1.pptx
AhmedAlmughalis1
 
PDF
HTML Lecture Part 2 of 2
Sharon Wasden
 
PPTX
Html - Tables, Forms and Frames by Telerik Academy
Ognyan Penkov
 
PDF
Unit 2.9 Tables
Intan Jameel
 
PPTX
Html tables
Himanshu Pathak
 
PPTX
Table structure introduction
nobel mujuji
 
PPTX
Html 5-tables-forms-frames (1)
club23
 
PPTX
Web design - Working with tables in HTML
Mustafa Kamel Mohammadi
 
PPTX
Web topic 12 tables in html
CK Yang
 
PPTX
Table and Form HTML&CSS
Yaowaluck Promdee
 
PDF
Web Design & Development - Session 4
Shahrzad Peyman
 
PPTX
Method of creating table using HTML.pptx
mkrv0617
 
PPTX
HTML_TABLES,FORMS,FRAME markup lang.pptx
lekhacce
 
PPTX
HTML Tables and Forms
Hinesh Miyani
 
PPTX
HTML5 &CSS: Chapter 08
Steve Guinan
 
HTML 5 Tables and Forms
Doncho Minkov
 
Handout5 tables
Nadine Guevarra
 
Web I - 03 - Tables
Randy Connolly
 
Tables and their padding in HTML etc.pptx
SALT13
 
Tables and Forms in HTML
Doncho Minkov
 
01 HTML-Tables-1.pptx
AhmedAlmughalis1
 
HTML Lecture Part 2 of 2
Sharon Wasden
 
Html - Tables, Forms and Frames by Telerik Academy
Ognyan Penkov
 
Unit 2.9 Tables
Intan Jameel
 
Html tables
Himanshu Pathak
 
Table structure introduction
nobel mujuji
 
Html 5-tables-forms-frames (1)
club23
 
Web design - Working with tables in HTML
Mustafa Kamel Mohammadi
 
Web topic 12 tables in html
CK Yang
 
Table and Form HTML&CSS
Yaowaluck Promdee
 
Web Design & Development - Session 4
Shahrzad Peyman
 
Method of creating table using HTML.pptx
mkrv0617
 
HTML_TABLES,FORMS,FRAME markup lang.pptx
lekhacce
 
HTML Tables and Forms
Hinesh Miyani
 
HTML5 &CSS: Chapter 08
Steve Guinan
 
Ad

More from BG Java EE Course (20)

PPT
Rich faces
BG Java EE Course
 
PPT
JSP Custom Tags
BG Java EE Course
 
PPT
Java Server Faces (JSF) - advanced
BG Java EE Course
 
PPT
Java Server Faces (JSF) - Basics
BG Java EE Course
 
PPT
Unified Expression Language
BG Java EE Course
 
PPT
Java Server Pages
BG Java EE Course
 
PPT
Web Applications and Deployment
BG Java EE Course
 
PPT
Java Servlets
BG Java EE Course
 
PPTX
HTML Fundamentals
BG Java EE Course
 
PPTX
WWW and HTTP
BG Java EE Course
 
ODP
JavaScript and jQuery Fundamentals
BG Java EE Course
 
ODP
Creating Web Sites with HTML and CSS
BG Java EE Course
 
PPT
Processing XML with Java
BG Java EE Course
 
PPT
Introduction to XML
BG Java EE Course
 
PPT
Data Access with JDBC
BG Java EE Course
 
PPT
Introduction to-sql
BG Java EE Course
 
PPT
Introduction to-RDBMS-systems
BG Java EE Course
 
PPT
Basic data-structures-v.1.1
BG Java EE Course
 
Rich faces
BG Java EE Course
 
JSP Custom Tags
BG Java EE Course
 
Java Server Faces (JSF) - advanced
BG Java EE Course
 
Java Server Faces (JSF) - Basics
BG Java EE Course
 
Unified Expression Language
BG Java EE Course
 
Java Server Pages
BG Java EE Course
 
Web Applications and Deployment
BG Java EE Course
 
Java Servlets
BG Java EE Course
 
HTML Fundamentals
BG Java EE Course
 
WWW and HTTP
BG Java EE Course
 
JavaScript and jQuery Fundamentals
BG Java EE Course
 
Creating Web Sites with HTML and CSS
BG Java EE Course
 
Processing XML with Java
BG Java EE Course
 
Introduction to XML
BG Java EE Course
 
Data Access with JDBC
BG Java EE Course
 
Introduction to-sql
BG Java EE Course
 
Introduction to-RDBMS-systems
BG Java EE Course
 
Basic data-structures-v.1.1
BG Java EE Course
 

Recently uploaded (20)

PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
PPTX
STAFF DEVELOPMENT AND WELFARE: MANAGEMENT
PRADEEP ABOTHU
 
PPTX
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
PDF
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
PDF
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
PPTX
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
PPTX
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
PPTX
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
PPTX
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
PDF
The-Ever-Evolving-World-of-Science (1).pdf/7TH CLASS CURIOSITY /1ST CHAPTER/B...
Sandeep Swamy
 
PDF
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
PPTX
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
PPTX
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
PDF
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
PDF
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
PDF
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
PDF
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
PDF
community health nursing question paper 2.pdf
Prince kumar
 
PDF
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
STAFF DEVELOPMENT AND WELFARE: MANAGEMENT
PRADEEP ABOTHU
 
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
The-Ever-Evolving-World-of-Science (1).pdf/7TH CLASS CURIOSITY /1ST CHAPTER/B...
Sandeep Swamy
 
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
community health nursing question paper 2.pdf
Prince kumar
 
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 

HTML: Tables and Forms

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