Responsive Advertisement

"HTML Tables and Data Formatting"

  • "Miisaska HTML iyo Qaabeynta Xogta"


    • Tags-ka Kala Qaybinta Tiirarka (Column Grouping Tags)



    *\<COL>** tag wuxuu loo isticmaalaa in lagu kala qaybiyo tiirarka miiska si loogu fuliyo qaabayn (formatting). **\<COL>** tag waa mid faa'iido leh haddii aad rabto inaad qaabayn ku sameyso tiirar dhan halkii aad mid-mid ugu samayn lahayd unug kasta iyo saf kasta. **\<COL>** waxaa kaliya lagu isticmaali karaa gudaha tag-ka miiska (**\<TABLE>**).  



    **Astaamaha \<COL> tag:**  

    | **Astaanta** | **Qiimaha**          | **Sharaxaada**                              |  

    |--------------|---------------------|--------------------------------------------|  

    | Align        | Left, right, center | Waxay u dhigtaa nuxurka tiirarka sida loo calaamadiyay. |  

    | Span         | Number             | Waxay qeexdaa tirada tiirar ee uu tiirku u kala qaybsan yahay. |  

    | Bgcolor      | Midabka magaca ama qiimaha hexadecimal | Waxay dejisaa midabka asalka ah ee tiirarka. |  


    Fiiro gaar ah:

    <COLGROUP>** tag waxay la mid tahay **\<COL>** marka la eego isticmaalka iyo astaamaha. Labaduba waa tags faaruq ah (empty tags).  




    Tags-ka Kala Qaybinta Safafka (Row Grouping Tags)

    Waxaa jira saddex tags oo loo isticmaalo in lagu abuuro koox safaf ah: **\<THEAD>, \<TBODY>,** iyo **\<TFOOT** (dhamaantood waa tags koontaynar ah).  


    Tags-yadan waa kuwo faa'iido leh haddii aad rabto inaad qaabayn u samayso safaf dhan halkii aad mid-mid ugu samayn lahayd unug kasta ama saf kasta. Waxay kaliya ka shaqeeyaan gudaha tag miis ah (**\<TABLE>**). Isticmaal **\<TR>** iyo **\<TD>** gudaha tags-yada safka.  


    Astaamaha tags-ka kala qaybiya safafka:

    | **Astaanta** | **Qiimaha**             | **Sharaxaada**                          |  

    |--------------|------------------------|----------------------------------------|  

    | Align        | Left, right, center    | Waxay u dhigtaa nuxurka safafka sida loo calaamadiyay. |  

    | Valign       | Top, middle, bottom    | Waxay si toosan u dhigtaa nuxurka safka. |  

    | Bgcolor      | Magaca midabka ama hexadecimal | Waxay dejisaa midabka asalka ah ee safka. |  


    Fiiro gaar ah:

     Maadaama tags-yadan cusub yihiin, daalacashada gaboobay waxay iska indhatiri karaan, laakiin waa hab fiican inaad ku darto si mustaqbalka loogu isticmaalo.  



    \<CAPTION> Tag

    Tag-ga **\<CAPTION>** wuxuu kuu ogolaanayaa inaad abuurto sharaxaad fudud oo dhinac ka raacda miiska. Waa inuu si toos ah ugu xigaa tag-ka bilowga ah ee **\<TABLE>**, ka hor inta aan la bilaabin safka ugu horreeya ee miiska.  




    Miisaska Isku-dhafan (Nested Tables)

    Markaad abuurayso qaabeymo waaweyn oo adag, waxaa laga yaabaa inaad dhib kala kulanto inaad si buuxda ugu tiirsanaato astaamaha **ROWSPAN** iyo **COLSPAN** si aad u samayso qaabeynta aad rabto. Xaaladahaas, waxaa fiican inaad isticmaasho miisas isku-dhafan halkii aad isticmaali lahayd astaamaha balaarinta.  


    **Tusaale:**  

    ```html

    <BODY>

      <TABLE border="1" cellspacing="0" cellpadding="4">

        <CAPTION>Miisaska isku-dhafan</CAPTION>

        <TR>

          <TD>Ahmed</TD><TD>Mohamed</TD>

        </TR>

        <TR>

          <TD>

            <TABLE border="1" cellspacing="0" cellpadding="4">

              <TR>

                <TD>Warsame</TD><TD>Jama</TD><TD>Farah</TD>

              </TR>

            </TABLE>

          </TD>

          <TD>Sahal</TD>

        </TR>

        <TR>

          <TD>Faduma</TD><TD>Adam</TD>

        </TR>

      </TABLE>

    </BODY>

    ```  



    Xeerarka Mudnaanta (Rule Precedence):

    Fahamka sida mudnaanta u shaqeyso ee HTML waa muhiim si aad ugu abuuri karto qoraal waxtar leh. Mudnaantu waxay khuseysaa marka waxyaabo badan isku dayaan inay saameeyaan isla astaanta.  


    **Tusaale:**  

    ```html

    <TABLE bgcolor="Pink">

      <TR bgcolor="Purple">

        <TD bgcolor="Orange">Hello World</TD>

      </TR>

    </TABLE>

    ```

    Dhammaan saddexda heer waxay isku dayayaan inay qeexaan midabka asalka ee “Hello World.” Sida caadiga ah, daalacashada waxay aqbashaa qeexidda tag-ga ugu hooseeya; tusaalahan, waa tag-ga **\<TD>**, sidaas darteed midabka asalka wuxuu noqon doonaa Orange.  


    Waxaan kuu soo koobayaa qoraalkaaga si uu u noqdo mid macno badan oo ku saabsan isticmaalka tags-yada miiska ee HTML, anigoo u tarjuman Af-Soomaali:**




    ### **\<TR> Tag**  

    Tag-ga **\<TR>** wuxuu qeexaa bilowga saf cusub oo miiska ah. Saf walba waxaad u samayn kartaa qaabeyn adoo adeegsanaya astaamaha hoos ku xusan:  


    Astaamaha \<TR>:

    | **Astaanta**  | **Sharaxaada**                                                                                     |  

    |---------------|---------------------------------------------------------------------------------------------------|  

    | **BGCOLOR**   | Waxay dejisaa midabka asalka ee safka.                                                             |  

    | **ALIGN**     | Waxay dejisaa isku xigxiga tooska ah ee xogta safka gudihiisa (Qiimayaal ansax ah: *left, right, center*). |  

    | **VALIGN**    | Waxay dejisaa isku xigxiga toosan ee xogta safka gudihiisa (Qiimayaal ansax ah: *middle, top, bottom*).   |  




    ### **\<TD> iyo \<TH> Tags**  

    Ka dib markaad bilowdo miiska adigoo adeegsanaya **\<TABLE>** tag oo aad saf ku qeexdo **\<TR>**, waxaa loo baahan yahay inaad ku darto unugyo. **\<TD>** iyo **\<TH>** tags ayaa kuu ogolaanaya inaad mid-mid u abuurto unugyo gudaha safka.  


    **Farqiga u dhexeeya \<TD> iyo \<TH>:**  

    - **\<TD>:** Waxay u adeegtaa abuurista unug caadi ah.  

    - **\<TH>:** Waxay u adeegtaa abuurista unug sare oo ku jira xarun waxayna ka dhigtaa xogta mid qaro weyn (bold).  


    **Astaamaha ay taageeraan \<TD> iyo \<TH>:**  

    | **Astaanta**  | **Sharaxaada**                                                                                     |  

    |---------------|---------------------------------------------------------------------------------------------------|  

    | **BGCOLOR**   | Waxay dejisaa midabka asalka ee unugga.                                                            |  

    | **ALIGN**     | Waxay dejisaa isku xigxiga tooska ah ee xogta unugga gudihiisa (Qiimayaal ansax ah: *left, center, right*). |  

    | **VALIGN**    | Waxay dejisaa isku xigxiga toosan ee xogta unugga gudihiisa (Qiimayaal ansax ah: *middle, top, bottom*).   |  

    | **ROWSPAN**   | Waxay kordhisaa cabbirka unugga iyada oo ku daraysa unugyada ka hooseeya (Lagu cabbiraa tirada safafka).  |  

    | **COLSPAN**   | Waxay kordhisaa cabbirka unugga iyada oo ku daraysa unugyada dhinaca midig ka xiga (Lagu cabbiraa tirada unugyada). |  


    ---

    Tusaale Qaabeyn Miis ah

    ```html

    <TABLE border="1" cellspacing="0" cellpadding="4">

      <TR bgcolor="lightgray" align="center" valign="middle">

        <TH>Magaca</TH>

        <TH>Da'da</TH>

        <TH>Jinsiga</TH>

      </TR>

      <TR>

        <TD bgcolor="lightblue" align="left">Ahmed</TD>

        <TD valign="top">25</TD>

        <TD>Lab</TD>

      </TR>

      <TR>

        <TD bgcolor="lightyellow">Fatima</TD>

        <TD>30</TD>

        <TD>Dhedig</TD>

      </TR>

    </TABLE>

    ```


    Faahfaahin

    - Safka ugu horreeya ayaa leh unugyo qeexaya magacyada xogta (**\<TH>**), kuwaas oo ku xaraysan xarunta oo qaro weyn ah.  

    - Safafka soo socda waxay leeyihiin xog caadi ah oo lagu soo bandhigay **\<TD>**, iyadoo unugyo qaarkood ay leeyihiin midabyo asalka ah oo kala duwan.  





    Qaabeynta Miisaska iyo Astaamaha Tags-yada Miiska**  


    Miisaska HTML waxay bixiyaan qaabeyn awood leh oo kuu ogolaanaya inaad xogta si habaysan u soo bandhigto. Marka loo isticmaalo tags sida **\<TABLE>**, **\<TR>**, **\<TD>**, iyo **\<TH>**, waxaad abuuri kartaa miisas leh qaabeyn adag oo muuqaal fiican leh.  


    **\<TR>** tag wuxuu qeexaa saf cusub, halka **\<TD>** iyo **\<TH>** ay ku daraan unugyo xog ah safkaas. **\<TD>** waxaa loo isticmaalaa xog caadi ah, halka **\<TH>** loogu talagalay cinwaannada ama madaxyada safka oo had iyo jeer xarun ah (center) oo qaro weyn (bold).  


    **Qaabeyn Dheeraad ah:**  

    - **ROWSPAN iyo COLSPAN** waxay ku darayaan xorriyad dheeraad ah adigoo unugyo isku fidiya.  

    - **ALIGN iyo VALIGN** waxay hagaajin karaan isku xigxiga xogta gudaha unugyada ama safafka si toosan ama midig/xaafad ah.  

    - **BGCOLOR** waxaa loo isticmaalaa in lagu daro midabyo soo jiidasho leh oo ka dhigaya xogta mid si fudud loo fahmi karo.  


    **Tusaale Dheeraad ah:**  

    ```html

    <TABLE border="1" cellpadding="5" cellspacing="0">

      <TR>

        <TH bgcolor="lightgray">Shaqsi</TH>

        <TH>Shaqo</TH>

        <TH>Mushaar</TH>

      </TR>

      <TR>

        <TD>Ali</TD>

        <TD>Macallin</TD>

        <TD>$1000</TD>

      </TR>

      <TR>

        <TD colspan="2">Hodan</TD>

        <TD>$1200</TD>

      </TR>

    </TABLE>

    ```  


    Miiskaan wuxuu muujiyaa sida **COLSPAN** loogu isticmaali karo in unug isku daro laba unug oo kale. Waxaa sidoo kale loo isticmaalay midabyo si kor loogu qaado muuqaalka miiska.  

    wa inoo iyo cashiirka danbe inasha allah


    Tags

    Post a Comment

    0 Comments