प्रौद्योगिकी साझेदारी

[HTML परिचयः] पाठः १० - सारणी अर्थात् सारणी टैग

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

अस्मिन् विभागे वयं HTML मध्ये सारणीनां विषये वदामः । यथा, वयं प्रायः छात्रस्य रिपोर्ट् कार्ड् पश्यामः, यथा excel cell by cell एतानि सर्वाणि सारणीनि सन्ति ।

सारणीयाः लेबलनाम अस्ति पीठिका 。

सामग्रीसूची

१ सारणीयां केचन उपटैग्स्

१.१ शीर्षकक्षेत्रम्

१.२ सारणीसामग्रीक्षेत्रम्

१.३ पङ्क्तयः स्तम्भाः च

२ किञ्चित् अभ्यासः

२.१ सरलं प्रतिलेखं कुरुत

२.२ सीमारेखाः योजयन्तु

२.३ क्रॉस्-पङ्क्तिः

२.४ स्तम्भान् लङ्घनम्

१ सारणीयां केचन उपटैग्स्

१.१ शीर्षकक्षेत्रम्

यथा प्रतिलेखे उपरि शीर्षकं भवितुमर्हतिstudent ID、छात्रस्य नाम、विषयः、अंक、समग्रं परिणामःएतानि क्षेत्राणि, सम्यक् ।

एतानि क्षेत्राणि table header मध्ये स्थापितानि भविष्यन्ति, यस्य thead tag आवश्यकम् अस्ति ।

१.२ सारणीसामग्रीक्षेत्रम्

ततः सारणीयाः सामग्रीक्षेत्रे अधिकविस्तृतदत्तांशस्य आवश्यकता भवति उदाहरणार्थं छात्रसङ्ख्या 001, नाम झाङ्ग सैन्, विषयः गणितः, स्कोरः च 80. यदि अन्ये विषयाः नास्ति तर्हि कुलाङ्कः is 80. यदि अन्ये विषयाः सन्ति यथा विषयाः, तान् योजयतु, किम्?

एताः सामग्रीः सारणीसामग्रीक्षेत्रे स्थापिताः भविष्यन्ति, यस्य कृते tbody टैग् आवश्यकम् अस्ति ।

१.३ पङ्क्तयः स्तम्भाः च

सारणीः पङ्क्तिपङ्क्तौ विभक्ताः भवन्ति, ततः स्तम्भस्तम्भयोः छिन्नाः भवन्ति, ततः परं प्रत्येकं खण्डं कोष्ठकं, लघुचतुष्कोणं, लघुचतुष्कोणं च भवति ।

अपि च, द्रष्टव्यम् - १.पङ्क्तयः स्तम्भाः सन्ति, एतत् स्मर्तव्यम्。

पङ्क्तिलेबलनाम अस्ति त्र॰  。

शीर्षके कोष्ठलेबलं भवति थ , सारणीशरीरक्षेत्रस्य कोष्ठलेबलं भवतितद् 。

२ किञ्चित् अभ्यासः

२.१ सरलं प्रतिलेखं कुरुत

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

२.२ सीमारेखाः योजयन्तु

इदं प्रदर्शनं किञ्चित् अव्यवस्थितम् अस्ति, अतः सीमारेखाः योजयित्वा सारणी उत्तमं दृश्यते ।भवन्तः एकं योजयितुं शक्नुवन्तिसीमा="1" विशेषतासेटिंग्स् कृते अधोलिखितं कोडं पश्यन्तु, ततः जालपुटं ताजगीकृत्य पश्यन्तु यत् एतत् बहु उत्तमं दृश्यते वा इति ।

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

२.३ क्रॉस्-पङ्क्तिः

अवश्यं वयं क्रॉस्-रो डिस्प्ले अपि निर्मातुम् अर्हति यथा, झाङ्ग सैन्, ली सी च प्रथमश्रेण्याः सन्ति, तान् एकस्मिन् एव पङ्क्तौ स्थापयित्वा, ततः प्रथमश्रेणीयाः छात्राः २ पङ्क्तयः व्याप्नुवन्ति ।

ततः द्वितीयं वर्गं योजयन्तु, यत्र वाङ्ग वु, झाओ लिउ च वर्गे सन्ति, तेषां कृते विशालपङ्क्तिं व्याप्नुवन्तु, येन द्वितीयवर्गस्य द्वौ लघुपङ्क्तिद्वयं भविष्यति ।

अत्र किं सेट् कर्तव्यम् पङ्क्तिविस्तारः गुणाः ।

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

उपरिष्टाद् कोड् दृष्ट्वा वयं td सेलस्य कृते rowspan एट्रिब्यूट् सेट् कुर्मः, ततः सः क्लास् 1 इत्यस्य द्वितीयः सेल् अपि अस्ति, अतः समानं td कोड् योजयितुं आवश्यकता नास्ति ।

२.४ स्तम्भान् लङ्घनम्

क्रॉस्-स्तम्भः समानलक्षणयुक्तान् अनेकस्तम्भान् निर्दिशति, अतः एकस्य स्तम्भस्य सूचनां प्रदर्शयितुं पर्याप्तम् । यथा अधुना एव पङ्क्तयः पारं भवति, तथैव उद्देश्यं न अस्ति यत् झाङ्ग सैन्, ली सी च द्वौ अपि प्रथमवर्गे स्तः, अतः अनावश्यकप्रदर्शनं परिहरितुं, यतः तेषां सर्वेषां सूचनाविशेषणानि समानानि सन्ति, ते द्वौ अपि प्रथमवर्गौ स्तः, अतः display Class 1, केवलं पङ्क्तिं पारं कुर्वन्तु।

स्तम्भान् लङ्घयितुं अनेकस्तम्भान् एकत्र विलीनीकरणम् इति अर्थः । उदाहरणं गृह्णीमः।

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

हाहा, उपर्युक्तः संहिता, .वस्तुतः अहम् अस्य स्क्रीनशॉट् इत्यस्य प्रभावं प्राप्तुं न शक्नोमि ।, यदि भवान् कोडं प्राप्य समस्या अस्ति इति पश्यति तर्हि स्मर्यताम्माम् वदतुअहो।

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल