Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Tables and Forms

    Uploaded by

    Ankit Kumar
    12 views33 pages
    The document discusses HTML tables and forms, explaining how to create tables with rows, cells, headers and footers, and how to style cells with widths, borders, padding and spacing. It also covers creating HTML forms, including different form fields like text boxes, text areas, select menus, checkboxes and buttons, as well as how to specify a form's action and method.

    Original Description:

    Original Title

    Htmltablesforms

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses HTML tables and forms, explaining how to create tables with rows, cells, headers and footers, and how to style cells with widths, borders, padding and spacing. It also covers creating HTML forms, including different form fields like text boxes, text areas, select menus, checkboxes and buttons, as well as how to specify a form's action and method.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views33 pages

    HTML - Tables and Forms

    Uploaded by

    Ankit Kumar
    The document discusses HTML tables and forms, explaining how to create tables with rows, cells, headers and footers, and how to style cells with widths, borders, padding and spacing. It also covers creating HTML forms, including different form fields like text boxes, text areas, select menus, checkboxes and buttons, as well as how to specify a form's action and method.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 33

    HTML – Tables and

    Forms
    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
    ⬥ Start and end of a table
    (2)
    <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>Cel l
    A
    2 </ t d > </3</td><td>Cell
    <tr><td>Cell t r > 4</td></tr>
    tl h o u g h t h e footer is
    </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
    ⬥ Tables and cells can have width 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>
    22
    </html>
    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"
    lor="yellow"
    border="1">
    <td>Cell[1,1]</td>
    <tr bgco> Cell[1,1] l[2,1]</td></tr>
    Cell[2,1]
    <td colspan="2">Ce ><td>Cell[1,2]</td>
    l
    <tr bgcowspan="2">Ce l[2,2]</td>
    <td rol Cell[1,2] /tr>
    lor="#FFCC66 Cell[3,2]
    <td>Cell[3,2]</td>
    " ><td>Cell[1,
    Cell[2,2] ]
    <tr bgco<
    ll[2,3]</td> /3 tr> </td>
    <td>Ce< Cell[1,3]
    lor="#CCCCFF Cell[2,3]
    </table>"
    </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 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
    </html>
    src="right.html" />
    frames.html
    </frameset> 32
    HTML – Tables and Forms

    Questions?

    You might also like