Table management in html


  • HTMLમાં કોપ્ટકનો ઉપયોગ લખાણને માળખાગતરૂપે રજૂ કરવા માટે થાય છે. અર્થાત્ કોષ્ટકનો ઉપયોગ દસ્તાવેજના ગોઠવણીના ટૂલ તરીકે પણ થાય છે. કોષ્ટકમાં માહિતી લખાણ અથવા ચિત્ર સ્વરૂપે પણ હોઈ શકે છે.

1. <table> ટૅગ ટેબલ બનાવવા માટેનો મુખ્ય ટેગ 
2. <tr> ટૅગ : ટેબલની આડી હાર વ્યાખ્યાયિત કરતો ટેગ 
3. <th> ટૅગ : ટેબલના પ્રથમ આડી હારના મથાળા માટેનો ટગ અને <td>: કોષ્ટકના ડેટા (માહિતી) માટેનો ટંગ અથવા ઊભી હરોળ વ્યાખ્યાયિત કરતો ટેગ 
4. <caption> ટંગ ટેબલને નામ આપવા માટેનો ટેગ 
1 <table> ટૅગ તથા તેના ગુણધર્મો : <table> ટંગ કોષ્ટકને વ્યાખ્યાયિત કરે છે. તેના વિવિધ ગુણધર્મો નીચે મુજબ છેઃ

(1) Border: <table> ટંગનો border ગુણધર્મ કોષ્ટકની ફરતે ચારે બાજુ તેમજ દરેક ખાનાની આસપાસ કિનારી દોરે છે. કિનારીની પહોળાઈ પિક્સેલ સ્વરૂપમાં આપવામાં આવે છે. Border = "0" કિંમત આપવાથી કોઈ કિનારી દેખાશે નહીં.
(2) Bgcolor: <table> ટૈગના bgcolor ગુણધર્મ કોષ્ટકના પાછળના ભાગનો રંગ ગોઠવવા માટેનું કાર્ય કરે છે. આ ગુણધર્મની કિંમત તરીકે કોઈ રંગનું નામ અથવા છ આંકડાની સોળ-અંકી સંખ્યા લેખન-પદ્ધતિનો શકાય છે.
(3) cellpadding: આ ગુણધર્મનો ઉપયોગ ટેબલનાં બે ખાનાઓની કિનારી અને તેના લખાણની વચ્ચે થોડી જગ્યા મૂકવા માટે કરવામાં આવે છે. નામ મુજબ Cellpadding ગુણધર્મ ટેબલનાં ખાનાઓની દરેક દીવાલ(Wall of cell)ની અંદરની બાજુ થોડી જગ્યાની ગાદી (Pad) બનાવે છે. આ ગુણધર્મની કિંમત ટકાવારી કે પિક્સેલમાં આપવામાં આવે છે

(4) cellspacing: આ ગુણધર્મનો ઉપયોગ કોષ્ટકનાં ખાનાઓની વચ્ચે જગ્યા છોડવા માટે થાય છે. જગ્યાની કિંમત ટકાવારી અથવા પિક્સેલમાં દર્શાવવામાં આવે છે.
(6) frame : આ ગુણધર્મ કોષ્ટકની છેક બહારની કિનારીને નિયંત્રિત કરે છે.
(7) rules : આ ગુણધર્મ કોષ્ટકની અંદરની કિનારીની રજૂઆતને નિયંત્રિત કરે છે.
(8) align : આ ગુણધર્મનો ઉપયોગ દસ્તાવેજમાં ટેબલને ડાબી બાજુ, મધ્યમાં કે જમણી બાજુ દર્શાવવા માટે થાય છે. align ગુણધર્મની "left" કિંમત ડાબી બાજુના હાંસિયાથી કોષ્ટકને દર્શાવે છે. પૂર્વનિર્ધારિત રીતે કોષ્ટકની ગોઠવણ ડાબી બાજુથી જ દર્શાવવામાં આવે છે. align ગુણધર્મની "center" કિંમત ટેબલને ડાબી તથા જમણી બાજુના હાંસિયાના મધ્ય ભાગમાં દર્શાવે છે. align ગુણધર્મની "right" કિંમત ટેબલ જમણી બાજુના હાંસિયાને અડે તે રીતે દર્શાવે છે.
(9) dir: આ ગુણધર્મ કોષ્ટકમાં દર્શાવાતા લખાણની દિશા નક્કી કરે છે.
(10) summary : આ ગુણધર્મ કોષ્ટકનું વર્ણન રજૂ કરે છે.
2. <tr> ટૅગ અને તેના ગુણધર્મો ઃ કોષ્ટકની હારને બે ભાગમાં વહેંચવામાં આવે છે: (1) મથાળા માટેની હાર અને (2) માહિતી માટેની હાર. કોષ્ટકમાં આડી હરોળ દર્શાવવા <tr> તથા </tr> ટંગનો ઉપયોગ કરવામાં આવે છે તેના વિવિધ ગુણધર્મો નીચે મુજબ છેઃ
(1) align : આ ગુણધર્મનો ઉપયોગ કોષ્ટકના હારના દરેક ખાનાની માહિતીની ગોઠવણી માટે થાય છે.

