LINKS AND TABLES

Links
Two types of links
External Links
Internal links

Anchor Tag <a>

attrributes
Name
Href


External Links
External Links refer to the hyperlinks that refer to an external site
Internal Links
A link within the sections of a particular page can be done and are
called internal links
Anchor Tag
Html uses anchor tag to create a link to another document
An anchor can point to any resource on the web:
An html page
An image
A sound file
A movie etc.
Syntax


<a href="url">Link text</a>
name Attribute
The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an
HTML document.

Title attribute
Each anchor must have a title attribute that describes the
link destination


Linking to specific sections
Anchor tag can be used to go to a particular section in the
document.
Within the same (or different) document
Two steps involved
Define a named section in a document.
<a name =tennis ><h2>About tennis</a>
Provide a link to a name named section
< a href=www.sunny.com/xyz.html #LAN>Local Area Network</a>

Example:

A named anchor inside an HTML document:
<a name="tips">Tips Section</a>

link to the "Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a
The target Attribute
The target attribute specifies where to open the linked
document.
The example below will open the linked document in a
new browser window or a new tab:






<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Ex1:An image as a link





Ex2:Link to a location on the same page

Ex3:Break out of a frame

Ex4:Create a mailto link




HTML TABLE
Tables are made of cells arranged into rows
Use tags <table>,<tr>,<td>
An example

The Table tags

<table>..</table>
Defines the beginning and the end of a table
attributes:
Bgcolor=#rrggbb or color name
Border=Number
Height=number , percentage




HTML Table
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a
table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Attributes of table





BORDER
Determines the thickness of the table border
Example: <table border = 2>

CELLPADING
Determines the distance between the border of a cell and the contents of the
cell
Example: <table cellpadding = 3>

CELLSPACING
Determines the empty spacing between the borders of two adjacent cells
Example: <table cellspacing = 1>


<table align=center width=500 border=2 cellspacing=1
cellpadding=3>A bunch of stuff goes in here.</table>

<table> Attributes
align=Center|Left| Right

bgcolor=#rrggbb or color name

width=number, percentage

height=number, percentage

background=url

cellpadding= number

cellspacing= number

<table> Attributes
Frame =void|above|below|hsides|lhs|rhs|vsides|box|border
Tells the browser where to draw borders around the table

Value description
Void The frame does not appear (default)
Above Top side only
Below Bottom side only
Hsides Top and bottom sides only
Lhs Left hand side only
Rhs Right hand side only
Vsides Right and left sides only
Box All four sides
border All four sides
Table Data <td>
Defines a table data cell
Can contain any content including another table
Attrributes
Align=left|center|right
Background=url
Bgcolor=#rrggbbor color name
Colspan=number
Height= number, percentage
Rowspan=number
Valign=top|middle|bottom|baseline
Width=number


colspan
rowspan
Table Row<tr>
Defines row of cells within a table.
A table row as delimited by <tr> tags contains no content other than a
collection of table cells (<td>).

Attributes

Align=left/center/right

Bgcolor=#rrggbb or color name

Valign=top/middle/bottom/baseline

Background=url of image file

Bordercolor=#rrggbb or color name


Headings in a Table <th>
<th> defines header cell in html table
Table header cells function the same as table data <td> cells in
bold text centered horizontally and vertically in the cell.
Attributes
<th> uses the same attribute as <td>
Empty cells in a table
Add a non breaking space(&nbsp;) to empty cells, to make the
border visible.
An HTML table has two kinds of cells:
Header cells - contains header information (created with
the <th> element)
Standard cells - contains data (created with the td
element)
The text in a <th> element is bold and centered.
The text in a <td> element is regular and left-aligned.

Definition and Usage of <thead>
The <thead> tag is used to group the header content in an
HTML table.

The thead element should be used in conjunction with the
tbody and tfoot elements.

The tbody element is used to group the body content in an
HTML table and the tfoot element is used to group the footer
content in an HTML table.

Note: <tfoot> must appear before <tbody> within a table, so
that a browser can render the foot before receiving all the
rows of data.

Notice that these elements will not affect the layout of the
table by default. However, you can use CSS to let these
elements affect the table's layout.

<caption>
Defines a table caption
<caption> tag must be inserted immediately after the <table>
tag.
Can specify only one caption per table
Usually the caption will be centered above the table
Attributes
Align=top | bottom | left | right | center
Positions the caption relative to the table
Valign=top | bottom
Positions the caption above or below the table(top is the default)
<colgroup>
Creates a column group , a structural division within a
table that can be appointed attributes with html

A table may include more than one column group

The number of columns in a group is specified either by
the value of the span attribute or by tally of columns <col>
within the group .

Definition and Usage

The <colgroup> tag is used to group columns in a table
for formatting.
The <colgroup> tag is useful for applying styles to entire
columns, instead of repeating the styles for each cell, for
each row.
The <colgroup> tag can only be used inside a table
element.
Attributes of <colgroup>
Align=left|right|center
Specifies alignment of text in the cells of a column.
Attributes of <colgroup>
Span=number
Specifies the number of columns "spanned" by the <col>
element (which shares its attributes with all the columns it
spans).
Valign=top|middle|bottom|baseline
Specifies the vertical alignment of text in the cells of a
column.
Width=pixels.percentage,n*
Specifies the width (in pixels, percentage, or relative) of
each column spanned by the <col> element. It overrides
the width attribute of the containing <colgroup> element.
<col>
It specifies properties for a column (or columns) within a
column group (<colgroup>).

Columns can share attributes (such as text alignment)
without being part of a formal structural grouping.
Attributes

align=left|right|center
Specifies alignment of text in the cells of a column.