Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Tables HTML

    Încărcat de

    Sourabh Bhandari
    34 vizualizări8 pagini
    This document contains the tutorial on tables in HTML.

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    This document contains the tutorial on tables in HTML.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    34 vizualizări8 pagini

    Tables HTML

    Încărcat de

    Sourabh Bhandari
    This document contains the tutorial on tables in HTML.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 8

    TABLES

    The table is a element that consists of rows and columns. It is useful for displaying data
    in tabular form, however it is used as the foundation of complex of layouts with multiple
    columns, sidebars and many other features. One of the beautiful thing about tables is that
    they can be used to create liquid design that can contract and expand proportionally to
    the visitor's browser. There three set of tags required to build any table i.e <table>
    (table), <tr> (row), <td> (cell). The general syntax for creating table is as :

    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    Let us demonstrate the code to create tables :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    Adding a border to the table


    You can add border to your table. The border of table is influenced by four attributes :
    border, cellpadding, cellspacing, color as :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    The thickness of internal borders between the cells is controlled by cellspacing attribute
    as :

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" cellspacing="10">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    The empty spaces between the cell borders and content inside it is controlled by
    cellpadding attribute as :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" cellspacing="10" cellpadding="10">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    The color of the border of the table can be specified with bordercolor attribute. Let us
    see as :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" cellspacing="10" cellpadding="10" bordercolor="#ff0099">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    Setting the dimensions of the table


    The dimensions ie width and height of <table> , <tr>, <td> can be specified with the
    help of attribute width and height. The width or height can be set to the pixel value ot
    percentage. Let us see the code below :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" width="70%" height="200">
    <tr height="70">
    <td width="30%">1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    Table alignment

    © Copyright Sourabh Bhandari http://sourabhandari.in


    The align attribute of the <table> tag can be used to control the alignment of table.
    Similarly the align attribute of the <td> tag is used to align the content of the cell. The
    value of align attribute can be left, right or center. To align the content of the cell or row
    vertically, define the value of valign attribute equal to top, middle,bottom, baseline. Let
    us see the code below :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" width="70%" height="200" align="right">
    <tr height="70">
    <td width="30%" align="left" valign="bottom">1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>
    </html>

    Cell spanning
    A single cell can span across multiple rows or columns. The number of rows or columns
    a cell spans is specified using the rowspan and colspan attribute. Let us demonstrate it
    :

    <html>
    <head>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <title>Tables</title>
    </head>
    <body>
    <table border="2" width="70%" height="200" align="right">
    <tr height="70">
    <td colspan="3">1</td>
    </tr>

    <tr>
    <td>2</td>
    <td>3</td>
    <td rowspan="2">4</td>
    </tr>

    <tr>
    <td>5</td>
    <td>6</td>
    </tr>

    </table>
    </body>
    </html>

    Table background properties


    The background and bgcolor attribute specifies the background image and background
    color. These attributes are supported by all the table tags viz. <table>, <tr> and <td>. Let
    us demonstrate it :

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body>
    <table border="2" width="70%" height="200" align="right" bgcolor="#FF6688">
    <tr height="70">
    <td>1</td>
    <td bgcolor="#0099FF">2</td>
    </tr>

    <tr>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <td background="rup.jpg">3</td>
    <td>4</td>
    </tr>

    <tr>
    <td>5</td>
    <td>6</td>
    </tr>

    </table>
    </body>
    </html>

    © Copyright Sourabh Bhandari http://sourabhandari.in

    S-ar putea să vă placă și