Ultra fast cheap  linux and windows hosting
html tutorial HTML Tutorial:

  • Html - Introduction
  • Html - A basic html file
  • Html - Meta tags
  • Html - Text Control
  • Html - Color
  • Html - Lists
  • Html - Links
  • Html - Tables
  • Html - Forms
  • Html - frames
  • Html - Background music
  • HTML tag list
  • HTML Character Entities
  • Browse
    html tutorial
    Home >> Tutorials >> HTML Tutorials

    HTML Tables:

     
    <table> </table> tags <caption> tag <tr> tag <th> & <td> tags Html Table example

    Let us start with the html tags used for creating tables.
    (1)To create a table use <table> and </table> tags.

    (2)To add a title to your table, <caption> and  </caption> tags are used.

    (3)To start a new row use <tr> and </tr> tags.

    (4)To enter information in a cell,  <td>  and </td> tags are used.

    (5)To insert headings in a table, <th> and  </th> tags are used.


    Let us create a very simple table.
    <table>
    <tr>
    <td>my first table</td>
    </tr>
    </table>

    Attributes of the <table> tag

    The following is the complete syntax or general format for creating a table :
    <table border=b bordercolor=bc align=center width=w% height=h% cellpadding=x cellspacing=x bgcolor=color>

    border= Specifies the size of border
    bordercolor= specifies the color of the border using either their rgb value or one of the set ones.

    align= can be set to left, right or center and specifies where the table will appear on the browser  window.

    width= can be set in pixels or as a percentage of the browser window.

    height= can be set in pixels or as a percentage of the browser window.

    cellpadding= set in pixels. Specifies the space within each cell in which nothing will appear.

    cellspacing= set in pixels, specifies the amount of blank space in between each cell

    bgcolor= sets the background color of the table, once again use either the rgb value of the color or one of the set colors.

    Attributes of the <caption> tag
    This tag is used to create a caption for a table.

    <caption align=top or bottom>

    Attributes of the <tr> tag
    This tag is used to create a new row in a table.

    The following is the general format for <tr> tag:

    <tr align=right valign=bottom bgcolor=blue bordercolor=yellow>

    align= can be set to left, right or center. Specifies the alignment of text in each cell of that row
    valign= can be set to top, bottom or center. Specifies the vertical alignment of text in each cell of that row

    bgcolor= the same as the bgcolor attribute of the <table> tag except that this sets only the color for that row

    bordercolor= the same as the bordercolor attribute of the <table> tag except that this sets only the color for that row

    Attributes of the <th> and <td> tags
    <th> tags are used to insert headings into a table.

    <td> tags are used to create a new columns or cells in a table.

    <Td> and <th> tags have the same attributes. See the following.

    <Td align=right valign=top bgcolor=green bordercolor=black height=50 width=100 colspan=2 rowspan=3>

    align= is the same as the attribute in the <tr> tag except that it effects only that cell
    valign= is the same as the attribute in the <tr> tag except that it effects only that cell

    bgcolor= is the same as the attribute in the <tr> cell except that it effects only that cell

    bordercolor= is the same as the attribute in the <tr> tag except that it effects only that cell

    height= is set in pixels and sets the height of the cell

    width= is set in pixels and sets the width of the cell

    colspan= is set to a number and sets the number of columns that cell will span

    rowspan= is set to a number and sets the number of rows that that cell will span.

    The rowspan and colspan are used for creating table with different cell width .

    Eg: A Complete example

    <html>
    <head>

    <title>Table Alignment</title>

    </head>

    <body >

    <TABLE WIDTH="50%" HEIGHT="50%" CELLPADDING="1" CELLSPACING="5" BORDER="1" ALIGN="middle">

    <CAPTION>This is Table Caption</CAPTION>

    <TR>
    <TD COLSPAN="2" ALIGN="middle"  VALIGN="middle" bgcolor=yellow> Top Row </TD>

    </TR>

    <TR>

    <TD ALIGN="middle" VALIGN="middle" bgcolor=gold> Number 1 </TD>

    <TD ALIGN="middle" VALIGN="middle" bgcolor=gold> Number 2 </TD>

    </TR>

    <TR>

    <TD COLSPAN="2" ALIGN="middle" VALIGN="middle" bgcolor=yellow> Bottom Row </TD>

    </TR>

    </TABLE>

    </body>

    </html>

     
     
     

    This is Table Caption
    Top Row 
    Number 1  Number 2 
    Bottom Row 

     
     
    Page contents: itechies.net - A complete tutorial and reference to creating tables using HTMl
    htmltutorials
    tutorial home