techriz.com-HTML Week-3

Welcome to TechRiz

Where tech enthusiasts come for the latest tech news, Free downloads, free tutorials, articles and how to's.

Description: This is the TechRiz Free Tutorials page. Visit every day to stay informed about the latest tech news, from security alerts to Hardware and software updates. Enjoy your stay.

Week-3

Different table borders

Code:

<html>

<body>

<h4>With a normal border:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With a thick border:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With a very thick border:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Result:

With a normal border:

First	Row
Second	Row

With a thick border:

First	Row
Second	Row

With a very thick border:

First	Row
Second	Row

Table with no borders

Code:

<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>And this table has no borders:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Result:

This table has no borders:

100	200	300
400	500	600

And this table has no borders:

100	200	300
400	500	600

Heading in a table

Code:

<html>

<body>

<h4>Table headers:</h4>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

</body>

</html>

Result:

Table headers:

Name	Telephone	Telephone
Bill Gates	555 77 854	555 77 855

Vertical headers:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

Empty Cells

Code:

<html>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<p>

As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.

</p>

<p>

The trick is to insert a no-breaking space in the cell.

</p>

<p>No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.

</p>

<p>The no-breaking space entity starts with an ampersand ("&"),

then the letters "nbsp", and ends with a semicolon (";")

</p>

<p>

</p>

</body>

</html>

Result:

Some text	Some text
	Some text

As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.

The trick is to insert a no-breaking space in the cell.

No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.

The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")

Table with a caption

Code:

<html>

<body>

<h4>

This table has a caption,

and a thick border:

</h4>

<caption>My Caption</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Result:

This table has a caption, and a thick border:

My Caption

100	200	300
400	500	600

Table cells that span more than one row/olumn

Code:

<html>

<body>

<h4>Cell that spans two columns:</h4>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Result:

Cell that spans two columns:

Name	Telephone
Bill Gates	555 77 854	555 77 855

Cell that spans two rows:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

Tags inside tables

Code:
<html>

<body>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

Result:

This is a paragraph

This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

HELLO

Cell padding (control the white space between the cells content and borders)

Code:

<html>

<body>

<h4>Without cellpadding:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Result:

Without cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

Cell spacing (control the distance between cells)

Code:

<html>

<body>

<h4>Without cellspacing:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellspacing:</h4>

<table border="1"

cellspacing="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Result:

Without cellspacing:

First	Row
Second	Row

With cellspacing:

First	Row
Second	Row

Break out of a frame

Code:

<html>

<body>

<p>Locked in a frame?</p>

<a href="http://www.w3schools.com/"

target="_top">Click here!</a>

</body>

</html>

Result:

Locked in a frame?

Click here!

How to link to a mail message (will only work if you have mail installed)

Code:

<html>

<body>

<p>

This is a mail link:

Send Mail</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.

</p>

</body>

</html>

Result:

This is a mail link: Send Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

A more complicated mailto link

Code:

<html>

<body>

<p>

This is another mailto link:

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.

</p>

</body>

</html>

Result

This is another mailto link: Send mail!

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

HTML Frame Examples

How to create a vertical frameset with 3 different documents

Code:

<html>

</frameset>

</html>

Result:

Frame A - Frame B - Frame C

How to create a horizontal frameset with 3 different documents

Code:

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

How to use the <noframes> tag

Code:

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

<noframes>

<body>Your browser does not handle frames!</body>

</noframes>

</frameset>

</html>

How to mix a frameset in rows and columns

Code:

<html>

</frameset>

</html>

Result:

Frameset with noresize="noresize"

Code:

<html>

</frameset>

</html>

How to create a Navigation Framework

Code:

html>

<frame src="frame_a.htm"

name="showframe">

</frameset>

</html>

Inline Frame (a frame inside an HTML page)

Code:

<html>

<body>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Jump to a specified section within a frame

Code:

<html>

</frameset>

</html>

Jump to a special section with frame navigation

Code:

<html>

</frameset>

</html>

HTML Table Example

Simple Tables

Code:

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<tr>

</tr>

</table>

<h4>One row and three columns:</h4>

<tr>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Result:

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100	200	300
400	500	600

This site is viewed: