Jadwallada Horumarsan

Casharkaan waxaan qoto-dheer u galnaa jadwallada HTML. Casharka 5-aad waxaan ku baranay aasaaska — hadda waxaan baranayaa sida loo sameeyo jadwallo xogta dhabta ah u taagan.

Dib u eegis — Qaab-dhismeedka Jadwalka

<table>
  <tr>
    <th>Cinwaanka 1</th>
    <th>Cinwaanka 2</th>
  </tr>
  <tr>
    <td>Xogta A</td>
    <td>Xogta B</td>
  </tr>
</table>

Qaybaha Jadwalka — `<thead>`, `<tbody>`, `<tfoot>`

Waxay u qaybiyaan jadwalka saddex qaybood oo cad:

<table border="1" cellpadding="8">

  <!-- Cinwaannada -->
  <thead>
    <tr>
      <th>Magaca</th>
      <th>Degmada</th>
      <th>Buundada</th>
    </tr>
  </thead>

  <!-- Xogta Dhexe -->
  <tbody>
    <tr>
      <td>Axmed Cali</td>
      <td>Muqdisho</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Faadumo Xasan</td>
      <td>Hargeysa</td>
      <td>87</td>
    </tr>
    <tr>
      <td>Maxamed Nuux</td>
      <td>Kismaayo</td>
      <td>95</td>
    </tr>
  </tbody>

  <!-- Wadarta -->
  <tfoot>
    <tr>
      <td colspan="2"><strong>Celceliska</strong></td>
      <td><strong>91.3</strong></td>
    </tr>
  </tfoot>

</table>

Faa’iidada: Browser-ku wuxuu thead iyo tfoot daabaci karaa mid kasta oo bogga ah marka jadwalku dheer yahay.

`colspan` — Isku-darida Tiirarka

colspan wuxuu u ogolaanayaa unugga in uu tiiro badan daboolo:

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <!-- Cinwaankaan wuxuu daboolayaa 3 tiir -->
      <th colspan="3">Liiska Shaqaalaha</th>
    </tr>
    <tr>
      <th>Magaca</th>
      <th>Shaqada</th>
      <th>Mushaharka</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Caisha Warsame</td>
      <td>Macallin</td>
      <td>$1,200</td>
    </tr>
    <tr>
      <td>Cabdi Nuur</td>
      <td>Injineer</td>
      <td>$1,800</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Wadarta Mushaharka</td>
      <td>$3,000</td>
    </tr>
  </tfoot>
</table>

`rowspan` — Isku-darida Safooyinka

rowspan wuxuu u ogolaanayaa unugga in uu safo badan daboolo:

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Fasalka</th>
      <th>Magaca Ardayga</th>
      <th>Buundada</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- Unugkaan wuxuu daboolayaa laba saf -->
      <td rowspan="2">Fasalka A</td>
      <td>Hodan Cali</td>
      <td>88</td>
    </tr>
    <tr>
      <!-- Fasalka A waa joogta sababtoo ah rowspan=2 -->
      <td>Khadar Muuse</td>
      <td>91</td>
    </tr>
    <tr>
      <td rowspan="2">Fasalka B</td>
      <td>Layla Axmed</td>
      <td>79</td>
    </tr>
    <tr>
      <td>Mustafe Xirsi</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

`colspan` iyo `rowspan` Midba Wada

<table border="1" cellpadding="8" style="width:100%">
  <tr>
    <!-- Cinwaanka weyn — 3 tiir, 2 saf -->
    <th colspan="3" rowspan="2"
        style="background:#0a0a0a; color:#00d97e; font-size:18px;">
      Jadwalka Natiijada Imtixaanka
    </th>
  </tr>
  <tr></tr>
  <tr>
    <th>Ardayga</th>
    <th>Fasalka</th>
    <th>Natiijada</th>
  </tr>
  <tr>
    <td>Axmed</td>
    <td>10-B</td>
    <td>A+</td>
  </tr>
</table>

