Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tables

    Uploaded by

    reena devi
    7 views17 pages

    Original Title

    html tables

    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
    7 views17 pages

    HTML Tables

    Uploaded by

    reena devi

    Copyright:

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

    HTML Elements for Tables

    • An HTML table is a grid of cells built out of rows and


    columns using elements designed for the purpose.
    • You can create up a table using these HTML elements:
    • <table> It’s the starting point for every table (and </table>
    is the end point).
    • <tr> represents a single row in a table. Every table
    element (<table>) contains a series of one or more <tr>
    elements.
    • <td> represents a table cell (“td” stands for “table data”).
    For each cell you want in a row, add one <td> element.
    Put the text you want to appear in the cell inside the <td>
    element. Browsers display it in the same font as ordinary
    body text.
    • <th> is an optional table element designed for column headings.
    • Browsers format the text inside the <th> element in almost the same
    way as text in a <td> element, except that they automatically boldface
    and center the text.
    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>
    Table with borders
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <h2>Table With Border</h2>
    <table style="width:100%">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    ∙
    ∙
    ∙
    </body>
    </html>
    To let the borders collapse into one border, add the
    CSS border-collapse property:

    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    Spanning Cells
    • Tables support spanning, a feature that lets a single cell
    stretch out over several columns or rows.
    • To make a cell span more than one column, use
    the colspan attribute:
    <h2>Cell that spans two columns</h2>
    <table>
    <tr>
    <th>Name</th>
    <th colspan="2“>Telephone</th>
    </tr>

    <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    </tr>
    </table>
    • To make a cell span more than one row, use
    the rowspan attribute:
    <h2>Cell that spans two rows</h2>

    <table>
    <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
    </tr>
    <tr>
    <td>55577855</td>
    </tr>
    </table>
    • To add a caption to a table, use the <caption> tag:

    <h2>Table Caption</h2>

    <table>
    <caption>Monthly savings</caption>
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    <tr>
    <td>February</td>
    <td>$50</td>
    </tr>
    </table>
    <iframe> (Inline Frame)
    • The <iframe> element creates an inline frame—a
    scrollable window that’s embedded in a page and that
    displays another web page inside it.
    • You supply the attributes src (the page you want your
    browser to display in the frame), name (the unique name
    of the frame), and width and height (the dimensions of the
    frame in pixels).
    • You can turn off the automatic border by setting the
    frameborder="0" attribute, and turn off scrolling by adding
    the scrolling="no" attribute. Here’s one use of the
    <iframe> element:

    <iframe src="MyPage.html" width="100" height="250"></iframe>


    • You can include instructions with the <iframe> element that a browser
    will display if it doesn’t support <iframe>:
    • <iframe src="MyPage.html" width="100" height="250"> <p>To see more
    details, check out <a href="MyPage.html">this page</a>.</p> </iframe>

    <h2>HTML Iframes</h2>
    <p>You can use the height and width attributes to specify the size of the
    iframe:</p>

    <iframe src="https://en.wikipedia.org/wiki/IFrame" height="200"


    width="200" title="Iframe Example"></iframe>
    <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="200"
    height="200"

    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017
    949104309083%2C51.47612752641776%2C0.00030577182769775396
    %2C51.478569861898606&layer=mapnik">
    Anchor Element
    • In HTML, you use the anchor element, <a>, to create a link.
    When a visitor clicks the link, their browser opens the
    associated page.
    • The anchor element is a straightforward container element. It
    looks like this:
    • <a>...</a>
    • You put the text a visitor clicks inside the anchor element:
    • <a>Click Me</a>
    • To turn it into a fully functioning link, you need to supply the
    address of the destination page using the href attribute (which
    stands for hypertext reference).
    • For example, if you want a link to take a reader to a page
    named LinkedPage.html, you create this link:
    • <a href="LinkedPage.html">Click Me</a>
    Internal and External Links
    • Links can take you from one page to another within the
    same website, or they can transport you to a completely
    different site on a far-off web server. You use a specific
    type of link in each case:
    • Internal links point to other pages on your site. They can also
    point to other types of resources on your site (like pictures or PDF
    files).
    • External links point to pages (or resources) on other websites.
    • Internal links use something called relative URLs, while
    external links use absolute URLs.
    <img> Element
    • Web page pictures don’t live in HTML files. Instead, you
    store them as separate files, like car.jpg and photo01.jpg.
    • To display a picture in a web page, you use the <img>
    element.
    • <img src="banana.jpg" />
    • When a browser reads the <img> element above, it sends
    out a request for the banana.jpg file.
    • After retrieving it, the browser inserts the picture into the
    page in place of the <img> element.
    • If the image file is large or the Internet connection is very
    slow, you might actually see the web page text appear
    first, before the picture shows up.
    Alternate Text
    • The src attribute is the only detail an <img> element
    needs to function.
    • But there’s one other attribute you should supply—the alt
    attribute, which represents the alternate text a browser
    displays if it can’t display the image itself.
    • <img src="matador.jpg" alt="There's no picture, so all you
    get is this alternate text." />
    • Alternate text proves useful in many cases :
    • A viewing-impaired visitor uses a screen-reading program (a
    program that “speaks” text, including the words in an alt attribute).
    • You may want to provide text for search engines to utilize; for
    example, search engines can match alt text with search queries.
    • A web visitor switches off his browser’s ability to display pictures to
    save page download time.
    • A browser doesn’t support images (the text-only Lynx browser is
    still around on some old Unix systems).
    • The <img> element lets you resize a picture through its
    optional height and width attributes.
    • <img src="photo01.jpg" alt="An explicitly sized picture"
    width="100" height="150" />
    • When you include image size attributes, browsers know
    how large a picture is and can start laying out a page
    even as the graphic downloads. On the other hand, if you
    don’t include the height and width attributes, the browser
    won’t know the dimensions of the picture until it’s fully
    downloaded, at which point it has to rearrange the
    content.
    Image titles
    • You can also add title attributes to images, to provide
    further supporting information if needed. It gives us a
    tooltip on mouse hover.
    <img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
    it has a large head with long sharp teeth"
    width="400"
    height="341"
    title="A T-Rex on display in the Manchester University Museum">

    You might also like