Jedwali ni sehemu muhimu katika HTML kwa ajili ya kuonyesha data katika muundo ulio na safu mlalo na safu wima. Katika HTML, majedwali yanaundwa kwa kutumia <table>, <tr>, na <td> tagi.
Lebo ya <meza> inawakilisha kontena kuu la jedwali, ambalo lina safu mlalo na safu wima zote. Safu mlalo hufafanuliwa kwa kutumia lebo ya <tr>(safu ya jedwali), huku visanduku vilivyo ndani ya safu mlalo vinafafanuliwa kwa kutumia lebo ya <td>(data ya jedwali). Zaidi ya hayo, unaweza kutumia <th>(kichwa cha jedwali) kufafanua seli za vichwa vya jedwali.
Unaweza kutumia sifa kama vile colspan na safumlalo ili kuunganisha visanduku kwenye jedwali au visanduku vilivyo katika safu mlalo na safu wima nyingi. Zaidi ya hayo, unaweza kutumia sifa za CSS ili kubinafsisha mwonekano na mpangilio wa jedwali.
Jedwali( <table>
)
- <table>
Kipengele kinatumika kuunda jedwali katika HTML.
- Data imewekwa katika safu( <tr>
) na safu wima( <td>
au <th>
).
- Kila seli ya data imewekwa ndani ya <td>
(seli ya data) au <th>
(kiini cha kichwa).
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Kichwa cha Safu wima( <th>
)
- <th>
Kipengele kinatumika kuunda vichwa vya safu kwenye jedwali.
- Kwa kawaida huwekwa kwenye safu ya kwanza ya jedwali.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Safu Mlalo za Data( <tr>
):
- <tr>
Kipengele kinatumika kuunda safu mlalo za data kwenye jedwali.
- Seli za data( <td>
) au seli za kichwa( <th>
) zimewekwa ndani ya <tr>
vipengele hivi.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Mzunguko wa Safu( colspan
)
Sifa colspan
hutumika kubainisha idadi ya safu wima ambazo seli ya data au kisanduku cha kijajuu kitaweka kwenye jedwali.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Msururu wa safu( rowspan
)
Sifa rowspan
hutumika kubainisha idadi ya safu mlalo ambazo seli ya data au kisanduku cha kichwa kitaweka kwenye jedwali.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Kuunganisha seli( colspan
na rowspan
)
Unaweza kuchanganya zote mbili colspan
na rowspan
sifa ili kuunganisha seli kwenye jedwali.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border
mali
- border
Mali inabainisha unene wa mpaka wa meza.
- Thamani ya border
ni nambari kamili isiyo hasi.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding
mali
-, cellpadding
Sifa hubainisha umbali kati ya maudhui ya seli na mpaka wa seli kwenye jedwali.
- Thamani ya cellpadding
ni nambari kamili isiyo hasi
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing
mali
- cellspacing
Sifa hii inabainisha nafasi kati ya seli kwenye jedwali.
- Thamani ya cellspacing
ni nambari kamili isiyo hasi.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Sifa na vipengele hivi hukuruhusu kuunda na kubinafsisha majedwali katika HTML kulingana na mahitaji yako. Unaweza kuzitumia kuonyesha data kwa njia iliyo wazi na iliyopangwa kwenye tovuti yako.