Scribd Logo
Upload

Welcome to Scribd!

  • (Lesson 2) HTML Tables

    Uploaded by

    Hassan Elbayya
    6 views18 pages

    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

    Copyright:

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

    (Lesson 2) HTML Tables

    Uploaded by

    Hassan Elbayya

    Copyright:

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

    Fundamentals of HTML:

    Creating Tables

    Dr. Ali Allam Introduction to Programming (BIS227E)


    Basic HTML Tags

    1. Headings
    2. Paragraphs
    3. Text formatting elements
    4. Empty tags
    5. Lists (unordered and ordered)
    6. Images
    7. Hyperlinks (Anchors)
    8. Tables
    9. Forms
    8. Tables
    <table>
    HTML Tables

     An HTML table is defined with the <table> tag.


     Typically, a table’s layout is created row-by-row.
     Each table row is defined with the <tr> tag. A table header is
    defined with the <th> tag. By default, table headings are bold and
    centered. A table data/cell is defined with the <td> tag.
     Note: The <td> elements are the data containers of the table.
     They can contain all sorts of HTML elements; text, images, lists, other
    tables, etc.
    <!DOCTYPE html>
    <html>
    <body>
    <table>
    <tr>
    <th>Firstname</th>
    First Row with <th>Lastname</th>
    three header cells <th>Age</th>
    </tr>
    <tr>
    Second Row with <td>Mohamed</td>
    three data cells <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    Third Row with <td>Sarah</td>
    three data cells <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    </html>
    HTML Tables

    Moreover, it is very common and useful to specify the following


    attributes for the <table>:
    1. border: the thickness of the table border in pixels (default: no border).
    2. width and height: specify the size of the table, either as a
    percentage of the webpage size, or as an absolute value in pixels
    (default: size is automatically adjusted according to the cell contents).
    3. cellspacing: represents the space between the cells (default: 1 pixel).
    4. cellpadding: represents the space between the borders and the
    contents (default: 0 pixels).
    HTML Tables

    5. bgcolor: specifies the background color of the table (default: no


    color / transparent).
    6. background: specifies a background image for the table (default: no
    background image).
    Let’s have a look on all of these attributes…
    <!DOCTYPE html>
    Adding a border <html> If you do not specify a border for the table,
    of 1-pixel <body> it will be displayed without borders
    <table border=“1”>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    </html>
    The width of the <!DOCTYPE html>
    The width and height can be specified as a
    table is 100% of <html>
    percentage (e.g. width=“75%”) or as a
    the webpage width <body>
    <table border=“1” width=“100%”> value in pixels (e.g. width=150)
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    The cellspacing represents the space
    The cellspacing of between cells, specified in pixels. If not
    the table is 0 <body>
    <table border=“1” width=“100%” specified, it defaults to 1
    cellspacing=“0”>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    <!DOCTYPE html>
    The cellpadding of <html> The cellpadding is the space between the
    the table is 5 pixels <body> cell border and the cell contents. If not
    <table border=“1” width=“100%” specified, it defaults to 0
    cellspacing=“0” cellpadding=“5”>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    <!DOCTYPE html>
    <html>
    Unless specified, the table background has
    The background
    no color (i.e. transparent)
    color of the table is <body>
    lightgrey <table border=“1” width="100%"
    cellspacing="0" cellpadding="5"
    bgcolor=“lightgrey">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    </html>
    <!DOCTYPE html>
    The background <html>
    image is aast.png <body>
    <table border=“1” width="100%"
    cellspacing="0" cellpadding="5"
    bgcolor=“lightgrey”
    background=“aast.png”>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>30</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>24</td>
    </tr>
    </table>
    </body>
    HTML Tables

    Also, the following attributes can be added to the table rows <tr>,
    header cells <th>, or the data cells <td>:
     colspan: the number of cell columns that are spanned (i.e. merged).

     rowspan: the number of cell rows that are spanned (i.e. merged).

     align: align the cell contents horizontally, either to the left, center, or

    right (default: left).


     valign: align the cell contents vertically, either to the top, middle, or
    bottom (default: middle).
    Let’s have a look on these attributes…
    <!DOCTYPE html>
    <html>
    <body>
    <table border=“1” width="100%"
    height="200" cellspacing="0">
    <tr>
    <th>Firstname</th>
    This header cell <th>Lastname</th>
    <th colspan="2">Telephones</th>
    spans two column </tr>
    cells of the table <tr>
    <td>Mohamed</td>
    <td>Mostafa</td>
    <td>123456789</td>
    <td>987654321</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>999999999</td>
    <td>111111111</td>
    </tr>
    </table>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <body>
    <table border=“1” width="100%"
    height="200" cellspacing="0">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th colspan="2">Telephones</th>
    </tr>
    <tr>
    <td>Mohamed</td>
    This data cell <td>Mostafa</td>
    spans two row <td rowspan="2">123456789</td>
    cells of the table <td>987654321</td>
    </tr>
    <tr>
    <td>Sarah</td>
    <td>Farid</td>
    <td>111111111</td>
    </tr>
    </table>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <body>
    <table border=“1” width="100%"
    height="200" cellspacing="0">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th colspan="2">Telephones</th>
    </tr>
    <tr align="center">
    <td>Mohamed</td>
    The cell contents <td>Mostafa</td>
    in these rows <td rowspan="2">123456789</td>
    are aligned to <td>987654321</td>
    the center </tr>
    <tr align="center">
    <td>Sarah</td>
    <td>Farid</td>
    <td>111111111</td>
    </tr>
    </table>
    </body>
    </html>
    Exercise: create this table…

    You might also like