HTML Tutorial 2 : Table & Frame Tags

Table of Contents

<Table> tag

HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
<table> tag makes use of <tr> , <td>, and <th> elements to create a table.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

Example:

<table border> 
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>State</th>
</tr> 
<tr>
<td>Mary</td>
<td>Kom</td>
<td>Manipur</td>
</tr> 
<tr>
<td>Neeraj</td>
<td>Chopra</td>
<td>Hariyana</td>
</tr> 
<tr>
<td>PV</td>
<td>Sindhu</td>
<td>Kerala</td>
</tr> 
<tr>
<td>Mirabai</td>
<td>Chanu</td>
<td>Manipur</td>
</tr>             
</table>

The above table contains 5 rows & 3 columns = 15 values

Result

First Name	Last Name	State
Mary	Kom	Manipur
Neeraj	Chopra	Hariyana
PV	Sindhu	Kerala
Mirabai	Chanu	Manipur

Attributes of <Table>

border: It specifies the border of HTML table. E.g. <table Border=”2”>
align: It specifies the visual alignment of table. It can be right, left, center, justify, char.
E.g. <table align=”center”>
bgcolor: It specifies the background color of the table. E.g. <table bgcolor=”cyan”>
background: It specifies the background color of table or just for one cell.
E.g. : <table background=”test.png”>
width: It specifies the width of the table in pixels of %
height: It specifies the height of the table in pixels of %
bordercolor: It specifies the border color of entire table. You can use a proper colorname or rgb format or hexcode. E.g. <table border=”10” bordercolor=”red”>.
If you don’t specify the border property, you don’t get bordercolor.
bordercolorlight: It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.
It only appears in Internet Explorer.
E.g. <table border=10 bordercolorlight=”red”>
bordercolordark: It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.
It only appears in Internet Explorer.
E.g. <table border=10 bordercolordark=”red”>

<td> & <th> tags

An HTML table has two kinds of cells:
- Header cells – contains header information (created with the <th> element)
- Data cells – contains data (created with the <td> element)
The text in <td> elements is regular and left-aligned by default.
The text in <th> elements are bold and centered by default.
cellspacing: It specifies the space between cells.
cellpadding: It specifies the space between the cell borders and their contents.

<html>
   <head>
      <title>HTML Table Cellpadding</title>
   </head>
   <body>
      <table border = "3" bordercolor=darkgray bgcolor=beige cellpadding = "10" cellspacing = "15">
         <tr>
            <th>Name</th>
            <th>City</th>
         </tr>
         <tr>
            <td>Dhyan Chand</td>
            <td>Prayagraj</td>
         </tr>
         <tr>
            <td>Milkha Singh</td>
            <td>Chandigrah</td>
         </tr>
      </table>
   </body>
</html>

Result

Name	City
Dhyan Chand	Prayagraj
Milkha Singh	Chandigrah