Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Lecture 2 - HTML Table

    Hochgeladen von

    Maan Caboles
    47 Ansichten16 Seiten
    not mine

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    not mine

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    47 Ansichten16 Seiten

    Lecture 2 - HTML Table

    Hochgeladen von

    Maan Caboles
    not mine

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 16

    HTML Table

    HTML tables allow web


    authors to arrange data
    like text, images, links,
    other tables, etc. into
    rows and columns of cells.
    HTML Tables contd

    An HTML table is defined


    with the <table> tag.

    Each table row is defined


    with the <tr> tag.
    HTML Tables contd
    A table header is defined
    with the <th> tag.

    By default, table
    headings are bold and
    centered.
    HTML Tables contd

    A table data / cell is


    defined with the <td> tag.

    The elements under <td>


    are regular and left aligned
    by default.
    HTML Tables contd
    The <td> elements are the
    data containers of the table.

    They can contain all sorts of


    HTML elements: text,
    images, lists, other tables,
    etc.
    Cellpadding & Cellspacing

    The <td> elements are the


    data containers of the table.

    They can contain all sorts of


    HTML elements: text,
    images, lists, other tables,
    etc.
    Adding Borders
    For example:
    <table border=1>
    <tr>
    <th>Column 1</th><th>Column 2</th>
    </tr>
    <tr>
    <td>Cell 1</td><td>Cell 2</td>
    </tr>
    <tr>
    <td>Cell 3</td><td>Cell 4</td>
    </tr>
    </table>
    For example:
    <table style=border:1px dotted
    black;>
    <tr>
    <th>Column 1</th><th>Column 2</th>
    </tr>
    <tr>
    <td>Cell 1</td><td>Cell 2</td>
    </tr>
    <tr>
    <td>Cell 3</td><td>Cell 4</td>
    </tr>
    </table>
    For example:
    <table style=border:1px solid black;>
    <tr>
    <th>Column 1</th><th>Column 2</th>
    </tr>
    <tr>
    <td>Cell 1</td><td>Cell 2</td>
    </tr>
    <tr>
    <td>Cell 3</td><td>Cell 4</td>
    </tr>
    </table>
    <table style="width:100%">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>15</td>
    </tr>
    <tr>
    <td>Jill</td> Note: The <td> elements are the
    <td>Jackson</td> data containers of the table.
    They can contain all sorts of
    <td>24</td> HTML elements; text, images,
    </tr> lists, other tables, etc.
    </table>
    <tr>
    <!DOCTYPE html> <td>Jill</td>
    <html> <td>Smith</td>
    <head> <td>50</td>
    <style> </tr>
    table, th, td { <tr>
    border: 1px solid black; <td>Eve</td>
    } <td>Jackson</td>
    </style> <td>94</td>
    </head> </tr>
    <body> <tr>
    <td>John</td>
    <table style="width:100%"> <td>Doe</td>
    <tr> <td>80</td>
    <th>Firstname</th> </tr>
    <th>Lastname</th> </table>
    <th>Age</th>
    </tr> </body>
    </html>
    Borders on Table Cells
    You can apply border codes
    against the individual table cells.

    You can also apply a different


    colored border around the table.

    This will help distinguish


    between the table border and the
    cell borders.
    For example:
    <table style=border:1px solid black;>
    <tr>
    <th style=border:1px solid red;>Column 1</th>
    <th style=border:1px solid red;>Column 2</th>
    </tr>
    <tr>
    <td style=border:1px solid red;>Cell 1</td>
    <td style=border: 1px solid red;>Cell 2</td>
    </tr>
    <tr>
    <td style=border:1px solid red;>Cell 3</td>
    <td style=border:1px solid red;>Cell 4</td>
    </tr>
    </table>
    The result will be:
    Border Collapse
    Spaces can be removed between the
    different borders by using the CSS
    border-collapse property.

    When applied this against the table


    element, the table border will simple
    disappear or collapses.

    Spaces in between will also collapse.


    For example:
    <table style=border:1px solid black; border-
    collapse:collapse;>
    <tr>
    <th style=border:1px solid red;>Column 1</th>
    <th style=border:1px solid red;>Column 2</th>
    </tr>
    <tr>
    <td style=border:1px solid red;>Cell 1</td>
    <td style=border: 1px solid red;>Cell 2</td>
    </tr>
    <tr>
    <td style=border:1px solid red;>Cell 3</td>
    <td style=border:1px solid red;>Cell 4</td>
    </tr>
    </table>

    Das könnte Ihnen auch gefallen