How can create table in Html

Table

Table Row व Column का combination होती है जब हम अपने data को row व column मे arrange कर show करना चाहते है तो हम table का use करते है

हम table मे complex से complex data को आसानी से arrange कर show कर सकते है जिसे data देखने मे तो अच्छा लगता ही है साथ ही find करने मे भी आसान हो जाता है

<p>हम अपने web page मे table का use विभिन्न information को जैसे-student marks, result, employees Details, Bill details, budget etc show कर सकते है

Html मे टेबल बनाना बहुत ही आसान है

index

Table tag

Table tag का use Html मे browser को यह बताने के लिए किया जाता है की यहा से table की starting है और इसे आगे आने वाले contents को वह table की तरह show करे।
इसका syntax निम्न है
Syntax
<table>
...........
...........
..........
</table>
इसे अंतर्गत निम्न tag use किये जाते है

<td>-Table Data

<tr>-Table Row

<th>-Table Heading

Adding Rows to a table

Table मे Row को add करने के लिए <tr> का use किया जाता है और </tr> से close किया जाता है एक table मे जितनी row add करनी होती है उतने ही <tr></tr> का use करना होता है

For ex

Table मे 5 rows create करनी हो तो 5 <tr></tr> का use करना होगा।

इसका syntax निम्न है

Syntax
<tr>
......
......
......
</tr>

Ex
<table border="2">

<tr>
<td>
First row
</td>
</tr>

<tr>
<td>
Second row
</td>
</tr>

</table>

Output

Adding Table row

Adding Heading to a table

Table मे Heading को add करने के लिए <th> का use किया जाता है और </th> से close किया जाता है एक table मे जितनी headings add करनी होती है उतने ही <th></th> का use करना होता है इसे <tr></tr> के अंतर्गत use किया जाता है
<br>Default रूप से Heading का text bold और alignment center होता है

For ex

Table मे 3 heading create करनी हो तो 3 <th></th> का use करना होगा।

इसका syntax निम्न है

Syntax

<th>Enter heading</th>

Ex
<table Border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Mark</th>
</tr>
</table>

Output

Adding Heading to a Table

Adding cells/Data to a table

Table मे cells को add करने के लिए <td> का use किया जाता है और </td> से close किया जाता है एक table मे जितनी data/items/cells add करनी होती है उतने ही <td></td> का use करना होता है इसे <tr></tr> के अंतर्गत use किया जाता है

For ex

Table मे 3 rows create करनी हो तो 3 <td></td> का use करना होगा।

इसका syntax निम्न है

Syntax

<tr>

......

</tr>

<tr>

</tr>

</table>

Output

Adding cells to a table

Adding Border to a table

Table मे Border को add करने के लिए Border Attribute का use किया जाता है और इसकी value के रूप मे कोई संख्या देते है

इसका syntax निम्न है

Syntax

Border="border no"

Adding space to a Table

हम अपनी Table की cells के चारो तरफ अंदर और बाहर की sapcing को set कर सकते है इसके लिए हम निम्न attribute का use करते है

Cellspacing

इसका use दो या दो से अधिक cells के बीच spacing set करने के लिए किया जाता है या cells के चारो तरफ spacing देने के लिए किया जाता है

इसका syntax निम्न है

Syntax

Cellspacing="cell spacing "

Cellspacing

Cellpadding

इसका use cells के अंदर को बीच spacing set करने के लिए किया जाता है या cells के चारो तरफ spacing देने के लिए किया जाता है

इसका syntax निम्न है

Syntax

Cellpadding=" Cell_padding_spacing "

Cellpadding

Determining the Table size

हम अपनी आवश्यकतानुसर Table की size को Determine कर सकते है इसके लिए हमे निम्न attribute का use करना होता है

Width

इस attribute का use हम table की widht (चौडाई) set करने के लिए करते है इसकी value के रूप मे हम कोई संख्या देते है जो pixcels की संख्या होती है इसलिए दी जाने वाली संख्या भी Default रूप से pixcels मे होती है इसे हम percentage मे भी दे सकते है जो browser screen के ratio मे होता है

Syntax

Width="border no"

Height

इस attribute का use हम table की Height(ऊचाई) set करने के लिए करते है इसकी value के रूप मे हम कोई संख्या देते है जो pixcels की संख्या होती है इसलिए दी जाने वाली संख्या भी Default रूप से pixcels मे होती है इसे हम percentage मे भी दे सकते है जो browser screen के ratio मे होता है

Syntax

Height="border no"

<Table Height="200" >

Or

<Table Height="50%" >

Program

<table Border="1" width="100%" height="20%">

<tr>

<td>Rock</td>
<td>12<sup>th</sup></td>
<td>455</td>
<td>Pass</td>

</tr>

<tr>

<td>King</td>

<td>12<sup>th</sup></td>

<td>435</td>
<td>pass</td>

</tr>

</table>

Output

Table width and Height

Aligning the content of the table

हम अपनी आवश्यकतानुसार Table की complete row या किसी cell के data को align कर सकते है हम

Table के data को दो प्रकार से align कर सकते है

Horizontal alignment

Table के data को Horizontally align करने के लिए align attribute का use किया जाता है और इसकी value के रूप मे Left/Right/Center देते है

Syntax

Align="Left/Right/Center"

Vertical alignment

Table के data को vertically align करने के लिए valign attribute का use किया जाता है और इसकी value के रूप मे Top/Middle/Bottom देते है

Syntax

Valign="Top/Middle/Bottom"

Ex

<tr valign="Top">

Or

<td valign="bottom">

Program

<table Border="1" width="100%" height="20%">

<tr>

<td align="left">Rock</td>
<td align="center">12<sup>th</sup></td>
<td align="right">455</td>
<td align="right" valign="bottom">Pass</td>

</tr>

<tr>

<td valign="Top">King</td>

<td valign="middle">12<sup>th</sup></td>

<td valign="bottom">435</td>
<td valign="middle" align="left">pass</td>

</tr>

</table>

Output

Text alignment in table

Spanning Rows and columns

हम Table की दो या दो से अधिक cells को मिला कर एक बड़ी row या Column create कर सकते है इसका use हम table की row या column का Title देने के लिए कर सकते है
इसके लिए हमे निम्न Attributes का use करना होता है

Rowspan

इसका use दो या दो से अधिक rows को मिला कर एक बड़ी row create करने के लिए किया जाता है इसकी value के रूप मे merge होने वाले cells की संख्या देते है

इसका syntax निम्न है

Syntax

Rowsapn= "no. Of cells"

For ex-

यदि हमे दो rows को मिला कर एक बडी row create करना हो तो हम निम्न ex का use किया जायेगा।

दो rows को मिलने के लिए निम्न ex का use किया जायेगा।

Colspan

इसका use दो या दो से अधिक columns को मिला कर एक बड़ा Column create करने के लिए किया जाता है इसकी value के रूप मे merge होने वाले cells की संख्या देते है

इसका syntax निम्न है

Syntax

Colsapn= "no. Of cells"

For ex-

यदि हमे दो column को मिला कर एक बडा column create करना हो तो हम निम्न ex का use किया जायेगा।

दो columns को मिलने के लिए निम्न ex का use किया जायेगा

<td colsapn= "2">

Program
<table Border="1" >
<tr>
<td colspan="5">AACHARYAKUL COMPUTER CENTER TIKAMGARH</td>

</tr>

<tr>

<td>Rock</td>
<td>12<sup>th</sup></td>
<td>455</td>
<td>Pass</td>
<td rowspan="2">Student Details for ex</td>

</tr>

<tr>

<td>King</td>

<td>12<sup>th</sup></td>

<td>435</td>
<td>pass</td>

</tr>

</table>

Output

Rowspan and colspan in table

Specifying Background color of the table/row/cell/Heading

हम अपनी आवश्यकतानुसर Table/Row/cell का background color set कर सकते है इसके लिए हमे bgcolor attribute का use करना होता है इसकी value के रूप मे color name या color code देते है

Syntax

Bgcolor="color name/code"

For table

For table Row

For table Heading

<Th bgcolor="#fdfdcd" >-color code

For table cell

<Td bgcolor="9966cd" >-color code

How can create table in Html Part 1

How can create table in Html Part 2

How can create table in Html Part 3

Search This Blog

Computer Gyan