BARASHADA HTML-KA CUTUBKA SADEXAAD

CUTUBKA  SADEXAAD

HTML TABLES

HTML TABLES waxa uu inoo ogolaan qorayaasha web si aad u sameysato macluumaadka sida qoraal, sawir, links, tables kale, iwm rows iyo  columns oo  cells ah.

TUSAALE

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2

HTML Table Headings
cinwaanka Shaxda waxaa lagu qeexi karaa iyadoo la isticmaalayo <th> tag. tag Tan waxaa loo gelin doonaa si uu u bedelo <Td> tag, oo waxaa loo isticmaalaa si ay u matalaan cell xogta dhabta ah. Sida caadiga ah waxaad ka dhigi doonaa isku xigta aad xaga sare sida table sida hoos ku qoran, haddii kale waxaad isticmaali kartaa <th> element oo isku xigta .

TUSAALE


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>magaca</th>
<th>lacagta</th>
</tr>
<tr>
<td>axmed saleebaan</td>
<td>5000</td>
</tr>
<tr>
<td>jaamac faarax</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:

magacalacagta
axmed saleebaan5000
jaamac faarax7000

HTML cellpadding and cellspacing Attributes
Waxaa jira laba attribiutes oo loo yaqaan cellpadding iyo cellspacing oo aanu isticmaali doonaa si ay ula qabsadaan meesha bannaan ee cad in cell aad table . sifo cellspacing wuxuu qeexayaa width oo ah soohdinta, halka cellpadding ka dhigan tahay masaafada u dhaxaysa xuduudaha cell ka iyo content gudahooda ku yaala .


TUSAALE


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>magaca</th>
<th>lacagta</th>
</tr>
<tr>
<td>axmed saleebaan</td>
<td>5000</td>
</tr>
<tr>
<td>jaamac faarax</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaat:

magacalacagta
axmed saleebaan5000
jaamac faarax7000

HTML colspan and rowspan Attributes
Waxaad isticmaali doonaa sifo colspan haddii aad rabto in aad ku milmaan laba ama ka badan oo tiirar galay hal column ah. Jidka lo maro  oo aad u isticmaali doonaa rowspan haddii aad rabto in aad ku milmaan laba ama in ka badan isticmaal sidan soo socota.


TUSAALE


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:

Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

HTML  Backgrounds
Waxaad samayn kartaa asalka table la isticmaalayo mid ka mid ah labadan siyaabood ee soo socda:
*bgcolor attribute - Waxaad samayn kartaa midabka asalka table oo dhan ama kaliya hal cell.
*Background attribute - Waxaad isticmaali kartaa background image oo ah table ka oo dhan ama kaliya hal cell .
Waxa kale oo aad sameyn kartaa midabka xadka ayaa sidoo kale la isticmaalayo attribute  bordercolor.

bgcolor attribute

TUSAALE

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:

Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

Background attribute


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:


Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

HTML Table Height and Width
Waxaad samayn kartaa width table iyo height adoo  isticmaalaya width iyo height . Waxaad cayimi kartaa width ka table ama height adoo  eegaya pixels ama marka la eego boqolkiiba aagga screenka la heli karo.

TUSAALE

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
HTML Table  Caption
tag caption wuxuu u adeegi doonaa sida in ay kala fog fogaadan rowga iyo column ka  table-ka ah  ama rowga iyo magaca sida kaaga muqata tusaalaha hoose.


TUSAALE


<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>Kani waa caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
sidan ayaay usoo baxaysaa:

kani waa caption
row 1, column 1row 1, columnn 2
row 2, column 1row 2, columnn 2


 CUTUBKA SADEXAAD DHAMAAD


Comments

Popular posts from this blog

Barashada HTMLKa Casharka Shanaad 5

Baro HTML Casharka Sadexaad 3

Barashada HTMLKa Casharka Afraad 4