-->

HTML Tables

You use tables to represent any data in a structured form. By adding tables to your webpage, you can make it even more structured and attractive. To create tables in HTML, you use <table> tags. This tag has a sub tag called <tr> i.e. table row tag. <tr> tag also has a sub tag called <td> i.e. table data tag.

Creating Tables in HTML

Any table is made up of row and columns. Therefore, to create a row after <table> tag, you use <tr> tag. The more you want to create the rows, define the same <tr> tag. After creating rows you create columns in rows. The <td> tag is used to create columns. You define as many tags as you want to create <td> tags.

An example of this is being given below.

<table>

            <tr>     <td> First Row First Column           </td>  <td> First Row Second Column             </td>            </tr>

            <tr>     <td> Second Row First Column </td>        <td> Second Row Second Column </td>  </tr>

</table>

The output of above code is :

To create a table, you should always keep in mind the tag order. First comes the <table> tag. After this comes the <tr> tag. Then there comes <th> and <td> tags. <th> and <td> tags will always come in <tr> tags. One thing you should keep in mind is that unless you define the border of the table through the border attribute, the boundary of the table is not shown.

Adding Border in Table

Border attribute is used to place a border in Table. The value of this attribute is integer (1,2,3 ...). The following example shows below:

<table Border="1">

            <tr>     <td> First Row First Column           </td>  <td> First Row Second Column             </td>            </tr>

            <tr>     <td> Second Row First Column </td>        <td> Second Row Second Column </td>  </tr>

</table>

The output of above code is :

Creating Table Headings

You can also create headings in the first row of tables. Heading is bigger than the rest of the text of the text table. For example, if you are creating a table that stores information about employees, then you can create headings such as Names and addresses etc. The <th> tag is used to create heading. This is called a table heading tag. The text that you use in this tag is shown on the webpage as heading. This tag is used inside the <tr> tag. An example of this is being given below.

<table Border="1">

            <tr>     <th> Name </th>      <th> Address </th>  </tr>

            <tr>     <td> Ram </td>        <td> Rampur </td>  </tr>

            <tr>     <td> Rahim </td>    <td> Rahimpur </td>          </tr>

</table>

Output :

COLSPAN Attribute

If you want to divide the column of one row in more than one column. For this, you define colspan attribute in the previous column. In which column you define the colspan, it replaces the same column of one column. In other words, if you want to match the column then you can use it. An example of this is being given below.

<table Border="1">

            <tr>     <th> Name </th>      <th> Address </th>      <th colspan="2" > Contact </th>                         </tr>

            <tr>     <td> Ram </td>        <td> Rampur </td>  <td> 1212121212 </td><td> 8888888888 </td>                 </tr>

            <tr>     <td> Shyam </td>  <td> Rahimpur </td>          <td colspan="2"> 9898989898 </td>                           </tr>

</table>

See above example, Ram has pass 2 mobile numbers. But Shyam's pass is the same mobile number. If you normally create a table, then a column in the black row will be left empty. In such a way the table will not look good either. If you want to have two columns of row with one column of the black row in the row, then you use colspan attribute in that column and the number of columns you want to cover with this one column gives the same number of integer values. As I have covered two columns of row with ram from the above example column one column of the black row. The web page generated below will generate this script.

ROWSPAN Attribute

ROWSPAN attribute is also like colspan. You define it in the <tr> tag. The value you give for this attribute replaces the same row as a row. In other words, if you want to match the row, you can use it. An example of this is being given below.

<table Border="1">

            <tr>     <th> Name </th>                              <th> Address </th>      <th colspan="2" > Contact </th>                         </tr>

            <tr>     <td rowspan="2" > Ram </td>       <td> Rampur </td>       <td> 1212121212 </td><td> 8888888888 </td> </tr>

            <tr>                                                                 <td> Rahimpur </td>          <td colspan="2"> 9898989898 </td>                         </tr>

</table>

The above script will generate the given web page.

