html2

Share this page :

HTML Table

HTML table tag is used to display data in tabular form (row * column).

Tag

Description

<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.

<html>
<body>
<h1> <u> Example of Table </u> </h1>
<table border=”1″ align=”center”>

<tr>
<th>Name</th>
<th>Roll</th>
<th>Marks</th>
</tr>

<tr>
<td>James</td>
<td>707</td>
<td>60</td>
</tr>

<tr>
<td>Peter</td>
<td>708</td>
<td>80</td>
</tr>

<tr>
<td>Smith</td>
<td>709</td>
<td>55</td>
</tr>

</table>
</body>
</html>

What is rowspan?
The rowspan attribute defines the number of rows a header cell should span.

What is colspan?
The colspan attribute defines the number of columns a table cell should span.

<html>
<head>
<title>HTML Table Rowspan and Colspan</title>
</head>

<body>

<center>
<h2>Example of Table Rowspan</h2>

<table border=”1″ cellpadding=”10″ bordercolor=”magenta”>

<tr>
<th rowspan=”4″>Users Info</th>
</tr>

<tr>
<td>1</td>
<td>John</td>
<td>john@mail.com</td>
</tr>

<tr bgcolor=”aqua”>
<td>2</td>
<td>Peter</td>
<td>peter@mail.com</td>
</tr>

<tr>
<td>3</td>
<td>James</td>
<td>james@mail.com</td>
</tr>
</table>

<style>

h3
{
background-color: aqua;
width: 55%;
}

</style>

<h3>Example of Table Colspan</h3>

<table border=”1″ cellpadding=”10″>
<tr>
<th colspan=”3″ bgcolor=”yellow”>Users Info</th>
</tr>

<tr>
<td>1</td>
<td>John</td>
<td>john@mail.com</td>
</tr>

<tr bgcolor=”magenta”>
<td>2</td>
<td>Peter</td>
<td>peter@mail.com</td>
</tr>

<tr>
<td>3</td>
<td>James</td>
<td>james@mail.com</td>
</tr>

</table>
</center>
</body>
</html>

Table Vertical Align

 

<html>
<head>
<title>Table valign </title>
</head>
<body>
<center>
<h1>Example of Table Valign Attribute</h1>
<hr width=”65%” color=”blue” size=”5″>

<table border=”1″ width=”600″ height=”100″ bordercolor=”red”>
<tr>
<th colspan=”4″ bgcolor=”yellow”>Table valign settings</th>
</tr>
<tr>
<td width=”25%”>Default</td>
<td valign=”top” width=”25%”>Top</td>
<td valign=”middle” width=”25%”>Middle</td>
<td valign=”bottom” width=”25%”>Bottom</td>
</tr>
</table>

</center>
</body>
</html>

Table back color

<html>
<head>
<title>table</title>
</head>

<body>

<table style=”background-color:aqua;” align=”center”>

<tr style=”background-color:red; color:blue;”>

<th>Course</th>

<th>Fees</th>

<th>Duration</th>

</tr>

<tr>

<td>DSA</td>

<td bgcolor=”magenta”>8000</td>

<td>1 year</td>

</tr>

<tr>

<td>DDEO</td>

<td bgcolor=”white”>4000</td>

<td>6 Months</td>

</tr>

<tr>

<td>DFA</td>

<td bgcolor=”yellow”>8000</td>

<td>6 Months</td>

</tr>

</table>

</body>

</html>

Table picture Album

<html>
<body bgcolor=”#EE82EE”>

<center>

<font face=”monotype corsiva” size=”15″ color=”yellow”>
My Album
<hr color=”white” size=”5″ width=”65%”>
</font>

<table border=”3″ bordercolor=”limefs” cellpadding=”5″ cellspacing=”5″>

<tr>
<td><img src=”1.jpg” height=”120″ width=”120″></td>
<td><img src=”2.jpg” height=”120″ width=”120″></td>
<td><img src=”3.jpg” height=”120″ width=”155″></td>
</tr>

<tr>
<td><img src=”4.jpg” height=”120″ width=”120″></td>
<td>
<a href=”5.jpg”>
<img src=”5.jpg” height=”120″ width=”120″>
</a>
</td>
<td><img src=”6.jpg” height=”120″ width=”120″></td>
</tr>

<tr>
<td><img src=”7.jpg” height=”120″ width=”120″></td>
<td><img src=”8.jpg” height=”120″ width=”120″></td>
<td><img src=”9.jpg” height=”120″ width=”120″></td>
</tr>
</table>

<p style=”background-color: yellow”>

<font color=”red” size=”10″>
Click on the middle image to zoom
</font>
</p>

</center>
</body>
</html>

Table Rowspan

