Jadwalka HTML (Tables)

Jadwalka HTML waxaa loo isticmaalaa in lagu soo bandhigo xogta qaab jadwal ah, oo ka kooban safaf (rows) iyo tiirar (columns). Jadwalka ayaa ka dhiga xogta mid si habaysan loo akhriyi karo, gaar ahaan marka la soo bandhigayo xog tiro badan oo isku xiran. HTML waxay bixisaa tags dhowr ah si loo abuuro loona qaabeeyo jadwalka.

<table>, <tr>, <th>, <td> - Qaab Dhismeedka Aasaasiga ah ee Jadwalka

Jadwalka HTML waxaa lagu abuuraa iyadoo la isticmaalayo tags-ka soo socda:

• <table> (Table): Waxay qeexdaa weelka jadwalka oo dhan. Dhammaan tags-ka kale ee jadwalka (sida <tr>, <th>, <td>) waa inay ku jiraan tag-ga <table>.
• <tr> (Table Row): Waxay qeexdaa saf kasta oo ka mid ah jadwalka. Safafka waxay ku socdaan si toosan.
• <th> (Table Header): Waxay qeexdaa unug madax (header cell) oo ku jira safka. Tags-ka <th> waxaa badanaa loo isticmaalaa safka ugu horreeya ee jadwalka si loo qeexo cinwaannada tiirarka. Qoraalka ku jira tags-ka <th> waxaa badanaa lagu muujiyaa geesinimo (bold) oo dhexe loo dhigay.
• <td> (Table Data): Waxay qeexdaa unug xog (data cell) oo ku jira safka. Tags-ka <td> waxaa loo isticmaalaa in lagu daro xogta dhabta ah ee jadwalka.

Qaabka Aasaasiga ah ee Jadwalka HTML:

HTML

<table>
  <tr>
    <th>Madaxa Tiirka 1</th>
    <th>Madaxa Tiirka 2</th>
  </tr>
  <tr>
    <td>Xogta Safka 1, Tiirka 1</td>
    <td>Xogta Safka 1, Tiirka 2</td>
  </tr>
  <tr>
    <td>Xogta Safka 2, Tiirka 1</td>
    <td>Xogta Safka 2, Tiirka 2</td>
  </tr>
</table>

Soo-saarista Browserka:

Sharaxaadda:

• Tag-ga <table> wuxuu bilaabayaa jadwalka.
• Tag-ga <tr> kastaa wuxuu qeexdaa saf cusub oo jadwalka ah.
• Safka ugu horreeya, tags-ka <th> waxaa loo isticmaalay in lagu qeexo cinwaannada tiirarka ("Madaxa Tiirka 1", "Madaxa Tiirka 2").
• Safafka soo socda, tags-ka <td> waxaa loo isticmaalay in lagu daro xogta unugyada ("Xogta Safka 1, Tiirka 1", iwm.).

<caption> - Cinwaanka Jadwalka

Tag-ga <caption> waxaa loo isticmaalaa in lagu daro cinwaan ama sharaxaad jadwalka. Tag-ga <caption> waa inuu noqdaa ilmaha ugu horreeya ee tag-ga <table>. Cinwaanka waxaa badanaa lagu muujiyaa kor jadwalka.

• <caption> (Table Caption): Waxay qeexdaa cinwaan ama sharaxaad jadwalka.

Tusaale <caption>:

HTML

<table>
  <caption>Xogta Macluumaadka Ardayda</caption>
  <tr>
    <th>Magaca</th>
    <th>Fasalka</th>
  </tr>
  <tr>
    <td>Cali</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Faadumo</td>
    <td>9</td>
  </tr>
</table>

Soo-saarista Browserka:

Sharaxaadda:

• Tag-ga <caption>Xogta Macluumaadka Ardayda</caption> wuxuu ku darayaa cinwaan jadwalka, kaas oo sharraxaya waxa jadwalku ku saabsan yahay.

colspan iyo rowspan Attributes - Isku-darka Unugyada

Tilmaamaha colspan iyo rowspan waxaa loo isticmaalaa in lagu isku daro unugyada jadwalka.

