Uundaji wa Jedwali kwa Kutumia <table>.
Hapa kuna post ya mafunzo kuhusu uundaji wa jedwali kwa kutumia <table>:
---
Uundaji wa Jedwali kwa Kutumia <table> kwenye HTML
Katika HTML, tagi ya <table> hutumika kuunda jedwali. Jedwali ni muundo muhimu katika kuonyesha data kwa namna ya kupanga na inarahisisha kusoma taarifa. Katika post hii, tutajifunza jinsi ya kuunda jedwali kwa kutumia <table> na tagi zingine zinazohusiana ili kuongeza safu na nguzo.
1. Muundo wa Msingi wa Jedwali
Jedwali linajumuisha tagi kuu ya <table>, na ndani yake tunatumia tagi nyingine kama <tr>, <th>, na <td> ili kubainisha safu (rows), vichwa vya nguzo (table headers), na seli za data (table data).
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jedwali Mifano</title>
</head>
<body>
<h2>Jedwali la Mfano</h2>
<table border="1">
<tr>
<th>Jina</th>
<th>Umri</th>
<th>Jiji</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Nairobi</td>
</tr>
<tr>
<td>Amina</td>
<td>30</td>
<td>Mombasa</td>
</tr>
<tr>
<td>David</td>
<td>35</td>
<td>Kisumu</td>
</tr>
</table>
</body>
</html>
Elezo za Tagi:
1. <table>: Hii ni tagi kuu ya kuanzisha jedwali.
2. <tr>: Hii ni tagi ya kutengeneza safu (row) ndani ya jedwali.
3. <th>: Hii ni tagi ya kuonyesha kichwa cha nguzo. Inakuwa nene na nadhifu kwa default.
4. <td>: Hii ni tagi ya kuonyesha data ndani ya seli za jedwali.
2. Uwekaji wa Border
Katika mfano wa juu, tumetumia border="1" ili kuongeza mstari wa mpaka (border) kuzunguka seli za jedwali. Unaweza kubadilisha rangi ya mstari au kuondoa border kabisa kwa kutumia CSS.
3. Uwekaji wa Rangi ya Background
Kwa kuongeza urembo kwenye jedwali, unaweza kutumia CSS kubadilisha rangi ya background ya vichwa vya nguzo au seli za data.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
4. Mfano wa Matumizi ya Jedwali Katika Tovuti
Jedwali linaweza kutumika kuonyesha taarifa mbalimbali kama orodha ya bidhaa, orodha ya wanafunzi, au hata ratiba za matukio. Hapa kuna mfano wa jedwali la orodha ya wanafunzi:
<h2>Orodha ya Wanafunzi</h2>
<table border="1">
<tr>
<th>Jina</th>
<th>Darasa</th>
<th>GPA</th>
</tr>
<tr>
<td>Samuel</td>
<td>Kidato cha Tatu</td>
<td>3.8</td>
</tr>
<tr>
<td>Grace</td>
<td>Kidato cha Pili</td>
<td>4.0</td>
</tr>
<tr>
<td>Joseph</td>
<td>Kidato cha Nne</td>
<td>3.5</td>
</tr>
</table>
5. Hitimisho
Uundaji wa jedwali kwa kutumia <table> ni rahisi na ni njia bora ya kuonyesha data kwa mpangilio mzuri. Kwa kutumia tagi za <tr>, <th>, na <td>, unaweza kuunda jedwali lenye muundo mzuri wa data. Pia, unaweza kutumia CSS kuboresha muonekano wa jedwali lako ili kuwa na ufanisi zaidi kwenye tovuti yako.
---
Post hii itakusaidia kuelewa jinsi ya kutumia tagi ya <table> kutengeneza jedwali kwa usahihi. Zingatia kutumia CSS kuboresha muonekano wa jedwali lako.
