Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 0 views

    3. Web Design

    Uploaded by

    Hayat Hyt

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    3. Web Design

    Uploaded by

    Hayat Hyt
    0 views25 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    0 views25 pages

    3. Web Design

    Uploaded by

    Hayat Hyt

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 25

    KHANA-E NOOR

    UNIVERSITY
    COMPUTER SCIENCE
    FACULTY

    Web Design
    Chapter 3 Fall 2020
    Sayed Ali Aqa
    “Mousavi”
    Outline

    1. HTML Tables
    2. HTML Table Attributes
    3. HTML Table Styles
    Defining HTML Tables
    Example explained:
    • Tables are defined with the <table> tag.
    • Tables are divided into table rows with the <tr> tag.
    • Table rows are divided into table data with the <td>
    tag.
    • A table row can also be divided into table headings
    with the <th> tag.
    Note!
    An HTML Table with a Border Attribute

    • If you do not specify a border for the table, it will be


    displayed without borders.
    • A border can be added using the border attribute:
    An HTML Table with a Border Attribute
    CSS border property
    • To add borders, use the CSS border property:
    Table with Collapsed
    Borders
    • If you want the borders to collapse into one border,
    add CSS border-collapse:
    HTML Table Headings
    • Table headings are defined with
    the <th> tag.
    • By default, all major browsers
    display table headings as bold
    and centered:
    Tip!

    • To left-align the table headings, use the CSS text-


    align property:
    Table Cells that Span Many Columns

    • Table Cells that Span Many Columns


    • To make a cell span more than one column, use
    the colspan attribute:
    Table Cells that Span Many Columns
    Table Cells that Span Many Rows

    • To make a cell span more than one row, use


    the rowspan attribute:
    Table Cells that Span Many Rows
    An HTML Table With a
    Caption
    • To add a caption to a table, use the <caption> tag:
    Tip!
    Summary

    • Use the HTML <table> element to define a table


    • Use the HTML <tr> element to define a table row
    • Use the HTML <td> element to define a table data
    • Use the HTML <th> element to define a table
    heading
    • Use the HTML <caption> element to define a table
    caption
    • Use the CSS border property to define a border
    Summary
    • Use the CSS border-collapse property to collapse cell
    borders
    • Use the CSS padding property to add padding to cells
    • Use the CSS text-align property to align cell text
    • Use the CSS border-spacing property to set the spacing
    between cells
    • Use the colspan attribute to make a cell span many
    columns
    • Use the rowspan attribute to make a cell span many rows
    • Use the id attribute to uniquely define one table
    Exercise 1
    Exercise 2
    Exercise 3
    Exercise 4
    Any Questions

    You might also like