colspan Attribute

• colspan (Column Span): Tilmaanta colspan waxaa lagu qori karaa tags-ka <th> ama <td>. Waxay qeexdaa inta tiirar ee unuggu uu ku fidsan yahay.

Tusaale colspan:

HTML

<table>
  <tr>
    <th colspan="2">Macluumaadka Xiriirka</th>
  </tr>
  <tr>
    <td>Telefoonka:</td>
    <td>+1 123 456 7890</td>
  </tr>
  <tr>
    <td>E-mail:</td>
    <td>[email protected]</td>
  </tr>
</table>

Soo-saarista Browserka:

Sharaxaadda:

• <th colspan="2">Macluumaadka Xiriirka</th> waxay isku daraysaa laba tiirar oo safka ugu horreeya ah waxayna ka dhigaysaa unug madax ah oo ku fidsan labada tiirar ("Macluumaadka Xiriirka").

rowspan Attribute

• rowspan (Row Span): Tilmaanta rowspan waxaa lagu qori karaa tags-ka <th> ama <td>. Waxay qeexdaa inta safaf ee unuggu uu ku fidsan yahay.

Tusaale rowspan:

HTML

<table>
  <tr>
    <th>Magaca</th>
    <td>Cali</td>
  </tr>
  <tr>
    <th rowspan="2">Telefoonka</th>
    <td>+1 123 456 7890</td>
  </tr>
  <tr>
    <td>+1 987 654 3210</td>
  </tr>
</table>

Soo-saarista Browserka:

Sharaxaadda:

• <th rowspan="2">Telefoonka</th> waxay isku daraysaa laba safaf oo tiirka ugu horreeya ah waxayna ka dhigaysaa unug madax ah oo ku fidsan labada safaf ("Telefoonka").

Tilmaamo Loogu Talagalay Jadwalka HTML

• Isticmaal jadwalka xogta jadwal ah: Jadwalka HTML waxaa loogu talagalay in lagu soo bandhigo xogta jadwal ah. Ha u isticmaalin jadwalka si aad u qaabaysato bogga oo dhan. Isticmaal CSS si aad u qaabaysato qaabka bogga.
• Isticmaal <th> cinwaannada tiirarka: Isticmaal tags-ka <th> safka ugu horreeya si aad u qeexdo cinwaannada tiirarka. Tani waxay ka dhigaysaa jadwalka mid si sahlan loo fahmo, waxayna sidoo kale wanaajisaa helitaanka (accessibility).
• Isticmaal <caption> cinwaanka jadwalka: Isticmaal tag-ga <caption> si aad u bixiso cinwaan cad oo qeexan jadwalka. Tani waxay ka caawinaysaa isticmaalayaasha inay fahmaan waxa jadwalku ku saabsan yahay.
• Isticmaal colspan iyo rowspan si macno leh: Isticmaal tilmaamaha colspan iyo rowspan si aad u isku darsid unugyada marka ay macno samaynayso, laakiin ha u isticmaalin si xad dhaaf ah. Jadwalka oo aad loo isku daray ayaa noqon kara mid adag in la akhriyo.
• Qaabee jadwalka CSS: Isticmaal CSS si aad u qaabaysato jadwalka, sida xuduudaha, midabka asalka, qoraalka, iyo meel bannaan. Ha ku qaabeyn jadwalka adiga oo isticmaalaya tilmaamaha HTML.

Gabagabo

Jadwalka HTML waa qalab awood leh oo lagu soo bandhigo xogta qaab habaysan oo la akhriyi karo. Isticmaalka tags-ka <table>, <tr>, <th>, <td>, iyo <caption>, iyo tilmaamaha colspan iyo rowspan si sax ah waxay kuu oggolaanayaan inaad abuurtid jadwalka wax ku ool ah oo xogtaada si cad oo macno leh u soo bandhigaya. Xusuusnow, isticmaal jadwalka xogta jadwal ah, isticmaal <th> cinwaannada, isticmaal <caption> cinwaanka, isticmaal colspan iyo rowspan si macno leh, oo qaabee jadwalka CSS.