♦ align ગુણધર્મની "left" કિંમત લખાણને ખાનાની ડાબી બાજુ ગોઠવે છે. પૂર્વનિર્ધારિત રીતે લખાણ ખાનાની ડાબી બાજુ જ ગોઠવાય છે
♦ align ગુણધર્મની "right" કિંમત લખાણને ખાનાની જમણી તરફ ગોઠવે છે
♦ align ગુણધર્મની “center” કિંમત લખાણને ખાનાની મધ્યમાં ગોઠવે છે.
♦ align ગુણધર્મની "Justly" કિંમત ખાનાના લખાણને એ રીતે ગોઠવે છે કે તે આખા ખાનામાં સમાઈ જાય.

" align ગુણધર્મની "char" કિંમત ખાનાનું લખાણ કોઈ એક ચોક્કસ અક્ષરની પ્રથમ ઉપસ્થિતિની આસપાસ ગોઠવે છે. આવા નક્કી કરેલ ચોક્કસ અક્ષરને ધરી અક્ષર (Axis character) કહે છે. આ ગુણધર્મ માટેનો ધરી અક્ષર સામાન્ય સંજોગોમાં દશાંશ-ચિહ્ન (.) હોય છે. લખાણની ગોઠવણી માટે char તરીકે દશાંશ-ચિહ્ન(char = ".")નો ઉપયોગ કરવાથી ખાનામાં રહેલી દશાંશ સંખ્યાઓ નીચે દર્શાવ્યા મુજબ દશાંશ સ્થાનને આધારે ગોઠવાય છે :2) bgcolor : આ ગુણધર્મનો ઉપયોગ કોષ્ટકની કોઈ એક હારને ચોક્કસ રંગથી દર્શાવવા માટે થાય છે. આ ગુણધર્મની કિંમત તરીકે કોઈ ચોક્કસ રંગનું નામ અથવા છ આંકડાની સંખ્યા સોળ અંકની સંખ્યા લેખન-પદ્ધતિનો કોડ આપી શકાય છે
(૩) valign : આ ગુણધર્મ હરોળના દરેક ખાનાના લખાણની ઊભી સમાંતર ગોઠવણ કરે છે.

