<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 & 2 - 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 - 1 2 3 Cell Span</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
IMAGE
“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”>
©Bhavan’s H J Doshi Information Technology Institute Jamnagar
</body>
</html>