Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tables Guide

    Uploaded by

    Eisha ter raazia mir
    44 views9 pages
    This document provides instructions on how to create and style HTML tables. It covers the basic table structure using <table>, <tr>, <th>, and <td> tags. It then gives examples of how to add borders, colors, padding, spacing, captions, and attributes like colspan, rowspan, align, and valign. The document concludes with tasks to create tables with these various formatting options and an iframe example.

    Original Description:

    Original Title

    Lab 6

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions on how to create and style HTML tables. It covers the basic table structure using <table>, <tr>, <th>, and <td> tags. It then gives examples of how to add borders, colors, padding, spacing, captions, and attributes like colspan, rowspan, align, and valign. The document concludes with tasks to create tables with these various formatting options and an iframe example.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    44 views9 pages

    HTML Tables Guide

    Uploaded by

    Eisha ter raazia mir
    This document provides instructions on how to create and style HTML tables. It covers the basic table structure using <table>, <tr>, <th>, and <td> tags. It then gives examples of how to add borders, colors, padding, spacing, captions, and attributes like colspan, rowspan, align, and valign. The document concludes with tasks to create tables with these various formatting options and an iframe example.

    Copyright:

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

    Lab 6

    HTML Tables
    Objectives:

    • Creating HTML Tables


    • Learn the different attributes of tables such as: caption, colspan, rowspan and
    others.
    • Create Frames and use it in your HTML page.

    Defining an HTML Table

    An HTML table is defined with the <table> tag. 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.

    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>

    <tr>
    <td>Asma</td>
    <td>Mohammad</td>
    <td>33</td>
    </tr>

    <tr>
    <td>Ahmad</td>
    <td>Naji</td>
    <td>46</td>
    </tr>
    </table>
     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.

    Tasks:

    1. Double Border Table, Coloring and width

    <html>

    <head>

    <style> table, th, td { border: solid; border-width: 3px;

    border-color : red;}

    th { color : green;}

    td { color : blue;}

    </style>

    </head>

    <body>

    ……… write the code of your table here.

    </body>

    </html>

    2. Single Border Table


    Ex. <head>

    <style> table, th, td {

    border: solid ;

    border-collapse: collapse;
    //single line border border-
    width: 3px; border-color :
    red;} th { color : green;} td { color : blue;}
    </style> </head>
    3. Table Cell Padding and cell spacing

    Cell padding specifies the space between the cell content and its
    borders. The cellspacing attribute specifies the space, in pixels,
    between cells.

    <table cellpadding="40" cellspacing=”30”>

    ……

    </table>

    Or try this

    <table border="3" bordercolor="red" bgcolor="green" cellspacing="5"


    cellpadding="3">

    4. Table caption and cell coloring using bgcolor


    • The <caption> tag defines a table caption. The <caption> tag must be inserted
    immediately after the <table> tag. Note: You can specify only one caption per
    table.

    • bgcolor attribute allow you to give a color to the cell or to the row.

     <tr bgcolor=”blue”>
     <th bgcolor=”red” >

    <table>
    <caption>Student Marks</caption>

    <tr>
    <th bgcolor=”red” >Name</th>
    <th bgcolor=”red” >Mark</th>
    </tr>
    <tr>
    <td>Ali</td>
    <td>30</td>
    </tr>
    </table>

    5. align Attribute

    The align attribute specifies the horizontal alignment of the content in a cell.

    <table >

    <tr>

    <th>Month</th>

    <th>Savings</th>

    </tr>

    <tr>

    <td>January</td>

    <td align="left">$100</td>

    </tr>

    <tr>

    <td>February</td>

    <td align="center">$80</td>

    </tr> </table>

    6. valign Attribute

    The valign attribute specifies the vertical alignment of the content in a


    cell.

    Try this
    <table>
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td valign="bottom">January</td>
    <td valign="bottom">$100</td>
    </tr>
    </table>
    7. rowspan and colspan Attributes

    To combine /merge adjacent cells to create larger cell for data.

     rowspan: This attribute specifies the number of rows a cell should merged.
     colspan: This attribute specifies the number of columns a cell should merged.

    Example1: rowspan attribute

    <table>

    <tr>

    <th>Month</th>

    <th>Savings</th>

    <th>Savings for holiday!</th>

    </tr>

    <tr>

    <td>January</td>

    <td>$100</td>

    <td rowspan="2">$50</td>

    </tr>

    <tr>

    <td>February</td>
    <td>$80</td>

    </tr>

    </table>

    Example2: colspan attribute

    <table>

    <tr>
    <td colspan="2">Sum: $180</td>

    </tr>

    </table>
    Write code for each:

    1. A table that has a cell with an image and text in its content.

    2. A table that has a cell with a link in its content.

    3. A table that has a cell with a table in its content.


    4.

    Defining an HTML iframe element

    The <iframe> tag specifies an inline frame. An inline frame is used to embed
    another document within the current HTML document.

    1. iframe Attributes

    Attribute Value Description


    src url Specifies the address of the document to embed
    height pixels Specifies the height of an <iframe>
    width pixels Specifies the width of an <iframe>
    scrolling yes Specifies whether or not to display scrollbars
    no
    auto
    name text Specifies the name of an <iframe>

    Task. Create 3 html files : mm.html , bb.html and cc.html , write the next code in each
    one:

    1. mm.html

    <p> Hello</p> <br/>

    <img src: ".........."/> <br/>

    <iframe src=”bb.html” width=”60” height=”70” name=”myfr”></iframe>

    &nbsp; &nbsp;

    <a href=”cc.html” target=”myfr”>Change</a>

    2. bb.html
    <p>Welcome</p>
    <img src=……/>

    3. cc.html
    <h1> Hello with iframes</h1>

    Hometask:

    Q1. Observe the output of the following piece of code:


    <html>

    <body>

    <table border="3" bordercolor="blue" bgcolor="orange" cellspacing="5"


    cellpadding="3">
    <tr>

    <td align="center" colspan="3" bgcolor="yellow" >MY DAILY MENU</td>

    </tr>

    <tr>

    <td rowspan="3">M<br>o<br>n<br>d<br>a<br>y</td>

    <td valign="top"><b>Breakfast</b></td>

    <td>Orange juice<br>Toast<br>Black coffee</td>

    </tr>

    <tr>

    <td valign="top"><b>Lunch</b></td>

    <td>Tuna sandwich<br>Apple</td>

    </tr>

    <tr>

    <td valign="top"><b>Dinner</b></td>

    <td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td>

    </tr>

    </table>

    </body>

    </html>

    Q2.Write the required code to create the following output:

    Table 1.
    Table2.

    You might also like