♦ valign ગુણધર્મની "top" કિંમત લખાણને ખાનાની ટોચના ભાગ તરફ ગોઠવે છે
♦ valign ગુણધર્મની "middle" કિંમત લખાણને ખાનાની મધ્યમાં ગોઠવે છે.
♦ valign ગુણધર્મની "bottom" કિંમત લખાણને ખાનાની નીચે તરફ ગોઠવે છે.
♦ valign ગુણધર્મની "baseline" કિંમત લખાણને એ રીતે ગોઠવે છે કે જેથી દરેક ખાનામાંના લખાણની પ્રથમ લીટી એ જ આડી સમાંતર લીટીથી શરૂ થાય.
3. <th> તથા <td>ટંગના ઉપયોગથી ખાનાઓની માહિતીની રજૂઆતઃ કોષ્ટકનું દરેક ખાનું <th> અથવા : <td> ટૅગ દ્વારા રજૂ થાય છે. કોષ્ટકમાં મથાળા દર્શાવવા માટે <th> (Table header) ટેંગનો ઉપયોગ કરવામાં આવે છે.                       <th> ઢંગના લખાણને મોટે ભાગે બોલ્ડ અક્ષરોમાં, ખાનાને આડા સમાંતર મધ્યમાં ગોઠવીને દર્શાવાય છે
કોષ્ટકની માહિતી દર્શાવવા માટે <td> ટૅગનો ઉપયોગ કરવામાં આવે છે. <td> ટૅગ લખાણને સામાન્ય કદના અક્ષરોમાં તથા ખાનાને સમાંતર ડાબી બાજુ ગોઠવીને દર્શાવે છે.
  • <th> અને <td> બંને ટૅગ એકસરખા ગુણધર્મો ધરાવે છે અને આ ગુણધર્મની અસર એક ખાના પૂરતી જ સીમિત રહે છે. <th> અને <td> ટૅગના ગુણધર્મોની અસર આખા કોષ્ટક માટે કરેલ ગોઠવણીની અસર કે આડી હરોળ માટે કરેલ ગોઠવણીની અસરને દબાવી દે છે.

<th> અને <td> ટૅગના વિવિધ ગુણધર્મો નીચે મુજબ છે :


(1) abbr: ખાનાની માહિતીનું ટૂંકું સ્વરૂપ પૂરું પાડે છે
(2) align : ખાનાની માહિતીને ગોઠવે છે.
(3) bgcolor: ખાનામાં બૅકગ્રાઉન્ડ ઉમેરે છે.
(4) char : ખાનાના લખાણને કોઈ ચોક્કસ અક્ષરની પ્રથમ ઉપસ્થિતિની આસપાસ ગોઠવે છે
(5) colspan : ખાનું કેટલા ખાના સુધી વિસ્તરી શકે તે સંખ્યા દર્શાવે છે.
(6) headers : ખાનાને સંબંધિત મથાળું દર્શાવે છે.
(7) height : ખાનાની ઊંચાઈને ગોઠવે છે.
(8) nowrap : લખાણને ખાનાની અંદર જ આપમેળે નવી લાઇન પર જતાં અટકાવે છે.
(9) rowspan : ખાનું કેટલી આડી હરોળ સુધી વિસ્તરી શકે તે સંખ્યા દર્શાવે છે.
(10) valign : ખાનાનું લખાણ ઊભું સમાંતર ગોઠવે છે.
(11) width : ખાનાની પહોળાઈ ગોઠવે છે
  • 4. <caption > ટૅગ : ટેબલને નામ આપવા માટે <captuon> ટૅગનો ઉપયોગ કરવામાં આવે છે. કોષ્ટકનું નામ દર્શાવે છે કે કોષ્ટક શેના માટે છે. ઉદાહરણ તરીકે પરિણામના હેતુ માટે, સમયપત્રક માટે. મોટા ભાગના બ્રાઉઝર <caption> ટંગના લખાણને કોષ્ટકના ઉપરના ભાગે મધ્યમાં ગોઠવીને દર્શાવે છે.

  • <table>, <tr>, <th><td> ટૈગના વિવિધ ગુણધર્મોનો ઉપયોગ દર્શાવતું HTML કોડિંગ અને
  • પરિણામ દર્શાવેલ છે : જે આવતી પોસ્ટ મા આવશે

  • Comment & share

  • Thank you ☺️





  • Gujju Technology

  • Dev Gajjar

  • Html videos

  • Html programming videos

  • How do you manage a table in HTML

  • What are the 4 basic HTML table tags?

  • HTML language

  • Hyper text markup language

  • Easy programming language

  • Easy coding

  • Html theory

  • Html programming pdf

  • #html

  • #programming

  • #tech videos




    1. <table>: Defines a table element.
    2. <tr>: Defines a table row.
    3. <th>: Defines a table header cell.
    4. <td>: Defines a table data cell.
    5. <thead>: Defines the header section of a table.
    6. <tbody>: Defines the body section of a table.
    7. <tfoot>: Defines the footer section of a table.
    8. <caption>: Defines a caption for a table.
    9. <colgroup>: Specifies a group of one or more columns in a table for formatting.