Qurxinta Jadwalka CSS

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Jadwal Qurxoon</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;   /* Xariiqaha isku-dar */
      font-family: sans-serif;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    thead {
      background: #0a0a0a;
      color: white;
    }

    th, td {
      padding: 14px 18px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    /* Safada kala midabaysan — zebra striping */
    tbody tr:nth-child(even) {
      background: #f9f9f9;
    }

    /* Hover effect */
    tbody tr:hover {
      background: rgba(0,217,126,0.08);
      cursor: pointer;
    }

    tfoot {
      background: #f0f0f0;
      font-weight: bold;
    }

    /* Midabka tiirka heerka */
    .heer-sare  { color: green;  font-weight: bold; }
    .heer-dhexe { color: orange; }
    .heer-hoose { color: red;    }
  </style>
</head>
<body>

  <h1>Natiijada Ardayda</h1>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Magaca Ardayga</th>
        <th>Degmada</th>
        <th>Buundada</th>
        <th>Heerka</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Axmed Faarax</td>
        <td>Muqdisho</td>
        <td>95</td>
        <td class="heer-sare">A+</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Faadumo Axmed</td>
        <td>Hargeysa</td>
        <td>82</td>
        <td class="heer-sare">A</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Khadar Muuse</td>
        <td>Kismaayo</td>
        <td>73</td>
        <td class="heer-dhexe">B</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Hodan Cali</td>
        <td>Berbera</td>
        <td>61</td>
        <td class="heer-dhexe">C</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Mustafe Xirsi</td>
        <td>Boosaaso</td>
        <td>45</td>
        <td class="heer-hoose">D</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Celceliska Fasalka</td>
        <td>71.2</td>
        <td>—</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

Jadwal Loogu Samaynayo Waqtiga (Timetable)

Tusaale aad u macquul ah ee colspan iyo rowspan:

<table border="1" cellpadding="10" style="text-align:center; width:100%;">
  <caption><strong>Jadwalka Fasalka — Todobaadka</strong></caption>
  <thead>
    <tr>
      <th>Wakhtiga</th>
      <th>Isniinta</th>
      <th>Talaadada</th>
      <th>Arbacada</th>
      <th>Khamiista</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8:00–9:00</td>
      <td>Xisaab</td>
      <td>Sayniska</td>
      <td>Xisaab</td>
      <td>Taariikh</td>
    </tr>
    <tr>
      <td>9:00–10:00</td>
      <td>Ingiriisi</td>
      <td colspan="2" style="background:#e8f5e9;">Xoriyada / Mashruuc</td>
      <td>Ingiriisi</td>
    </tr>
    <tr>
      <td>10:00–11:00</td>
      <td rowspan="2" style="background:#fff3e0;">Tijaabo Weyn</td>
      <td>Farshaxan</td>
      <td>Sayniska</td>
      <td>Xisaab</td>
    </tr>
    <tr>
      <td>11:00–12:00</td>
      <td>Ciyaar</td>
      <td>Xisaab</td>
      <td>Ingiriisi</td>
    </tr>
  </tbody>
</table>

Xukunnada Jadwalka

Isticmaal border-collapse: collapse CSS — waxay ka saaraysaa laba-xariiq
Kuma isticmaalin jadwalka qaab-dhismeedka bogga (layout) — CSS Flexbox/Grid ayaa loo adeegsado
<caption> wuxuu siiyaa jadwalka cinwaan muuqda hoostiisa — faa’iido weyn accessibility
Had iyo jeer isticmaal <thead>, <tbody>, <tfoot> — koodka wuu si fudud u akhrisan yahay

Koobid

Unugga/Sifada	Shaqadiisa
`<thead>`	Cinwaannada jadwalka
`<tbody>`	Xogta dhexe
`<tfoot>`	Wadarta/khatimadda
`<caption>`	Cinwaanka jadwalka
`colspan="N"`	Unuggu wuxuu daboolayaa N tiir
`rowspan="N"`	Unuggu wuxuu daboolayaa N saf
`border-collapse`	CSS — xariiqaha isku-dar
`:nth-child(even)`	CSS — zebra striping

Casharka xigta (kii ugu dambeeyay): Mashruuca Dhameystirka — bogga HTML oo buuxa oo naqshaddeysan.

Dib u eegis — Qaab-dhismeedka Jadwalka

Qaybaha Jadwalka — <thead>, <tbody>, <tfoot>

colspan — Isku-darida Tiirarka

rowspan — Isku-darida Safooyinka

colspan iyo rowspan Midba Wada