Scribd Logo
Upload

Welcome to Scribd!

  • KMPPT HTML - Table Tag

    Uploaded by

    Sourav Nayak
    12 views16 pages
    HTML CSS table tag

    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
    HTML CSS table tag

    Copyright:

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

    KMPPT HTML - Table Tag

    Uploaded by

    Sourav Nayak
    HTML CSS table tag

    Copyright:

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

    WEB DESIGNING WITH HTML

    Session : Table design


    <Table> allows to maintain the structure of the website even if resize in the
    browser. It is allows recommended to put all text, photo, animation etc in
    different cells of the table so that they don’t overlap. You can hide the table
    border to hide the separation view.

    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD>row5col2</TD></TR>
    </TABLE>
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    row2col1 row2col2
    row3col1 merged
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    row2col1 row2col2
    row3col1 merged
    height
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    width=80% row2col1 row2col2
    Table width is 80% of row3col1 merged
    page width
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    cellspacing=2 2 2
    Inner cell distance row2col1 row2col2
    2 2
    row3col1 merged
    cellspacing=5 5 5 row4col1 row4col2
    Inner cell distance merged row5col2
    5 5
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    cellpadding=2 2 2
    Inner text distance row2col1 row2col2
    2 2
    From its border row3col1 merged
    cellpadding=5 5 5 row4col1 row4col2
    Inner text distance merged row5col2
    From its border 5 5
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    background
    Either background=filename row2col1 row2col2
    Or bgcolor=colourname row3col1 merged
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    border=3 row2col1 row2col2
    Border width = 3px, set 0 for noborder
    row3col1 merged
    Bordercolor=red row4col1 row4col2
    Border Colour merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    row2col1 row2col2
    Table Row
    <TR>--------</TR> row3col1 merged
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    row2col1 row2col2
    Table Column Headings
    <TH>--------</TH> row3col1 merged
    Appears in Bold row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    row2col1 row2col2
    Table Columns
    <TD>--------</TD> row3col1 merged
    Contains Table Data row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    Column Span
    Merge no of columns into a single column row2col1 row2col2
    colspan=2 row3col1 merged
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD rowspan=2>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    ROW Span
    Merge no of rows into a single Row row2col1 row2col2
    rowspan=2 row3col1 merged
    row4col1 row4col2
    merged row5col2
    <Table> description:

    <TABLE height=400 width=80% cellspacing=2 cellpadding=2


    background=“km.jpg” border=3 bordercolor=”red”>
    <TR><TH>Heading1</TH><TH>Heading2</TH></TR>
    <TR><TD>row2col1</TD><TD>row2col2</TD></TR>
    <TR><TD colspan=2>row3col1 merged</TD></TR>
    <TR><TD row>row4col1 merged</TD>
    <TD>row4col2</TD></TR>
    <TR><TD bgcolor=green>row5col2</TD></TR>
    </TABLE>
    Heading1 Heading2
    CELL Background
    To change background of individual cell row2col1 row2col2
    TD bgcolor=green row3col1 merged
    row4col1 row4col2
    merged row5col2
    Assignment

    1) College Time Table (Set different background colours for


    different teachers)

    2) your course syllabus

    3)Your home plan (approx.)

    balcony balcony
    bedroom
    bathroom
    bedroom
    bathroom
    Living room
    kitchen entrance

    Try & info KMSir

    You might also like