HTML نى ئەمەلىيەتتە تەرەققىي قىلدۇرۇش
مۇرەككەپ جەدۋەل قۇرۇلمىسى
مۇرەككەپ جەدۋەل قۇرۇلمىسى
ئاساسىي جەدۋەللەر سانلىق مەلۇماتلارنى رەتلىك كۆرسىتىشنىڭ ياخشى ئۇسۇلى، ئەمما بەزىدە سانلىق مەلۇماتلارنىڭ مۇناسىۋىتى تېخىمۇ مۇرەككەپ بولىدۇ. كاتەكچىلەرنى بىرلەشتۈرۈش ياكى قۇرۇلمىنى تېخىمۇ مەنالىق قىلىشقا توغرا كېلىدۇ. بۇ بۆلۈمدە، بىز HTML جەدۋەللىرىنىڭ ئاددىي قۇر ۋە ستونلاردىن ھالقىغان ئىقتىدارلىرىنى چوڭقۇرلاپ ئۆگىنىمىز.
كاتەكچىلەرنى بىرلەشتۈرۈش: colspan ۋە rowspan
بەزىدە، بىر كاتەكچىنىڭ كۆپ ستون ياكى قۇرنى ئىگىلىشىنى ئۈمىد قىلىمىز. مەسىلەن، بىر باشلىق بىر نەچچە ستونغا ئورتاق بولۇشى مۇمكىن. بۇنى ئەمەلگە ئاشۇرۇش ئۈچۈن colspan ۋە rowspan سۈپەتلىرىنى ئىشلىتىمىز.
colspan بىر كاتەكچىنىڭ گورىزونتال ھالدا قانچە ستوننى ئىگىلەيدىغانلىقىنى بەلگىلەيدۇ. مەسىلەن، colspan="2" دېگەنلىك، بۇ كاتەكچە ئىككى ستوننىڭ كەڭلىكىنى ئىگىلەيدۇ دېگەنلىكتۇر.
<table>
<tr>
<th colspan="2">ئىسىم</th>
<th>يېشى</th>
</tr>
<tr>
<td>ئەخمەت</td>
<td>جان</td>
<td>30</td>
</tr>
<tr>
<td>فاتىمە</td>
<td>گۈل</td>
<td>28</td>
</tr>
</table>
يۇقىرىدىكى مىسالدا، «ئىسىم» ماۋزۇسى «ئەخمەت» ۋە «جان» دىن ئىبارەت ئىككى ستوننىڭ ئۈستىدە كۆرسىتىلىدۇ.
ئوخشاش شەكىلدە، rowspan بىر كاتەكچىنىڭ ۋېرتىكال ھالدا قانچە قۇرنى ئىگىلەيدىغانلىقىنى بەلگىلەيدۇ. بۇ ئوخشاش تۈردىكى سانلىق مەلۇماتلارنى گۇرۇپپىلاشقا ناھايىتى پايدىلىق.
<table>
<tr>
<th>ئىسىم</th>
<td>ئەخمەت</td>
</tr>
<tr>
<th rowspan="2">تېلېفون</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-5678</td>
</tr>
</table>
colspanۋەrowspanنى ئىشلەتكەندە، بىرلەشتۈرۈلگەن كاتەكچىلەر سەۋەبىدىن كېيىنكى قۇرلاردا ئارتۇق<td>ياكى<th>بەلگىلىرىنى ئۆچۈرۈۋېتىشنى ئۇنۇتماڭ، بولمىسا جەدۋەل قۇرۇلمىسى قالايمىقانلىشىپ كېتىدۇ.
جەدۋەلگە مەنا قوشۇش
مۇرەككەپ جەدۋەللەرنى تېخىمۇ ئېنىق ۋە باشقۇرۇشقا ئاسان قىلىش ئۈچۈن، HTML جەدۋەلنى ماۋزۇ (<thead>)، گەۋدە (<tbody>) ۋە ئاستىنقى قىسىم (<tfoot>) دەپ ئۈچ قىسىمغا ئايرىش ئىقتىدارى بىلەن تەمىنلەيدۇ. بۇ بەلگىلەر توركۆرگۈچ ۋە غا جەدۋەلنىڭ قۇرۇلمىسىنى تېخىمۇ ياخشى چۈشەندۈرۈپ، نى كۈچەيتىدۇ.
<table>
<thead>
<tr>
<th>مەھسۇلات</th>
<th>باھاسى</th>
</tr>
</thead>
<tbody>
<tr>
<td>ئالما</td>
<td>💲5.00</td>
</tr>
<tr>
<td>ئۈزۈم</td>
<td>💲7.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ئومۇمىي</td>
<td>💲12.50</td>
</tr>
</tfoot>
</table>
بۇ بەلگىلەر جەدۋەلنىڭ كۆرۈنۈشىنى بىۋاسىتە ئۆزگەرتمەيدۇ، ئەمما ئۇلار توركۆرگۈچكە جەدۋەلنىڭ قايسى قىسمى ماۋزۇ، قايسى قىسمى سانلىق مەلۇمات ۋە قايسى قىسمى خۇلاسە ئىكەنلىكىنى ئېنىق ئېيتىپ بېرىدۇ. بۇ چوڭ جەدۋەللەرنى بېسىپ چىقارغاندا ھەر بىر بەتتە ماۋزۇنى تەكرارلاش ياكى CSS بىلەن ئالاھىدە ئۇسلۇب بېرىش قاتارلىق ئىشلارغا قولايلىق يارىتىدۇ.
زىيارەت قولايلىقلىقىنى ئاشۇرۇش: scope سۈپىتى
مۇرەككەپ جەدۋەللەردە، ھەر بىر سانلىق مەلۇمات كاتەكچىسىنىڭ قايسى ماۋزۇغا تەۋە ئىكەنلىكىنى ئېنىق كۆرسىتىش ئىنتايىن مۇھىم. بۇ بولۇپمۇ ئېكران ئوقۇغۇچلار ئۈچۈن زۆرۈر. scope سۈپىتى <th> بەلگىسىگە ئىشلىتىلىپ، بۇ ماۋزۇنىڭ بىر ستون (col) ياكى بىر قۇر (row) ئۈچۈن ئىكەنلىكىنى بەلگىلەيدۇ.
| قىممىتى | چۈشەندۈرۈلۈشى |
|---|---|
col | بۇ ماۋزۇ كاتەكچىسى ئۆزى تۇرغان ستوندىكى بارلىق كاتەكچىلەر ئۈچۈن ماۋزۇ ھېسابلىنىدۇ. |
row | بۇ ماۋزۇ كاتەكچىسى ئۆزى تۇرغان قۇردىكى بارلىق كاتەكچىلەر ئۈچۈن ماۋزۇ ھېسابلىنىدۇ. |
تۆۋەندىكى مىسالدا، بىز scope نى <thead> دىكى ماۋزۇلارغا ۋە ھەر بىر قۇرنىڭ بىرىنچى كاتەكچىسىگە قانداق ئىشلىتىدىغانلىقىنى كۆرەلەيمىز:
<table>
<thead>
<tr>
<th></th>
<th scope="col">1-چارەك</th>
<th scope="col">2-چارەك</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">كىرىم</th>
<td>10,000</td>
<td>12,000</td>
</tr>
<tr>
<th scope="row">چىقىم</th>
<td>8,000</td>
<td>9,000</td>
</tr>
</tbody>
</table>
بۇنداق قىلغاندا، ئېكران ئوقۇغۇچ ئىشلەتكۈچى 12,000 دىگەن سانغا كەلگەندە، ئۇنىڭ «2-چارەك» نىڭ «كىرىم»ى ئىكەنلىكىنى ئېنىق ئوقۇپ بېرەلەيدۇ. بۇ ئاددىي سۈپەت تور مەزمۇنىنى ھەممە ئادەم ئۈچۈن تېخىمۇ قولايلىق قىلىدۇ.
HTML جەدۋەلدە، colspan سۈپىتىنىڭ رولى نېمە؟
HTML جەدۋەلىنى قۇرۇلمىلىق بۆلەكلەرگە (ماۋزۇ, گەۋدە, ئاستىنقى قىسىم) ئايرىش ئۈچۈن قايسى بەلگىلەر ئىشلىتىلىدۇ؟
بۇ ئاددىي ئەمما كۈچلۈك بەلگە ۋە سۈپەتلەر ئارقىلىق، سىز سانلىق مەلۇماتلارنى ئېنىق، مەنالىق ۋە زىيارەت قىلىشقا قولايلىق شەكىلدە كۆرسىتەلەيسىز.