Progress over Perfection

Table Tag in HTML

A table is divided into rows and columns: these specify the cells of the table

Cells can contain text, images, links, other tables etc.

HTML <table> Tag is used to split a page into different sections (arranging the layout of the web page).

Basic Table Tags:

  1. <TABLE>
  2. <TR>
  3. <TD>
  4. Caption tag
  5. Header tag

HTML Structure of a Table

table

<Table> Tag & Attributes

Marks the beginning and end of a table.

Example:

<html>
<head>
<title>  table tag </title>
</head>
<body>
<table >
   <tr>
      <td>Name</td>
      <td>Course</td>
      <td>Year</td>
   </tr>
   <tr>
      <td>Ravi </td>
      <td> B. tech </td>
      <td>4</td>
    </tr>
    <tr>
       <td>Ram </td>
       <td> M-tech</td>
       <td>2</td>
     </tr>
     </table>
<body>
</html>

Output:

table with default border=0Click Here: Table Tag

Attributes of table tag are :

  1. Align
  2. Border
  3. Cell Padding
  4. Cell Spacing
  5. Width
  1. Align Attribute:
    • Specifies the alignment of the table in the page.
    • Values are: left, right, center
    • Click Here: Align Attribute
  2. Border Attribute:
    • Specifies the width of the border to be drawn around the table . By default there is no border i.e. border=0
    • Values (in pixels) are: 1,2 ,3 ….
    • Click Here: Border AttributeTable with different border values
  3. Cell Padding Attribute:
    • The space between the content and inside of a cell i.e. control the space between the table text and the cell borders
    • Default cell padding value is 1 pixel.
    • Possible values (in pixels) are: 1, 2 , 3, 4, 5 …
    • Click Here: Cell PaddingExample: Cell padding
  4. Cell Spacing Attribute:
    • The amount of space between cells in a table
    • Values possible are: 1, 2, 3, …
    • Click Here: Cell Spacing
      Example: cell spacing with different values
  5. Width Attribute:
    • Used to specify width of the table
    • The maximum width can be the maximum size of the monitor in pixels.   [ you may assign any size but then u have to use slider to view the complete table ]
    • Click Here: Width Attribute

<TR> Tag & Attribute

  • TR stands for table row. To add a row in a table <tr> tag is used
  • For each row there will be a set of <tr> … </tr> tags
  • Attribute: BGCOLOR (used to set the background color of the row)
  • Value: Color name/code

Click Here: TR tag with bgcolor attribute

Example:

<html>
<head>
<title>  table tag </title>
</head>
<body>
<table border=1>
<tr bgcolor=orange>
       <th>Name</th>
       <th>Course</th>
       <th>Year</th>
</tr>
<tr >
        <td>Ravi </td>
        <td> B. tech </td>
        <td>4</td>
</tr>
<tr bgcolor=green>
         <td>Ram </td>
         <td> M-tech</td>
         <td>2</td>
</tr>
</table>
<body>
</html>

Output:

CapturebTable using bgcolor attribute in TR tag

<TD> Tag & Attributes

  • Table data tag <TD> defines each cell in the table
  • TD tag must be nested within the table row tags

Attributes of TD tag:

      1. Align
      2. Colspan
      3. Rowspan

Align attribute

  • The horizontal alignment of the text within the cell
  • Values can be: left, center and right
  • Click Here: Align Attributetext alignment of 1st row cells =center, text alignment of 2nd row cells =right, text alignment of 3rd row cells =left

Colspan attribute:

  • Width of the cell in terms of number of columns.
  • Used when a cell occupies more than one column.
  • Click Here: Colspan AttributeExample: TD with colspan attributes

Rowspan attribute:

  • Height of the cell in terms of number of rows
  • Used when cell occupies more than one row
  • Click Here: Rowspan AttributeCapturee

Note:

  • It is not necessary for all the rows to have same number of columns, the rows with less number of columns will be padded with blank cells
  • A cell definition can contain all the HTML tags that are normally used in the body of an HTML Document
  • All the table tags if placed outside the <table …</table> tag will be ignored by the browsers

<Caption> Tag

  • Used for the title of a table that describes the contents of the table
  • Click Here: Caption TagCapturef3Capturef2Capturef1Header Tag <TH>

These tags are used to designate a cell to be a header cell and are used within <tr> ….</tr> tag.

Click Here: Header Tag

 

Leave a Reply

Your email address will not be published. Required fields are marked *


CAPTCHA Image
Reload Image

Subscribe

August 2016
M T W T F S S
« Jul   Mar »
1234567
891011121314
15161718192021
22232425262728
293031