Swati Lathia

Learning ways

HTML Tutorial 2 : Table & Frame Tags

<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> 
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Marks</th>
</tr> 
<tr>
<td>Mary</td>
<td>Kom</td>
<td>60</td>
</tr> 
<tr>
<td>Neeraj</td>
<td>Chopra</td>
<td>80</td>
</tr> 
<tr>
<td>PV</td>
<td>Sindhu</td>
<td>82</td>
</tr> 
<tr>
<td>Mirabai</td>
<td>Chanu</td>
<td>72</td>
</tr>             
</table>

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

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 = "1" cellpadding = "5" cellspacing = "5">
         <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>

colspan: It specifies the number of columns a header/data cell should span

rowspan: It specifies the number of rows a header/data cell should span

Table <Caption>

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.

<html>
   <body>
      <table border = "2">
         <caption>Colspan & Rowspan Example
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
</html>

<Frameset> & <Frame> Tags

  • HTML Frames are used to divide the web browser window into multiple sections where each section can be loaded separately.
  • A frameset tag is the collection of frames in the browser window.
  • Each frame is indicated by <frame> tag and it basically defines which HTML document should open into the frame.
  • To define the horizontal frames use rows attribute of frame tag in HTML document and to define the vertical frames use cols attribute of frame tag in HTML document.

Attributes of <Frameset>

  • cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically used to define the no of columns and its size inside the frameset tag.
  • The size or width of the column is set in the frameset in the following ways:
  • Use absolute value in pixel: Example : <frameset cols = “300, 400, 300”>    
  • Use percentage value: Example:  <frameset cols = “30%, 40%, 30%”> 
  • Use wild card values: Example:  <frameset cols = “30%, *, 30%”>
  • In the above example * will take the remaining percentage for creating vertical frame.
  • rows: The rows attribute is used to create horizontal frames in web browser.  This attribute is used to define no of rows and its size inside the frameset tag. The size of rows or height of each row use the following ways:
  • Use absolute value in pixel: Example: <frameset rows = “300, 400, 300”>
  • Use percentage value: Example: <frameset rows = “30%, 40%, 30%”>
  • Use wild card values: Example: <frameset rows = “30%, *, 30%”>
  • In the above example * will take the remaining percentage for creating horizontal frame.
  • border: This attribute of frameset tag defines the width of border of each frames in pixels.      Zero value is used for no border.
  • Example: <frameset border=”4″>
  • frameborder: This attribute of frameset tag is used to specify whether the three-dimensional border should be displayed between the frames or not for this use two values 0 and 1, where 0 defines for no border and value 1 signifies for yes there will be border.
  • Example : <frameset frameborder=”0″>
  • framespacing: This attribute of frameset tag is used to specify the amount of spacing between the frames in a frameset. This can take any integer value as an parameter which basically denotes the value in pixel.
  • Example: <framespacing=”20″>
  • It means there will be 20 pixel spacing between the frames

Attributes of <Frame>

  • name: This attribute is used to give names to the frame. It differentiates one frame from another. It is also used to indicate which frame a document should loaded into.
   <frame name="left" src="frame1.html" >
   <frame name="middle" src="frame2.html">
   <frame name="right" src="frame3.html">
  • src: This attribute in frame tag is basically used to define the source file that should be loaded into the frame. The value of src can be any url.
  • In above example, name of the frame is “left” & source file will be loaded from frame1.html in frame.
  • marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between the border and contents of left and right frame.
  • Example: <frame marginwidth=”20″>
  • marginheight: This attribute in frame tag is used to specify height of the spaces in pixels between the border and contents of top and bottom frame.
  • Example: <frame marginheight=”20″>
  • scrolling: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is basically used to control the appearance of scrollbar. The value of this attribute can be yes, no, auto. Where the value no denotes there will be no appearance of scroll bar.
  • Example: <frame scrolling=”no”>
  • Noresize : By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame.
  • Example : <Frame noresize>

Example with name attribute

“Frametag.html”

<html>
      <frameset rows="15%,75%,10%">
                  <frame src="frame1.html">                  
                  <frameset cols="20%,60%,20%">
                              <frame src="subjects.html">
                              <frame src="center.html" name="centerframe">
                              <frame src="news.html">
                  </frameset>
                  <frame src="frame3.html">                  
      </frameset>
</html>

“Frame1.html”

<html>
      <head>
                  <title>This is header part</title>
      </head>
      <body>
                  <img src="Chrysanthemum.jpg" width="70"
                  style="vertical-align:middle" height="70">
                  <font size=4 face="calibri">
                  Bhavan's H J Doshi Information Technology Institute Jamnagar
                  </font>
      </body>       
</html>

“subjects.html”

<html>
      <head>
                  <title>All about Subjects</title>
      </head>
      <body>
                  <font size=4 face="calibri">
                  <a href="cs.html" target="centerframe">Communication Skills</a><br>
                  <a href="c.html" target="centerframe">Language C</a><br>
                  <a href="cf.html"  target="centerframe">Computer Fundamentals</a><br>
                  <a href="net.html"  target="centerframe">Networking & HTML</a><br>
                  </font>
      </body>
</html>

“cs.html”

<html>
      <body>
      <font size=4 face="calibri">
      You are reading Communication skills
      <hr>
      Its one of the subjects of BCA sem 1
     </font>
     </body>
</html>

Now you can create another 3 files named “c.html”, “cf.html”, “net.html” with different content.

“center.html”

<html>
<body>
<font size=5 face="calibri">
This is default page, When you click on the links at left panel, it will change the content
</font>
</body>
</html>

“news.html”

<html>
      <body>
                  <font size=4 face="calibri">
                 <marquee height="80%" bgcolor="cyan" direction="down">
                                We are hiring BCA sem 1    students
                 </marquee>
                 </font>
      </body>
     </html>

“frame3.html”

<html>
      <head>
                  <title>This is header part</title>
      </head>
      <body>
                  <font size=4 face="calibri">
                  &copy;Bhavan's H J Doshi Information Technology Institute Jamnagar
      </body>       
</html>
Scroll to top