Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Front End Lecture 6

    Uploaded by

    rv504263
    The document discusses how to create tables in HTML. Key points include: using <table>, <tr>, and <td> tags to generate a table with rows and cells; <th> tags for column headings; common table attributes like border, cellspacing, cellpadding; and rowspan and colspan attributes to make cells span multiple rows or columns. The document provides examples and syntax for implementing various table structures and attributes in HTML.

    Copyright:

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

    Front End Lecture 6

    Uploaded by

    rv504263
    8 views22 pages
    The document discusses how to create tables in HTML. Key points include: using <table>, <tr>, and <td> tags to generate a table with rows and cells; <th> tags for column headings; common table attributes like border, cellspacing, cellpadding; and rowspan and colspan attributes to make cells span multiple rows or columns. The document provides examples and syntax for implementing various table structures and attributes in HTML.

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses how to create tables in HTML. Key points include: using <table>, <tr>, and <td> tags to generate a table with rows and cells; <th> tags for column headings; common table attributes like border, cellspacing, cellpadding; and rowspan and colspan attributes to make cells span multiple rows or columns. The document provides examples and syntax for implementing various table structures and attributes in HTML.

    Copyright:

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

    Front End Lecture 6

    Uploaded by

    rv504263
    The document discusses how to create tables in HTML. Key points include: using <table>, <tr>, and <td> tags to generate a table with rows and cells; <th> tags for column headings; common table attributes like border, cellspacing, cellpadding; and rowspan and colspan attributes to make cells span multiple rows or columns. The document provides examples and syntax for implementing various table structures and attributes in HTML.

    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 22

    FRONT END

    (Html)
    LECTURE-6
    Today’s Agenda

    Creating Tables In Html

    Attributes Of Table

    Generating Irregular Tables


    Tables In HTML

     A table is a structured set of data made up of rows and


    columns.

     Tables allows us to quickly and easily look up values that


    indicate some kind of connection between different types of
    data

     For example , the table shown on next slide.


    Tables In HTML
    How To Create Table ?

    To create a table we use <table> tag , which itself has 3


    important child tags as shown below:
    <table>
    Used as Container tag
    <tr>
    Used to generate row
    <td>
    Used to generate column
    <th>
    Used to generate column heading
    General Syntax

    <table >
    <tr>
    <td> some data</td>
    <td>some data</td>
    </tr>
    <tr>
    <td>some data</td>
    <td>some data</td>
    </tr>
    </table>
    Creating Header Cells

     Two types of cells can be defined in an HTML table. One of


    them is the simple cell , created using <td> tag.

     The other one is a special type of cell created using <th>


    element, that contains header information for a set of
    specified cells.

     Browsers render the content of header cells in a special


    way ,as centered bold text
    Various Attribute Of <table> Tag

    The <table> tag has following important attributes:


     border
    Sets the border width in numerical values from 0 and up.

     cellspacing
    Empty space between table data cells.

     cellpadding
    Empty space between the edge of a cell and cell content.
    Various Attribute Of <table> Tag

     align
    Aligns the table to the left, right or center.

     width/height
    The width/height of the table; measured in pixels or percentage.

     bgcolor
    Background color for all cells that do not have a background color or
    image specified.
    Various Attribute Of <table> Tag

     background
    Background image for all cells that do not have a background color or
    image specified.

     bordercolor
    Border color for the table.
    Attributes Of <tr> Tag

    1.bgcolor

    This attribute is like the one set in the table only it will define
    the background color for the row only and not the entire
    table.

    <tr bgcolor=“#00FF00">
    Attributes Of <tr> Tag

    2. align
    The align attribute for the table row is different from the table align
    attribute, this aligns the content in the row with respect to the table. The
    values are: left, right and center. The default. Left
    <tr align=“right">

    3. valign
    This is the vertical alignment attribute. It defines the vertical alignment of
    the content within the row. The values for this attribute are: top, middle,
    bottom. The default setting is middle.
    <tr valign=“bottom">
    Attributes Of <td> Tag

    1. bgcolor
    Just like the bgcolor attribute in the tr tag, this attribute
    works the same. It will define a background color for each
    cell.

    <td bgcolor="#0000FF">
    Attributes Of <td> Tag

    2. align

    This attribute also works the same as in the tr tag, it will align
    the content in within each cell. The values are: left, right, and
    center. The default is Left .

    <td align="center">
    Attributes Of <td> Tag

    3. valign

    This attribute also works the same as in the tr tag, it vertically


    aligns the content within the cell. The values are: top, middle,
    bottom. The default is middle.

    <td valign=“top”>
    Using “colspan” And
    “rowspan” Attributes

     Table cells can span across more than one column or row.

     The attributes colspan ("how many across") and rowspan


    ("how many down") indicate how many columns or rows a
    cell should take up.
    Sample Table
    “colspan” And “rowspan”
    “colspan” Syntax

    <table >
    <tr>
    <td> some data</td>
    <td>some data</td>
    </tr>
    <tr>
    <td colspan=“2”>some data</td>
    </tr>
    </table>
    “rowspan” Syntax

    <table >
    <tr>
    <td rowspan=“2”> some data</td>
    <td>some data</td>
    </tr>
    <tr>
    <td >some data</td>
    </tr>
    </table>
    EXERCISE
    End Of Lecture

    For any queries mail us @: scalive4u@gmail.com


    Call us @ : 0755-4271659, 9826686245

    Agenda for Next Lecture:


    1. Using HTML forms
    2. Working with various form controls

    You might also like