Docstoc

Chapter-8(HTML5)

Document Sample
Chapter-8(HTML5) Powered By Docstoc
					8. TABULAR DATA
        8.1. The table element

The <table> elements represent data in two dimensions or more.

Permitted Content:

In this order:

   •    an optional <caption> element.

   •    zero or more <colgroup> elements

   •    an optional <thead> element

   •    one of the two alternatives:

           o     one <tfoot> element, followed by:

                        zero or more <tbody> elements,

                        or one or more <tr> elements,

           o     a second alternative followed by an optional <tfoot> element:

                        either zero or more <tbody> elements,

                        or one or more <tr> elements

Examples:

<! -- Simple table -->

<table>

<tr>

<td>John</td>

<td>Doe</td>

</tr>

<tr><td>Jane</td>

<td> Miami </td>

</tr></table>



<!-- Simple table with header -->
<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

</tr>

<tr>

<td>John</td>

<td>John</td>

<td>Doe</td>

</tr>

<tr><td>Jane</td>

<td> Miami </td>

</tr></table>



<!-- Table with thead, tfoot and tbody -->

<table>

<thead>

<tr>

<th>header content 1</th>

<th>header content 2</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Footer content 1</td>

<td>Footer content 2</td>

</tr>
</tfoot>

<tbody>

<tr>

<td>Body content 1</td>

<td>Body content 2</td>

</tr>

</tbody>

</table>



<!-- table with colgroup -->

<table>

<colgroup span=”4” class=”columns”></colgroup>

<tr>

<th>Countries</th>

<th>Capitals</th>

<th>Population</th>

<th>Language</th>

</tr>

<tr>

<td>USA</td>

<td>Washington DC</td>

<td>309 million</td>

<td>English</td>

</tr>

<tr>

<td>India</td>

<td>Delhi</td>
<td>125 Crore</td>

<td>Many languages </td>

</tr>

</table>



<!-- table with colgroup and col -->

<table>

<colgroup>

<col class=”column1”>

<col class=”column2plus3” span=”2”>

</colgroup>

<tr>

<th>Lime</th>

<th>lemon</th>

<th>Orange</th>

</tr>

<tr>

<td>Green</td>

<td>Yellow</td>

<td>Orange</td>

</tr>

</table>



        8.2. The colgroup element

It is used to group the table elements for styling purpose.

Attributes support:
span:- This attribute contains a positive integer indicating the number of additional
consecutive columns to apply the attributes of the column element. If not present, its default
value is zero.

This attribute has no relation with CSS styling



       8.3. The col element

If a <col> element has a parent and that is a <colgroup> element that itself has a parent that
is a <table> element, then the <col> element represents one or more columns in the column
group represented by that <colgroup>.

This attribute may have a span attribute whose value must be greater than zero.



       8.4. The tbody element

The table body (<tbody>) element defines a block of rows that consist of a body of data for
the parent table element. This element has only <table> as a parent element and must
appear after any <caption>, <colgroup> or <thead> element.



       8.5. The thead element

The table head (<thead>) element defines a set of rows defining the head of columns of the
table.

The end tag may be omitted if the <thead> element is immediately followed by a <tbody> or
<tfoot> element.

Example:

<table>

<caption>School auction sign-up sheet</caption>

<thead>

<th>Name</th>

<th>Product</th>

<th>Price</th>

<tr>

<td>Your name here</td>
<td>Your product here</td>

<td>Your price here</td>

</tr>

</thead>

</table>



        8.6. The tfoot element

The table foot (<tfoot>) element represents a block of rows that consist of the column
summaries (footers) for the parent <table> element.



NOTE:- These three elements described above (<thead>, <tbody>, <tfoot>) represents the
whole content of the table just like <head> and <body>. So think of using like this.



        8.7. The tr element

This element represents a row of cells in a table.



        8.8. The td element

This element represents a cell that content data. It’s a child of <tr> (table row) element.



        8.9. The th element

This element represents a header cell in a table (Usually in bold letters). It’s a child of <tr>
(table row) element.

Attributes support:

                     (common to th and td)

colspan and rowspan:- This attribute contains a non-negative integer value that indicates on
how many columns and rows does the cell extend. Its default value is 1.

headers:- This attributes a list of space-separated strings, each corresponding to
the id attribute of the <th> elements that applies to this element.
                     (only common to th)

scope:- This enumerated attribute defines the cells that the header defined in
this <th> element relates to. It may have the following values:

   •   row: which means that the header relates to all cells in the row that this element
       belongs to;

   •   col: which means that the header relates to all cells in the column that this element
       belongs to;

   •   rowgroup: which means that the header relates to all remaining cells in the row that
       this element belongs to. The remaining cells are either those to the right of this
       element, or to his left depending of the value of dir attribute defined on
       the <table> element;

   •   colgroup: which means that the header relates to all remaining cells in the column that
       this element belongs to;

   •   auto

Example:

<table>

<thead>

 <tr> <th> ID <th> Measurement <th> Average <th> Maximum

<tbody>

 <tr> <td> <th scope=rowgroup> Cats <td> <td>

 <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4

 <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1

<tbody>

 <tr> <td> <th scope=rowgroup> English speakers <td> <td>

 <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4

 <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1

</table>

Output:
The following example shows the use of colspan and rowspan attribute.

<table>

<caption>Specification values: <b>Steel</b>, <b>Castings</b>,

Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>

<thead>

 <tr>

 <th rowspan=2>Grade.</th>

 <th rowspan=2>Yield Point.</th>

 <th colspan=2>Ultimate tensile strength</th>

 <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th>

 <th rowspan=2>Per cent reduct. area.</th>

 </tr>

 <tr>

 <th>kg/mm<sup>2</sup></th>

 <th>lb/in<sup>2</sup></th>

 </tr>

</thead>

<tbody>

 <tr>

 <td>Hard</td>
 <td>0.45 ultimate</td>

 <td>56.2</td>

 <td>80,000</td>

 <td>15</td>

 <td>20</td>

 </tr>

 <tr>

 <td>Medium</td>

 <td>0.45 ultimate</td>

 <td>49.2</td>

 <td>70,000</td>

 <td>18</td>

 <td>25</td>

 </tr>

 <tr>

 <td>Soft</td>

 <td>0.45 ultimate</td>

 <td>42.2</td>

 <td>60,000</td>

 <td>22</td>

 <td>30</td>

 </tr>

</tbody>

</table>

Output:

				
DOCUMENT INFO
Shared By:
Stats:
views:24
posted:1/8/2012
language:
pages:10
Description: This is my HTML5 notes, Hope you like it