Naming the Table

If you want to give a name to the table, the caption also speaks. You use <caption> tag for this. It is defined after the <table> tag. An example is given below.

<table Border="1">

            <caption> Name of table </caption>

            <tr>     <th> Name </th>                              <th> Address </th>      <th colspan="2" > Contact </th>                                      </tr>

            <tr>     <td rowspan="2" > Ram </td>       <td> Rampur </td>              <td> 1212121212 </td><td> 8888888888 </td> </tr>

            <tr>                                                                 <td> Rahimpur </td>          <td colspan="2"> 9898989898 </td>                         </tr>

</table>

The above script will generate the given web page.

HTML Table Tag

Tag

Description

<table>

Defines a table

<th>

Defines a header cell in a table

<tr>

Defines a row in a table

<td>

Define a cell in a table

<caption>

Defines a table caption

<colgroup>

Specifies a group of one or more column in a table for formatting

<col>

Specifies column properties for each column within a <colgroup> element

<thead>

Groups the header content in a table

<tbody>

Groups the body content in a table

<tfoot>

Groups the footer content in a table

 

HTML Code Example

<!DOCTYPE html>

<html>

            <head>

                        <title> HTML Table </title>

            </ head>

            <body>

                        <h1> HTML Tables Example</h1>

                        <table Border="1">

                                    <caption> Name of table </caption>

                                    <thead>

                                                <tr>    

                                                            <th> Name </th>

                                                            <th> Address </th>

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

                                                </tr>

                                    </thead>

                                    <tbody>

                                                <tr>

                                                            <td rowspan="2" > Ram </td>

                                                     <td> Rampur </td>

                                                            <td> 1212121212 </td>

                                                            <td> 8888888888 </td>

                                         </tr>

                                                <tr>

                                                            <td> Rahimpur </td>

                                                            <td colspan="2"> 9898989898 </td>

                                         </tr>

                                                <tr>

                                                            <td > Rohan </td>

                                                     <td> Rampur </td>

                                                            <td> 1212121212 </td>

                                                             <td> 8888888888 </td>

                                         </tr>

                                                <tr>

                                                            <td > Sohan </td>

                                                     <td> Rampur </td>

                                                            <td> 8888888888 </td>

                                                            <td> 8888888888 </td>

                                         </tr>

                                    </tbody>

                                    <tfoot>

                                                <tr>

                                                            <td colspan="2">    This is footer of a table </td>

                                                            <td colspan="2" >  4 Entries are there  </td>

                                                </tr>

                                    </tfoot>

                        </table>                    

            </body>

</html>

Output


HTML Tables

किसी भी data को structured form में represent करने के लिये आप tables use करते है। अपने webpage में tables include करके आप उसे ओर भी structured और attractive बना सकते है। HTML मे tables create करने के लिये आप <table> tag  युज करते है। इस tag का एक sub tag होता है जिसे <tr> table row tag कहते है। <tr> tag का भी एक sub tag होता है जिसे <td> table data tag  कहते है।

HTML में Tables बनाना

कोई भी table row और columns से मिलकर बनी होती है। इसलिये <table> tag के बाद row create  करने के लिये आप <tr> tag  युज करते है। आप जितनी rows create  करना चाहते है उतने ही <tr> tag define करते है। Rows create  करने के बाद आप rows  मे columns create करते है। Columns create  करने के लिये <td> tag का इस्तेमाल किया जाता है। आप जितने columns create करना चाहते है उतने ही <td> tags define करते है।

इसका उदाहरण नीचे दिया जा रहा है।

<table>

            <tr>     <td> पहली पंक्ति पहले कॉलम </td>         <td> पहली पंक्ति दूसरी कॉलम </td>                    </tr>

            <tr>     <td> दूसरी पंक्ति पहले कॉलम </td>        <td> दूसरी पंक्ति दूसरी कॉलम </td>                   </tr>

</table>

