Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering: (Lecture 4) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam
    14 views12 pages
    This document discusses various aspects of HTML tables including basic table structure using <table>, <tr>, and <td> tags. It also covers table attributes like border, cellpadding, cellspacing; using <th> for table headers; <caption> for titles; colspan and rowspan; <colgroup> for column formatting; <thead>, <tbody>, and <tfoot> sections; and internal and external CSS styling. The document provides examples to illustrate each concept.

    Original Description:

    Original Title

    lecture 4 (1)

    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
    This document discusses various aspects of HTML tables including basic table structure using <table>, <tr>, and <td> tags. It also covers table attributes like border, cellpadding, cellspacing; using <th> for table headers; <caption> for titles; colspan and rowspan; <colgroup> for column formatting; <thead>, <tbody>, and <tfoot> sections; and internal and external CSS styling. The document provides examples to illustrate each concept.

    Copyright:

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

    Web Engineering: (Lecture 4) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam
    This document discusses various aspects of HTML tables including basic table structure using <table>, <tr>, and <td> tags. It also covers table attributes like border, cellpadding, cellspacing; using <th> for table headers; <caption> for titles; colspan and rowspan; <colgroup> for column formatting; <thead>, <tbody>, and <tfoot> sections; and internal and external CSS styling. The document provides examples to illustrate each concept.

    Copyright:

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

    Web Engineering

    (lecture 4)

    By
    Tufail Khattak
    Main Topic:

     Tables
    Table
    A table element consists of three different HTML tags.
    • The <table> tag
    • The <tr> (table rows) tags
    • The <td> (table columns) tags

    Example 1 Example 2
    <html> <html>
    <body> <body>
    <table border="1"> <table border="1">
    <tr> <tr>
    <td>Row 1, Col 1</td> <td>Row 1, Col 1</td>
    </tr> <td>Row 1, Col 2</td>
    </table> </tr>
    </body> </table>
    </html> </body>
    </html>
    Table
    Example 3
    <html>
    <body>
    <table border="1">
    <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
    </tr>
    <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
    </tr>
    </table>
    </body>
    </html>
    Table Attributes
    An HTML Table can have different attributes/properties.
    • align
    sets the alignment or position of the table
    <table align="center">
    • bgcolor
    defines the background color for the table
    <table bgcolor="green">
    • border
    sets a border around the table
    <table border="1">
    • cellspacing
    creates space (in the form of margins) outside of table cells
    <table border="1" cellspacing="10">
    • cellpadding
    creates padding around the contents of table cells
    <table border="1" cellpadding="10">
    • width
    sets the table’s width in pixels or as a percentage
    <table width="90%" border="1">
    Table Headers
    • Header information in a table are defined with the <th> tag.
    • The text in the <th> element will be displayed as bold and
    centered.
    <html>
    <body>
    <table border="1">
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    </body>
    </html>
    Table caption
    • The <caption> tag defines a table caption.
    • The <caption> tag must be inserted immediately after the <table> tag.
    • You can specify only one caption per table.

    <html> <tr>
    <body> <td>February</td>
    <td>$50</td>
    <table border="1"> </tr>
    <caption>Monthly Savings</caption> </table>
    <tr>
    <th>Month</th> </body>
    <th>Savings</th> </html>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    Colspan & Rowspan
    colspan rowspan

    <html> <html>
    <body> <body>

    <table border="1"> <table border="1">


    <tr> <tr>
    <td>Cell 1</td> <td>Cell 1</td>
    <td>Cell 2</td> <td rowspan="2"> Cell 2</td>
    </tr> </tr>
    <tr> <tr>
    <td colspan="2">Cell 3</td> <td>Cell 3</td>
    </tr> </tr>
    </table> </table>

    </body> </body>
    </html> </html>
    Colspan & Rowspan
    • The <colgroup> tag specifies a group of one or more columns in a table for
    formatting.
    • The <colgroup> tag is useful for applying styles to entire columns, instead of
    repeating the styles for each cell, for each row.
    <html>
    <body>
    <table border="1">
    <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow"> <tr>
    <col style="background-color:orange"> <td>Potato</td>
    </colgroup> <td>Vegetable</td>
    <tr> <td>Rs. 50</td>
    <th>Name</th> </tr>
    <th>Category</th> </table>
    <th>Price</th>
    </tr> </body>
    <tr> </html>
    <td>Apple</td>
    <td>Fruit</td>
    <td>Rs. 100</td>
    </tr>
    <thead>, <tfoot>, and a <tbody>
    • The <thead> tag is used to group header content in an HTML table.
    • The <tbody> tag is used to group the body content in an HTML table.
    • The <tfoot> tag is used to group footer content in an HTML table.
    • They are used in conjunction with each other to specify each part of a table
    (header, body, footer). <tfoot>
    <tr>
    <html>
    <td>Sum</td>
    <head>
    <td>$180</td>
    <style type="text/css">
    </tr>
    thead {color:green;}
    </tfoot>
    tbody {color:blue;}
    <tbody>
    tfoot {color:red;}
    <tr>
    </style>
    <td>January</td>
    </head>
    <td>$100</td>
    <body>
    </tr>
    <table border="1">
    <tr>
    <thead>
    <td>February</td>
    <tr>
    <td>$80</td>
    <th>Month</th>
    </tr>
    <th>Savings</th>
    </tbody>
    </tr>
    </table>
    </thead>
    </body>
    </html>
    Internal Style Sheet CSS
    • An internal style sheet should be used when a single document has a unique
    style.
    • You define internal styles in the head section of an HTML page, by using the
    <style> tag,

    <html>
    <head>
    <style>
    h1 {color:#00ff00;}
    p {color:rgb(0,0,255);}
    a {color:red}
    </style>
    </head>

    <body>
    <h1>This is heading 1</h1>
    <p>This is an ordinary paragraph. This text is blue.</p>
    <a href="http://www.google.com">This is a link.</a>
    </body>
    </html>
    External Style Sheet
    • An external style sheet is ideal when the style is applied to many pages.
    • With an external style sheet, you can change the look of an entire Web site by
    changing one file.
    • Each page must link to the style sheet using the <link> tag. The <link> tag goes
    inside the head section:
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <h1>This is heading 1</h1>
    <p>This is an ordinary paragraph. This text is blue.</p>
    <a href="http://www.google.com">This is a link.</a>
    </body>
    </html>
    Code of css page
    Write this code in notepad and save it with a name (style.css) with extension .css

    h1 {color:#00ff00;}
    p {color:rgb(0,0,255);}
    a {color:orange}

    You might also like