<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>

<h1>The th rowspan attribute</h1>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan=”3″>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>

HTML <table> cellpadding:
The HTML <table> cellpadding Attribute is used to specify the space between the cell content and cell wall.

<html>

<body>

<h2>HTML table cellpadding Attribute</h2>

<table border=”1″
cellpadding=”15″>
<caption>Author Details</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>James</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>Smith</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>

</html>

HTML <table> cellspacing:
The HTML <table> cellspacing Attribute is used to specify the space between the cells.

<html>

<body bgcolor=”Purple”>

<h2 align=”center” style=”color: white;”>
<u> HTML table cellspacing Attribute </u>
</h2>

<table border=”5″ cellspacing=”15″ bordercolor=”aqua” align=”center”>

<caption style=”color:yellow;”>Student Details</caption>

<tr bordercolor=”red”>
<th style=”color:white;”>COURSE</th>
<th style=”color:white;”>FEES</th>

</tr>
<tr bgcolor=”yellow”>
<td>Software</td>
<td>10,000/-</td>

</tr>
<tr bgcolor=”lime”>
<td>Hardware</td>
<td>25,000/-</td>

</tr>
</table>
</body>

</html>

Marquee Tag

The Marquee HTML tag is used to scroll image or text horizontally or vertically.

Example 1:

<html>

<body>

<h2 align=”center”><u>Example of Marquee Tag</u></h2>

<marquee>Default scrolling</marquee>

<hr color=”red”>

<marquee bgcolor=”#d9d9ff” direction=”right”>Marquee with background color</marquee>

<hr color=”yellow” size=”5″>

<marquee bgcolor=”red” width=”50%”>Marquee with Background and Width</marquee>

<hr>

<marquee bgcolor=”aqua” hspace=”50″ vspace=”20″>Marquee with Background and Space</marquee>

<hr> <hr>

<marquee behavior=”alternate”>Marquee behavior attribute</marquee>

<hr> <hr>

<marquee direction=”down” height=”100″>

<font color=”red” size=”8″>

<b>It moves down</b>

</marquee>

<hr color=”magenta” size=”8″>

<marquee direction=”down” behavior=”alternate” height=”150″>

<marquee behavior=”alternate”>

<font size=”7″>?</font>

</marquee>

</marquee>

</body>
</html>

Example 2:

<html>
<body>
<h2><u>Example of Marquee Tag</u></h2>

<marquee behavior=”slide”>

<img src=”1.jpg” height=”100″ width=”100″>

</marquee>

<hr>

<marquee behavior=”scroll”>

<img src=”1.jpg” height=”100″ width=”100″>

</marquee>

<hr>

<marquee loop=”3″ bgcolor=”yellow” width=”75%”>

This marquee is set to scroll (to loop) 3 times

</marquee>

<hr>

<marquee scrollamount=”29″ behavior=”alternate”>

<font color=”red” face=”chiller” size=”10″>Marquee Speed</marquee>

<hr><hr>

<marquee scrolldelay=”200″ direction=”right”>Marquee Slow Speed</marquee>

</body>
</html>

Example 3:

<html>

<body bgcolor=”aqua”>

<center>

<h1> <u> Example of Marquee </u> </h1>

<br><br><br><br>

<br><br><br><br>

<marquee direction=”down” width=”250″ height=”200″ behavior=”alternate” style=”border:solid”>

<marquee behavior=”alternate”>

<img src=”1.jpg” height=”50″ width=”50″>

</marquee>

</marquee>

</center>
</body>
</html>

Frames:

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.

Creating Vertical Columns:

To create a set of three vertical columns, we need to use the frameset element with the cols attribute.

Creating Horizontal Rows:

Rows of frames can be created by using the rows attribute rather than the cols attribute.

Example 1:

<html>
<frameset cols=”50%,50%”>
<frame src=”1.jpg”>
<frame src=”2.jpg”>
</frameset>
</html>

Example 2:

<html>
<frameset rows=”50%,50%”>
<frame src=”1.jpg”>
<frame src=”2.jpg”>
</frameset>
</html>

Example 3:

1. File name = mainframe.html

<html>

<frameset cols=”35%,65%”>

<frame src=”page1.html”>

<frame src=”1.jpg” name=”new”>

</frameset>

</html>

2. File name = page1.html

 

<html>

<body>

<h2><u>Click below to show the image</u></h2>

<a href=”1.jpg” target=”new”>Image 1</a><br>

<a href=”2.jpg” target=”new”>Image 2</a><br>

<a href=”3.jpg” target=”new”>Image 3</a><br>

<a href=”4.jpg” target=”new”>Image 4</a><br>

</body>

</html>

 

Share this page :