آموزش جداول در HTML
آموزش جداول در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش جداول در HTML خواهیم پرداخت.
جداول HTML به نویسندگان وب اجازه می دهد تا داده هایی مانند متن، تصاویر، پیوندها، جداول دیگر و غیره را در ردیف ها و ستون های سلول ها مرتب کنند.
جداول در HTML با استفاده از تگ <table> که در آن از تگ <tr> برای ایجاد سطرهای جدول و تگ <td> برای ایجاد سلول های داده استفاده می شود. عناصر زیر <td> به طور پیش فرض منظم هستند و تراز می شوند
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
خروجی
|
1 2 |
Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 |
در اینجا حاشیه ویژگی تگ <table> است و برای قرار دادن حاشیه در تمام سلول ها استفاده می شود. اگر به حاشیه نیاز ندارید، می توانید از border = “0” استفاده کنید.
عنوان جدول در HTML
عنوان جدول را می توان با استفاده از تگ <th> تعریف کرد. این برچسب جایگزین تگ <td> قرار می گیرد ، که برای نشان دادن سلول داده واقعی استفاده می شود. به طور معمول ردیف بالایی خود را به عنوان عنوان جدول قرار می دهید همانطور که در زیر نشان داده شده است، در غیر این صورت می توانید از عنصر <th> در هر سطر استفاده کنید. عناوینی که در تگ <th> تعریف می شوند به طور پیش فرض مرکز و پررنگ هستند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Live Demo <!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border = "1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> |
خروجی
|
1 2 3 |
Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 |
ویژگی های Cellpadding و Cellspacing
دو ویژگی به نام cellpadding و cellspacing وجود دارد که از آنها برای تنظیم فضای سفید سلول های جدول خود استفاده خواهید کرد. ویژگی cellspacing فضای بین سلولهای جدول را مشخص می کند، در حالی که cellpadding فاصله سلول بین سلول و محتوای سلول را نشان می دهد.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = "1" cellpadding = "5" cellspacing = "5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> |
خروجی
|
1 2 3 |
Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 |
ویژگی های Colspan و Rowspan
اگر بخواهید دو یا چند ستون را در یک ستون ادغام کنید، از ویژگی colspan استفاده خواهید کرد. اگر می خواهید دو یا چند ردیف را ادغام کنید، به همین روش از rowspan استفاده خواهید کرد.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!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> |
خروجی
|
1 2 3 4 |
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 |
پس زمینه جداول
می توانید پس زمینه جدول را با استفاده از یکی از دو روش زیر تنظیم کنید –
- ویژگی bgcolor – می توانید رنگ پس زمینه را برای کل جدول یا فقط برای یک سلول تنظیم کنید.
- ویژگی background – می توانید تصویر پس زمینه را برای کل جدول یا فقط برای یک سلول تنظیم کنید.
همچنین می توانید رنگ حاشیه را با استفاده از ویژگی bordercolor تنظیم کنید.
توجه – ویژگی های bgcolor ، background و bordercolor در HTML5 منسوخ شده است. از این ویژگی ها استفاده نکنید.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!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> |
خروجی
|
1 2 3 4 |
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 |
در اینجا مثالی از استفاده از ویژگی پس زمینه وجود دارد. در اینجا ما از یک تصویر موجود در فهرست / تصاویر استفاده خواهیم کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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> |
این نتیجه زیر را ایجاد می کند. در اینجا تصویر پس زمینه روی سربرگ جدول اعمال نمی شود.
|
1 2 3 4 |
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 |
طول و عرض جدول
می توانید با استفاده از ویژگی های عرض و ارتفاع، جدول و عرض و جدول را تنظیم کنید. می توانید عرض یا ارتفاع جدول را از نظر پیکسل یا از نظر درصد مساحت صفحه نمایش مشخص کنید.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
خروجی
|
1 2 |
Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 |
توضیح جدول
تگ caption به عنوان توضیح جدول عمل می کند و در بالای جدول نشان داده می شود. این برچسب در نسخه جدید HTML / XHTML منسوخ شده است.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Live Demo <!DOCTYPE html> <html> <head> <title>HTML Table Caption</title> </head> <body> <table border = "1" width = "100%"> <caption>This is the 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> |
خروجی
|
1 2 3 |
This is the caption row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 |
هدر، بدنه و پاورقی جدول
جداول را می توان به سه قسمت تقسیم کرد: یک سر، یک بدن و یک پا. سر و پا نسبتاً شبیه سربرگها و پاورقی های یک سند پردازش شده با کلمه هستند که برای هر صفحه یکسان باقی می مانند، در حالی که بدنه دارنده محتوای اصلی جدول است.
سه عنصر برای جدا کردن سر، بدنه و پایه جول عبارتند از:
- <thead> – برای ایجاد یک هدر جدول جداگانه.
- <tbody> – برای نشان دادن بدنه اصلی جدول.
- <tfoot> – برای ایجاد یک صفحه جداول جداگانه.
یک جدول ممکن است شامل چندین عنصر <tbody> برای نشان دادن صفحات یا گروههای مختلف داده باشد. اما قابل توجه است که تگ های <thead> و <tfoot> باید قبل از <tbody> ظاهر شوند
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = "1" width = "100%"> <thead> <tr> <td colspan = "4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan = "4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html> This will produce the follow |
خروجی
|
1 2 3 |
This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4 |
جداول تو در تو
می توانید از یک جدول در داخل جدول دیگر استفاده کنید. نه تنها از جداول می توانید تقریباً از همه تگ های داخل تگ داده جدول استفاده کنید.
مثال
در زیر مثالی از جدول دیگر و سایر تگ ها در داخل سلول جدول آورده شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = "1" width = "100%"> <tr> <td> <table border = "1" width = "100%"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> |
خروجی
|
1 2 3 |
Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 |
لیست جلسات قبل آموزش برنامه نویسی HTML
.svg)
دیدگاه شما