Baro HTML Casharka Sadexaad 3
CUTUBKA SADEXAAD
DOWNLOAD DAGSO PDF
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 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 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:
| magaca | lacagta |
|---|---|
| axmed saleebaan | 5000 |
| jaamac faarax | 7000 |
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:
| magaca | lacagta |
|---|---|
| axmed saleebaan | 5000 |
| jaamac faarax | 7000 |
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 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 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 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 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 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 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 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
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:
| row 1, column 1 | row 1, columnn 2 |
| row 2, column 1 | row 2, columnn 2 |
Lasoco casharka 4aad
Comments
Post a Comment