Scribd Logo
Upload

Welcome to Scribd!

  • Unit 4 Tables

    Uploaded by

    Hacker
    8 views27 pages
    The document describes various features of HTML tables including: - Defining a table with <table> tags and rows with <tr> tags. Table headers are defined with <th> tags and cells with <td> tags. - Styling table borders, adding padding and spacing between cells. - Setting widths of tables, columns and row heights using CSS styles. - Making cells span multiple columns or rows using the colspan and rowspan attributes. - Adding a caption to a table with the <caption> tag.

    Original Description:

    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
    The document describes various features of HTML tables including: - Defining a table with <table> tags and rows with <tr> tags. Table headers are defined with <th> tags and cells with <td> tags. - Styling table borders, adding padding and spacing between cells. - Setting widths of tables, columns and row heights using CSS styles. - Making cells span multiple columns or rows using the colspan and rowspan attributes. - Adding a caption to a table with the <caption> tag.

    Copyright:

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

    Unit 4 Tables

    Uploaded by

    Hacker
    The document describes various features of HTML tables including: - Defining a table with <table> tags and rows with <tr> tags. Table headers are defined with <th> tags and cells with <td> tags. - Styling table borders, adding padding and spacing between cells. - Setting widths of tables, columns and row heights using CSS styles. - Making cells span multiple columns or rows using the colspan and rowspan attributes. - Adding a caption to a table with the <caption> tag.

    Copyright:

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

    UNIT 4

    WORKING WITH
    TABLES
    WHAT IS A TABLE IN HTML?

     A table is a representation of data arranged in rows and


    columns. Really, it's more like a spreadsheet. In HTML, with
    the help of tables, you can arrange data like images, text,
    links and so on into rows and columns of cells .

     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.
    EXAMPLE

    <!DOCTYPE html>
    <html> <tr>
    <body> <td>Rohit</td>
    <table style="width:100 %"> <td>Kumar</td>
    <tr> <td>30</td>
    <th>Firstname</th> </tr>
    <th>Lastname</th> </table>
    <th>Age</th>
    </tr> </body>
    </html>
    <tr>
    <td>Rahul</td>
    <td>Sharma</td>
    <td>20</td>
    </tr>
    <tr>
    <td>Sahil</td>
    <td>Verma</td>
    <td>22</td>
    </tr>
    HTML TABLE - ADDING A BORDER

    If you do not specify a border for the table, it will be displayed


    without borders.
    A border is set using the CSS border property:

    Example

    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    }
    </style>
    </head>
    HTML TABLE - COLLAPSED BORDERS

    If you want the borders to collapse into one border, add the CSS
    border-collapse property:

    Example

    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    </style>
    </head>
    HTML TABLE – ST YLE TABLE BORDERS

    If you set a background color of each cell, and give the border a
    white color (the same as the document background), you get
    the impression of an invisible border :

    Example:

    table,th,td{
    border:1px solid white;
    border-collapse:collapse;
    }
    th, td{
    background-color:#96D4D4;
    }
    HTML TABLE – ROUND TABLE BORDERS

     With the border-radius property, the borders get rounded


    corners:

     Example:

    table,th,td{
    border:1px solid white;
    border-radius:10px;
    }
    HTML TABLE – DOTTED TABLE BORDERS

     With the border-style property, you can set the appearance of


    the border.

    Example:

    th,td{
    border-style: dotted;
    }
    HTML TABLE SIZES

     HTML tables can have dif ferent sizes for each column, row or
    the entire table.
     Use the style attribute with the width or height properties to
    specify the size of a table, row or column .
    HTML TABLE WIDTH

     To set the width of a table, add the style attribute to


    the <table> element:
    EXAMPLE

    <!DOCTYPE html>
    <html> <tr>
    <body> <td>Rohit</td>
    <table style="width:100 %"> <td>Kumar</td>
    <tr> <td>30</td>
    <th>Firstname</th> </tr>
    <th>Lastname</th> </table>
    <th>Age</th>
    </tr> </body>
    </html>
    <tr>
    <td>Rahul</td>
    <td>Sharma</td>
    <td>20</td>
    </tr>
    <tr>
    <td>Sahil</td>
    <td>Verma</td>
    <td>22</td>
    </tr>
    HTML TABLE COLUMN WIDTH

     To set the size of a specific column, add the style attribute on


    a <th> or <td> element:
    EXAMPLE

    <!DOCTYPE html>
    <tr>
    <html>
    <td>Eve</td>
    <style> <td>Jackson</td>
    table, th, td { <td>94</td>
    border:1px solid black; </tr>
    border-collapse: collapse; <tr>
    } <td>John</td>
    <td>Doe</td>
    </style> <td>80</td>
    <body> </tr>
    </table>
    <h2>Set the first column to 70% of the table
    width</h2>
    </body>
    <table style="width:100%"> </html>
    <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>

    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    HTML TABLE ROW HEIGHT

     To set the height of a specific row, add the style attribute on a


    table row element:
    EXAMPLE

    <!DOCT YPE html>


    <html>
    <style>
    table, th, td { <tr>
    border:1px solid black; <td>Eve</td>
    border-collapse: collapse; <td>Jackson</td>
    } <td>94</td>
    </style> </tr>
    <body> <tr>
    <td>John</td>
    < h 2 > S e t t h e h e i g h t o f t h e s e c o n d r ow <td>Doe</td>
    to 2 0 0 p i x e l s < / h 2 >
    <td>80</td>
    <table style="width:100%">
    </tr>
    <tr> </table>
    <th>Firstname</th>
    <th>Lastname</th> </body>
    <th>Age</th> </html>
    </tr>
    <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    HTML TABLE - ADDING CELL PADDING

    Cell padding specifies the space between the cell content and its borders.
    If you do not specify a padding, the table cells will be displayed without
    padding.
    To set the padding, use the CSS padding property:

    Example:

    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    th, td {
    padding: 15px;
    }
    </style>
    </head>
     To add padding only above the content, use the padding-
    top property.
     And the others sides with the padding-bottom, padding-left,
    and padding-right properties:

    Example:

    th, td {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 40px;
    }
    HTML TABLE - CELL SPACING

     Cell spacing is the space between each cell.


     By default the space is set to 2 pixels.
     To change the space between table cells, use the CSS border-
    spacing property on the table element:

    Example:

    table{
    border-spacing: 30px;
    }
    HTML TABLE - LEFT-ALIGN HEADINGS

    By default, table headings are bold and centered.


    To left -align the table headings, use the CSS text-align property:
    Example:
    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    th, td {
    padding: 5px;
    }
    th {
    text -align: left;
    }
    </style>
    </head>
    HTML TABLE - ADDING BORDER SPACING

    Border spacing specifies the space between the cells.

    To set the border spacing for a table, use the CSS border-spacing property:

    Example:

    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    padding: 5px;
    }
    table {
    border-spacing: 15px;
    }
    </style>
    </head>
    HTML TABLE - CELLS THAT SPAN MANY
    COLUMNS

     To make a cell span more than one column, use the colspan
    attribute:
    EXAMPLE
    < ! D O C T Y P E ht m l >
    < ht m l >
    <head>
    <style>
    ta b l e , t h , td {
    b o rd e r : 1 px s o l i d b l a c k ;
    b o rd e r - co l l a ps e: co l l a ps e ;
    }
    t h , td {
    p a d d i n g : 5 px ;
    t ex t - a l i g n : l ef t ;
    }
    < /s t y l e >
    </head>
    <body>
    < h 2 > C e l l t h a t s p a n s t w o co l u m n s : < /h 2 >
    < ta b l e s t y l e = " w i d t h : 1 00 % " >
    <tr>
    <th>Name</th>
    < t h co l s p a n =" 2 " > D eta i l s < / t h >
    </tr>
    <tr>
    < td > R a h u l < / td >
    < td > K 1 5 0 8 < / td >
    < td > 1 8 < / td >
    </tr>
    </table>
    </body>
    < / ht m l >
    HTML TABLE - CELLS THAT SPAN MANY
    ROWS

    To make a cell span more than one row, use the rowspan attribute:
    EXAMPLE
    <body>
    <!DOCTYPE html> <h2>Cell that spans two rows:</h2>
    <html> <table style="width:100%">
    <head> <tr>
    <style> <th>Name:</th>
    table, th, td { <td>Rahul</td>
    border: 1px solid black; </tr>
    border-collapse: collapse; <tr>
    <th rowspan="2">Details</th>
    }
    <td>K1508</td>
    th, td { </tr>
    padding: 5px; <tr>
    text-align: left; <td>18</td>
    } </tr>
    </style> </table>
    </head>
    </body>
    </html>
    HTML TABLE - ADDING A CAPTION

     To add a caption to a table, use the <caption> tag:


    EXAMPLE

    <!DOCTYPE html> <body>


    <html> <table style="width:100%">
    <caption>Monthly savings</caption>
    <head>
    <tr>
    <style> <th>Month</th>
    table, th, td { <th>Savings</th>
    border: 1px solid black; </tr>
    border-collapse: collapse; <tr>
    } <td>January</td>
    th, td { <td>$100</td>
    padding: 5px; </tr>
    text-align: left; <tr>
    <td>February</td>
    }
    <td>$50</td>
    </style> </tr>
    </head> </table>
    </body>
    </html>
    HOVERABLE TABLE

     Use the :hover selector on tr to highlight table rows on mouse


    over:

    Example:

    tr:hover
    {background-color: #D6ABAB;}

    You might also like