Scribd Logo
Upload

Welcome to Scribd!

  • Class Xi Web Application HTML Table

    Uploaded by

    skrsingh15546
    45 views15 pages

    Original Title

    CLASS XI WEB APPLICATION HTML TABLE

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    45 views15 pages

    Class Xi Web Application HTML Table

    Uploaded by

    skrsingh15546

    Copyright:

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

    DAV MODEL SCHOOL, DURGAPUR

    J.M. SENGUPTA ROAD, B-ZONE, DURGAPUR,


    PASCHIM BARDHAMAN, WEST BENGAL - 713205

    WEB APPLICATIONS
    HTML TAGS WITH EXAMPLE

    DAV MODEL SCHOOL, DURGAPUR


    CLASS XI(HUM)

    HTML(Hypertext Mark-up
    Language)

    DAV MODEL SCHOOL, DURGAPUR


    Online Classes

    ❑TODAY’S TOPIC
    ❑PRACTICAL DEMONSTRATION
    ❑HANDS ON
    ❑ ASSIGNMENT OR HOME WORK

    DAV MODEL SCHOOL, DURGAPUR


    HTML Table
    HTML tables allow web developers to display data into rows and
    columns.
    Qualification Year of Passing Percentage
    M.Sc 2010 79
    B.Sc 2008 82

    To define an HTML Table we use <table> tag.

    <tr> is used to define table row.


    <th> is used to define table heading.
    <td> tag is used to define table data.

    By default, the text in <th> elements are bold and centered.

    By default, the text in <td> elements are regular and left-aligned.

    DAV MODEL SCHOOL, DURGAPUR


    HTML Table- <table> tag with <tr>,<th> & <td>

    DAV MODEL SCHOOL, DURGAPUR


    Add Border to the Table
    HTML Table - Add a Border
    To add a border to a table, we use the CSS border property:

    Example

    <table border=4>

    Table Heading

    ✓ Table heading can be defined using <th> tag.

    ✓ Normally the top row will be table heading, and we use <th> element
    in any row.

    ✓ Headings, which are defined in <th> tag are centered and bold by
    default.

    DAV MODEL SCHOOL, DURGAPUR


    HTML <th> tag- To define Table Heading

    DAV MODEL SCHOOL, DURGAPUR


    Table- cellpadding & cellspacing
    Cellpadding and Cellspacing are used to adjust the white space
    in your table cells.
    cellspacing attribute defines space(gape) between table cells,

    cellpadding represents the distance between cell borders and the content
    within a cell.

    <br> element) have no


    contents called empty elements
    DAV MODEL SCHOOL, DURGAPUR
    Table Cellpadding & Cellspacing

    DAV MODEL SCHOOL, DURGAPUR


    Table colspan and rowspan
    colspan attribute are used to merge two or more columns into a
    single column.
    rowspan are used to merge two or more rows.

    DAV MODEL SCHOOL, DURGAPUR


    Table Backgrounds

    Table Backgrounds can be set using one of the following ways −

    bgcolor attribute − Used to set background color for whole table or just
    for one cell.

    background attribute − Used to set background image for whole table or


    just for one cell.

    bordercolor attribute- Used to set border color

    DAV MODEL SCHOOL, DURGAPUR


    Table Backgrounds
    bgcolor background bordercolor

    DAV MODEL SCHOOL, DURGAPUR


    HOW TO RUN HTML FILE
    Image can also be used as a background attribute.
    <!DOCTYPE html>
    <html> <head> <title>HTML Table Background</title> </head>
    <body>
    <table border = "1" bordercolor = "red" background = "mewarlogo.png">
    <tr> <th>Name</th>
    <th>Qualification</th>
    <th>yr of passing</th>
    </tr>
    <tr>
    <td rowspan = "2">Sujit Singh</td>
    <td>M.Tech</td><td>2010</td>
    </tr>
    <tr>
    <td>M.C.A</td>
    <td>2004</td>
    </tr>
    <tr>
    <td colspan = "3">Working as a Teacher</td>
    </tr>
    </table> </body></html>
    DAV MODEL SCHOOL, DURGAPUR
    Table Height & Width
    Using height and width we can set a table width and height.
    The value of width or height always be define in terms of pixels or
    in terms of percentage.

    DAV MODEL SCHOOL, DURGAPUR


    TABLE caption
    The table caption tag used to give a title or explanation for the table and
    it display at the top of the table.
    This tag is not used in newer version of HTML/XHTML.

    DAV MODEL SCHOOL, DURGAPUR

    You might also like