Table create करने के लिए आपको tags  का order हमेशा ध्यान रखना चाहिए। सबसे पहले <table> tag आता है। इसके बाद <tr> tag आता है।  फिर उसके बाद <th>  और <td> tags आते है। <th> और <td> tags हमेशा <tr> tags के अंदर ही आएंगे। एक बात आपको और ध्यान रखनी चाहिए की जब तक आप border attribute के द्वारा table की border define नहीं करते है तब तक table की border show नहीं होती है।

Table में Border लगाना

Table में Border लगाने के लिए Border attribute इस्तेमाल किया जाता है। इस attribute की value integer (1,2,3...) में होती है।  उदारण के लिए निचे देखे:

<table Border="1">

            <tr>     <td> पहली पंक्ति पहले कॉलम </td>         <td> पहली पंक्ति दूसरी कॉलम </td>                    </tr>

            <tr>     <td> दूसरी पंक्ति पहले कॉलम </td>        <td> दूसरी पंक्ति दूसरी कॉलम </td>                   </tr>

</table>

Table Headings बनाना

आप चाहे तो tables कि first row मे headings भी create कर सकते है। Heading text table के बाकी text से मोटा ओर बडा होता है। उदाहरण के लिए यदि आप कोई table create कर रहे है जो employees कि information store करती है तो आप Names ओर addresses आदि headings create कर सकते है। Heading create करने के लिये <th> tag युज किया जाता है। इसे table heading tag कहते है। इस tag मे आप जो text युज करते है वह webpage मे heading कि तरह show होती है। इस tag को <tr> tag के अंदर युज किया जाता है। इसका उदाहरण नीचे दिया जा रहा है।

<table Border="1">

            <tr>     <th> नाम </th>         <th> पता </th>                      </tr>

            <tr>     <td> राम </td>               <td> रामपुर </td>     </tr>

            <tr>     <td> रहीम </td>      <td> रहीमनपुर </td>           </tr>

</table>

COLSPAN Attribute

आप चाहे तो किसी एक row के column को एक से ज्यादा columns मे भी divide कर सकते है। इसके लिये आप उससे पहले वाले column मे colspan attribute define करते है। जिस column मे आप colspan define करते है वो एक column उतने ही columns की जगह घेरता है। दूसरे शब्दों में, अगर आप कॉलम को मिलाना चाहते है तो इसका इस्तेमाल कर सकते है। इसका उदाहरण नीचे दिया जा रहा है।

<table Border="1">

            <tr>     <th> नाम </th>         <th> पता </th>          <th colspan="2" > संपर्क </th>                             </tr>

            <tr>     <td> राम </td>               <td> रामपुर </td>     <td> 1212121212 </td><td> 8888888888 </td>             </tr>

            <tr>     <td> श्याम </td>    <td> रहीमनपुर </td>           <td colspan="2"> 9898989898 </td>                           </tr>

</table>

उपर दिए गए उदाहरण को देखिये राम के pass 2 mobile numbers है। लेकिन श्याम के pass एक ही mobile number है। यदि आप normally table create करेंगे तो श्याम वाली row में एक column की जगह खाली बच जाएगी। ऐसे में table बिलकुल भी अच्छी नहीं लगेगी। यदि आप चाहते है की श्याम वाली row का एक column ऊपर वाली row के दो columns को cover करे तो आप उस column में colspan attribute यूज़ करते है और जितने columns आप इस एक column से cover करना चाहते है उतनी ही integer values देते है। जैसे की मैने उपर दिए हुए example श्याम वाली row के एक column से राम वाली row के 2 columns cover किये है। इस script के द्वारा निचे दिया गया web page generate होगा।

ROWSPAN Attribute

ROWSPAN attribute भी colspan की तरह ही होता है। इसे आप <tr> tag में define करते है। इस attribute की आप जितनी values  देते है वह एक row  उतने ही row  की जगह घेरती है। दूसरे शब्दों में, अगर आप row  को मिलाना चाहते है तो इसका इस्तेमाल कर सकते है।  इसका उदाहरण नीचे दिया जा रहा है।

