Zmsl?$'&@JJ"]IkwX丝Ls$,Y "N9w<}Ϳ~`G ==y%vD: <LN=o6WfchuirֵnfJL"{#fv51]aGy lo&,QYµp i>'>^w]wqJI5\_}rZFJ8gQ㛽Sm(ɘ 1gM+'4[mV ?ROHh!p~f1eeT^b_:0<Àe 0QL41SF[Myb#O,r3, 3旣hC jh\JƩҙLVkbp(XA҈"$U\Wi8Y Hf&T*B5~yx#FL`efKpɵBq:SJWcgrPg߼cCIC ljK:@}lѿ%}/N)W"[g}.fpJk4PKtqvKoJN,^b9d@UU@66 <Ա!(,rрLBOd@9)sA=pWy'aa 12%Q@aPMZKؽZ ‹b>Y0<ǜpԤ"5C7Q(H?#5P Q+z5Rf72N鐩T] +@/uD,oܶ2DNrmy5??w;D!9%[D[< 7x98?N+{]]Փfka7Rwͷ Scv#QO[&b ^ˎTȕe8R$@/>%ԓ 5Q^bQ@DJ|s{:.9]P ;!i :CЪj u:lzB:T#=B ^qnSO6(ZO=UNc}ȅ`A"FbD>ۈts¹NLOS${GC 5<Um#ɕ*¯ 0J"  tRf4h.s:c*]dQ .2d%G& f&JY9[;5؝S^nda.tH)|q(21 NNW\CdS见#(m4Q!Ua` uYEp6+bg΢f;uJOJ7<{U9lG_)#b =z`lLmq/<SN a;`j9h JR+Jf]Mkb- (}*JԀ iO\n&m1(f#>Qyr'Vm 1t J"ez(B mq9vc"Y!Q1j9"D|?\gf#$.׬Ok^U5C)P $e*̅yT%iwIAP){Sg5-5Q0>̵ʯ(pB"s_"px46mz\|}-Nil )d }"7#(*k!cC\D`-J`ͥ4։RfP'WJ1 ^to'+v WnRYo0TN":TX{%c0_;l_! [=u`*ª#MKy eNX֙1v rc7v8+%XB~qc+ԸV Js8\l1@Z f n:QGA7Uxͧ sGle9Y06 Lq_ 5O(/ oS.ַg?ǿ9h9Rqz|z@J׈#4Jׇiz}N@7 G?p1mu{OdlS"Ґi-96

Introduction To HTML

Untitled Document

Tables in HTML

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Example

<html>

<body>

<table >
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

</body>

</html>

output:

Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

Example:

<table >
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML Table Headers

Header information in a table are defined with the <th> tag.

The text in a th element will be bold and centered.

Example:

<html>

<body>

<table >
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

</html>

</body>

Output:

How the HTML code above looks in a browser:


Example:

TABLE CELLS THAT SPAN MORE THAN ONE ROW/COLUMN

<html>
<body>

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

Output:


HTML Table Tags

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

Note:Try above examples by yourself. Just put or copy example codes in notepad and save the file with .html extension, then open the file with internet explorer to see the output.


Terms of Use | Our Team

VuGujranwala.com | Virtual Community (c) All rights reserved 2008-2013
Powered By: Eventual Solutions