Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tables

    Uploaded by

    Murali Mohan Reddy Chinnamallu
    1 views5 pages

    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

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    1 views5 pages

    HTML Tables

    Uploaded by

    Murali Mohan Reddy Chinnamallu

    Copyright:

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

    HTML Tables

     Using HTML tables, we can display the data in the table format.
     Using table element and its attributes, we can create table and show the content in
    the form of table.
     The html tags and attributes to display the content in the form of table are shown
    below:

    We can define table using <table> tag,


    All Tables can be divided into 3 sections:
    1. table Header ---> represented using <thead> tag.
    2. Table Body ---> represented using <tbody> tag.
    3. Table Footer ---> represented using <tfoot> tag.
    We can create multiple rows inside table header, table body and table footer. But it is
    recommended to create only a single row inside table header and table footer. We
    can create any number of rows inside table body.
     We can create table header using <thead> tag, table body using <tbody> tag and
    table footer using <tfoot> tag.
     We can create rows using <tr> tag. tr stands for table row.
     We use <td> or <th> tags to create columns. td stands for table data and th stands
    for table header. Anything between <td> and </td> are the content of the table cell.
     <th> tag is always recommended to create columns for first row only. From second
    row onwards, it is recommended to use <td> tag.
     By default, the text specified in between <th> and </th> tags are displayed bold and
    centered, but we can change that with CSS.
    Note: A table cell can contain all sorts of html elements: text images, lists, links, other
    tables, etc.,

    Ex:
    <table>
    <thead>
    <tr>
    <th> Name </th>
    <th> Age </th>
    <th> Married? </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td> Murali </td>
    <td> 31 </td>
    <td> true </td>
    </tr>
    <tr>
    <td> Kalia </td>
    <td> 22 </td>
    <td> true </td>
    </tr>
    <tr>
    <td> Raju </td>
    <td> 20 </td>
    <td> true </td>
    </tr>
    </tbody>
    </table>

    output:

    If we use <table>, <thead>, <tbody>, <tfoot>, <tr>, <th> and <td>


    to display the content in table form, the browser will display the content in rows and
    column wise without any borders. To provide borders, we have specify some additional
    information. To specify additional information, we use attributes.
    To add border(outer border) to the table, we have to use “frame” attribute. The
    predefined values of frame attribute are: void, above, below, hsides, vsides,
    lhs, rhs, box, border.
    If we want border(frame)(inner border) for rows and columns, we use “rules”
    attribute. The predefined values are: none, groups, rows, cols, all.
    By default, the content of the body is aligned to left. We can make it align to right or
    center using “align” attribute. We can specify align attribute at the table body
    level(<tbody> level) or at the individual row level(<tr> level). If we use align attribute
    at the body level, then all the rows inside it will be affected. If we use align attribute at the
    row level, then that specific only will be affected.
    If we want to align data in vertical position, we use “valign” attribute. In other
    words, The ‘valign’ attribute of the table tag is used to specify the vertical alignment of
    the content within a table cell. The predefined values are: top, center, bottom.
    We can modify height and width of the table using “height” and “width”
    attribute. Examples of height attribute values are: 100px, 50%, auto, etc., Examples of
    width attribute values are: 100px, 50%, auto, etc.,
    frame attribute:

    rules attribute:

    height and width attributes:

    align attribute:
    valign attribute:

    Ex:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <table frame="box" rules="all" height="300" width="300" >
    <thead>
    <tr>
    <th> Brand </th>
    <th> Model </th>
    <th> Price </th>
    </tr>
    </thead>
    <tbody align="center" valign="center" >
    <tr>
    <td> Red Mi </td>
    <td> Note 13 </td>
    <td> 34,999 </td>
    </tr>
    <tr>
    <td> One Plus </td>
    <td> 11R </td>
    <td> 27,999 </td>
    </tr>
    <tr>
    <td> One Plus </td>
    <td> Nord CE4 </td>
    <td> 24,999 </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    You might also like