<table Border="1">

            <tr>     <th> नाम </th>                                 <th> पता </th>          <th colspan="2" > संपर्क </th>                                    </tr>

            <tr>     <td rowspan="2" > राम </td>              <td> रामपुर </td>     <td> 1212121212 </td><td> 8888888888 </td>             </tr>

            <tr>                                                                 <td> रहीमनपुर </td>           <td colspan="2"> 9898989898 </td>                         </tr>

</table>

ऊपर दी गयी script निचे दिया गया web page generate करेगी।

Naming The Table

आप चाहे तो table का कोई नाम दे सकते है जिसे caption  भी बोलते है। इसके लिए आप <caption> tag यूज़ करते है। इसे <table> tag के बाद define किया जाता है। इसका उदाहरण नीचे दिया गया है।

<table Border="1">

            <caption> तालिका का नाम </caption>

            <tr>     <th> नाम </th>                                 <th> पता </th>          <th colspan="2" > संपर्क </th>                                    </tr>

            <tr>     <td rowspan="2" > राम </td>              <td> रामपुर </td>     <td> 1212121212 </td><td> 8888888888 </td>             </tr>

            <tr>                                                                 <td> रहीमनपुर </td>           <td colspan="2"> 9898989898 </td>                         </tr>

</table>

 

ऊपर दी गयी script निचे दिया गया web page generate करेगी।

HTML Table Tag

Tag

विवरण

<table>

एक तालिका परिभाषित करता है

<th>

एक तालिका में हेडर सेल परिभाषित करता है

<tr>

तालिका में एक पंक्ति को परिभाषित करता है

<td>

किसी तालिका में एक सेल को परिभाषित करें

<caption>

तालिका कैप्शन परिभाषित करता है

<colgroup>

तालिका में स्वरूपण(formatting) के लिए एक या अधिक column का एक समूह निर्दिष्ट करता है

<col>

<colgroup> तत्व के भीतर प्रत्येक column के लिए column गुण निर्दिष्ट करता है

<thead>

एक तालिका में हैडर सामग्री समूह

<tbody>

एक तालिका में body की सामग्री समूह

<tfoot>

एक तालिका में footer की सामग्री समूह

 

HTML Code Example

<!DOCTYPE html>

<html>

            <head>

                        <title> HTML तालिका ( Table) </title>

            </ head>

            <body>

                        <h1> HTML तालिका </h1>

                                                                        <table Border="1">

                                    <caption> तालिका का नाम </caption>

                                    <thead>

                                                <tr>    

                                                            <th> नाम </th>

                                                            <th> पता </th>

                                               <th colspan="2" > संपर्क </th>

                                                </tr>

                                    </thead>

                                    <tbody>

                                                <tr>

                                                            <td rowspan="2" > राम </td>

                                                     <td> रामपुर </td>

                                                            <td> 1212121212 </td>

                                                            <td> 8888888888 </td>

                                         </tr>

                                                <tr>

                                                            <td> रहीमनपुर </td>

                                                            <td colspan="2"> 9898989898 </td>

                                         </tr>

                                                <tr>

                                                            <td > रोहन </td>

                                                     <td> रामपुर </td>

                                                            <td> 1212121212 </td>

                                                             <td> 8888888888 </td>

                                         </tr>

                                                <tr>

                                                            <td > सोहन </td>

                                                     <td> रामपुर </td>

                                                            <td> 8888888888 </td>

                                                            <td> 8888888888 </td>

                                         </tr>

                                    </tbody>

                                    <tfoot>

                                                <tr>

                                                            <td colspan="2">  यह एक तालिका का पादलेख (footer) है </td>

                                                            <td colspan="2" >  4 प्रविष्टियां हैं </td>

                                                </tr>

                                    </tfoot>

                        </table>                    

            </body>

</html>

Output

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h