کار با جدول ها در HTML
جداول یکی از زیباترین بخش های HTML است. در این فصل نحوه ای ایجاد جدول ها بصورت گوناگون و تگ های مربوط به آنها را در HTML فرا می گیرید.
همانطور که میدانید جدول عنصری است برای نظم بخشیدن به اطلاعات موجود در صفحه . ما در HTML با استفاده از تگ <table> می توانیم یک جدول ایجاد کنیم همانطور که می دانید هر جدول حاوی تعدادی سطر و ستون است . در زبان HTML برای ایجاد سطر از تگ <tr> و برای ایجاد سلول در هر ردیف از تگ <td> استفاده خواهیم کرد.
آموزش کار با جدول ها در HTML
تکه کد زیر نحوه ای ایجاد یک جدول ساده را به شما نشان می دهد:
<html> <body> <table> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td> </tr> </table> </body> </html>
خروجی در مروگر به شکل زیر خواهد بود .
در تصویر بالا جدولی که ساخته ایم را مشاهده می کنید. خب! حتما می گویید این دیگر چه جور جدولی است.بله من هم با شما موافقم. این جدول یک مشکل دارد و آن هم اینست که کادر جدول نشان داده نشده است و جدول بی مفهوم است.
باید گفت که در نسخه های پیشین html تگ <table> حاوی صفات گوناگون بود که از آن جمله همین مورد نمایش کادر جدول بود اما به دلیل اینکه کار ظواهر عناصر در html5 به CSS واگذار شده است، دیگر در تگ <table> تنها یک صفت داریم و آن هم صفت summary که کار آن مشخص کردن خلاصه ای از جدول برای مرورگرهایی است که محتوای صفحات را بصورت صوتی برای کاربران می خوانند.
اما چون ما قصد داریم CSS را جداگانه به شما آموزش دهیم تا مطالب آن را بهتر بیاموزید، در اینجا فقط یه تکه کد CSS را به کد قبلی می افزاییم که البته توضیحات مربوط به آن را به فصل CSS موکول می کنیم . تکه کد مذکور را در زیر مشاهده می کنید:
<style type="text/css"> table{border-collapse:collapse;} table, td, th{border:1px solid black;} </style>
شما تا آن زمان کافی است این تکه کد را در قسمت <head> فایل خود قرار دهید.به صورتی که در کد زیر مشاهده می کنید:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;} table, td, th{border:1px solid black;} </style> </head> <body> <table> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td> </tr> </table> </body> </html>
همانطور که می بینید با افزودن کد مذکور، جدول شکل واقعی خودش را پیدا کرد. به یاد داشته باشید که از هم اکنون تا پایان فصل این تکه کد را به فایل خود اضافه کنید.
تگ <th>
همانگونه که می دانید در هر جدول همواره بالاترین سلول بعنوان سربرگ هر ستون مشخص می شود که این سربرگ ها مشخص می کنند که هر ستون حاوی چه اطلاعاتی است.
تگ <th> یک سلول سربرگ را در یک جدول html ایجاد می کند. بطور کلی در یک جدول دو نوع سلول وجود دارد:
سلول سربرگ : که با استفاده از تگ <th> ایجاد میشود.
سلول استاندارد : که همانطور که دیدیم با استفاده از تگ <td> ایجاد می شود.
متون در یک سلول سربرگ معمولا بصورت توپُر و در مرکز سلول نمایش داده می شوند در حالیکه در یک سلول استاندارد بصورت معمولی و در سمت چپ سلول نمایش داده می شوند.
در زیر نحوه استفاده از این تگ را مشاهده میکنید:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;} table, td, th{border:1px solid black;} </style> </head> <body> <table> <tr> <th>student name</th> <th>Mathematics</th> <th>physics</th> </tr> <tr> <th>student 1</th> <td>18</td> <td>19.5</td> </tr> <tr> <th>student 2</th> <td>20</td> <td>14.25</td> </tr> </table> </body> </html>
همانگونه که در کد فوق مشاهده می کنید، برای تولید سلول های سربرگ از تگ <th> و برای تولید سلول های استاندارد از تگ <td> استفاده کرده ایم. نتیجه حاصل از اجرای این کد را در تصویر زیر مشاهده می نمایید:
با توجه به تصویر فوق، در ردیف اول هر سه سلول جزء سلول های سربرگ (<th>) هستند اما در ردیف دوم و سوم تنها سلول اول، سلول سربرگ بوده و دو سلول دیگر این ردیف ها، سلول استاندارد (<td>) هستند.
تگ <caption> یک “عنوان” برای جدول در نظر می گیرد. این عنوان معمولا در بالای جدول نشان داده می شود.
این تگ باید بلافاصله پس از تگ آغازین <table> نوشته شود و لازم به ذکر است که هر جدول تنها یک caption می تواند داشته باشد.کد زیر نحوه استفاده از این تگ را به شما نشان می دهد.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;} table, td, th{border:1px solid black;} </style> </head> <body> <table> <caption>Students marks</caption> <tr> <th>student name</th> <th>Mathematics</th> <th>physics</th> </tr> <tr> <th>student 1</th> <td>18</td> <td>19.5</td> </tr> <tr> <th>student 2</th> <td>20</td> <td>14.25</td> </tr> </table> </body> </html>
همانطور که در کد فوق می بینید، تگ <caption> بلافاصله پس از تگ آغازین <table> نوشته شده است. در تصویر زیر نتیجه اجرای این کد را مشاهده می نمایید:
همانگونه که در تصویر فوق مشاهده می کنید، عبارت “students marks” بعنوان caption این جدول در قسمت بالا و در وسط جدول نمایش داده شده است.
تگ های <thead> ، <tbody> و <tfoot>
تگ های <thead> ، <tbody> و <tfoot> برای گروه بندی ردیف ها و خانه های جدول بکار می روند. این گروه بندی باعث می شود که کار زیباسازی و سبک دهی توسط CSS راحت و آسان گردد.
تگ <tbody> ردیف هایی از جدول را به عنوان بدنه اصلی جدول، در یک گروه قرار می دهد.
این تگ باید حتما با تگ های <thead> و <tfoot> بکار گرفته شود.
تگ <thead> معمولا ردیف اول از جدول را به عنوان سربرگ جدول مشخص می کند.
به یاد دارید که در صفحات گذشته از تگ <th> برای ایجاد یک سلول سربرگ استفاده می کردیم.توجه کنید که تگ <thead> با تگ <th> متفاوت است. همانطور که گفتیم، تگ <th> یک سلول سربرگ ایجاد می کند درحالیکه تگ <thead> یک ردیف از جدول را گروه بندی کرده که این گروه، “گروه سربرگ” نام دارد.
تگ <tfoot> معمولا آخرین ردیف جدول را به عنوان “گروه ته برگ جدول” مشخص می کند.
نکته ای که باید در استفاده از این تگ ها مورد توجه قرار بگیرد اینست که ترتیب نوشتن این سه تگ ، مهم است.
یعنی ابتدا باید تگ <thead> ، سپس تگ <tfoot> و در انتها تگ <tbody> را بنویسیم. کد زیر نحوه استفاده از این تگ ها را نمایش می دهد. آنچه که مشخص است اینست که هنر اصلی این تگ ها، پس از آموزش CSS مشخص می گردد.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;} table, td, th{border:1px solid black;} </style> </head> <body> <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
همانگونه که در تصویر فوق می بینید، سه قسمت <thead> ، <tbody> و <tfoot> را با رنگ متمایز نشان داده ایم. همانطور که می بینید، قسمت <tfoot> قبل از قسمت <tbody> نوشته می شود و قسمت <thead> نیز قبل از این دو.
در تصویر زیر می توانید نتیجه اجرای این کد را مشاهده نمایید:
در تصویر فوق ردیف اول جدول با استفاده از تگ <thead> در یک گروه با عنوان “گروه سربرگ ” قرار داده شده است. ردیف آخر نیز با استفاده از تگ <tfoot> بعنوان “گروه ته برگ” و دو ردیف وسط نیز توسط تگ <tbody> به عنوان “گروه بدنه جدول”، گروه بندی شده اند.
تگ های <col> و <colgroup> در کار با جدول ها در HTML
تگ <col> صفتی را برای یک یا گروهی از ستون های یک جدول مهیا می کند. این تگ معمولا برای اعمال یک style به یک ستون مشخص به کار می رود. بعنوان مثال اگر جدول داشته باشیم که این جدول حاوی سه ستون باشد و ما بخواهیم کل ستون دوم را به رنگ قرمز درآوریم چه باید بکنیم؟لابد می گویید که در هر ردیف، سلول دوم را به رنگ قرمز در می آوریم. خب ! این یک راه نسبتا دشوار است. یک راه بهتر برای این کار استفاده از تگ <col> است. با استفاده از این تگ می توانید یک صفت را به کل ستون مورد نظر خود اعمال کنید.این تگ، یک تگ منفرد است و یک صفت اختصاصی دارد با عنوان span که این صفت مشخص کننده تعداد ستون هایی است که قرار است استایل را به آنها اعمال کنیم. به عنوان مثال توسط کد زیر، دو ستون اول یک جدول سه ستونی را به رنگ قرمز در می آوریم.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;width:100%} table, td, th{border:1px solid black;} </style> </head> <body> <table> <col span="2" style="background-color:red" /> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> </body> </html>
همانگونه که در کد فوق می بینید، در خط یازدهم یک تگ </col> به همراه صفت span مربوط به آن نوشته ایم. به این صورت :
<col span=”۲” style = “background-color : red”>
توجه کنید که صفت style ی صفت عمومی در تگ های html است .صفت های عمومی html را در فصل های بعدی توضیح خواهم داد. اما در اینجا فقط به ذکر این نکته بسنده می کنیم که توسط صفت style می توان شکل ، رنگ و ظاهر یک عنصر html را تغییر داد که در اینجا این صفت باعث قرمز رنگ شدن پس زمینه ستون های جدول شده است.
صفت span نیز همانطور که ذکر کردیم، صفت اختصاصی تگ </col>است. همانطور که می بینید ، در کد فوق مقدار این صفت برابر ۲ است که معنی آن اینست که از ستون فعلی، تعداد دو ستون را تحت تاثیر قرار بده.
توجه کنید که اگر ما می خواستیم بجای این دو ستون اول، دو ستون دوم را تحت تاثیر قرار دهیم، باید تگ </col> را بدون هیچ صفتی قبل از تگ <col> کنونی می نوشتیم. به این صورت :
<col/> <col span=”۲” style = “background-color : red”>
به این ترتیب می توان از ستون اول پرش کرده و به ستون دلخواه رسید.
تصویر زیر نتیجه اجرای کد قبل را به نمایش می گذارد:
همانگونه که در تصویر مشاهده می کنید، رنگ پس زمینه دو ستون اول به رنگ قرمز درآمده است.
اما تگ دیگری که قرار است در این قسمت یاد بگیرید، تگ <colgroup> است. این تگ برای گروه بندی ستون های جدول به منظور اعمال استایل بکار می رود. همانگونه که دیدیم، تگ </col> استایل مورد نظر شما را به یک یا چند ستون اعمال می کرد. حال با استفاده از تگ <colgroup> می توانید این ستون ها را گروه بندی کرده تا کار استایل دهی آنها سریع تر و راحت تر انجام شده یا تغییر داده شود. در زیر نحوه استفاد از این تگ را مشاهده می کنید :
<!DOCTYPE HTML> <html> <head> <style type="text/css"> table{border-collapse:collapse;width:100%} table, td, th{border:1px solid black;} </style> </head> <body> <table> <colgroup style="background-color:red" /> <col/> <col/> </colgroup> <colgroup style="background-color:yellow" /> <col/> <col/> </colgroup> <tr> <th>First Name</th> <th>Last Name</th> <th>Mathematics</th> <th>Physics</th> </tr> <tr> <td>reza</td> <td>darrudi</td> <td>17.25</td> <td>16.5</td> </tr> <tr> <td>somayyeh</td> <td>maddah</td> <td>17</td> <td>18.25</td> </tr> </table> </body> </html>
در کد فوق، دو ستون اول که مربوط به نام و نام خانوادگی دانشجو هستند را در یک گروه و دو ستون دوم که مربوط به نمرات دروس هستد در یک گروه دیگر قرار داده ایم.همانگونه که مشاهده می کنید، تگ های <col> و <colgroup> ، ردیف یا خانه ای را به جدول اضافه نمی کنند بلکه تنها همان ستون های موجود را تحت تاثیر قرار می دهند.
نکته دیگری که لازم به ذکر است اینست که تگ <colgroup> همانند تگ <col> دارای صفت خصوصی span می باشد که دقیقا مشابه با صفت span در تگ col عمل می کند.
در زیر می توانید نتیجه اجرای کد فوق را مشاهده نمایید:
در پایان آموزش کار با جدول ها در HTML را در قالب فایل PDF می توانید برای مطالعه آفلاین دانلود کنید. از مجموعه مقالات آموزشی Html5 لرن پارسی دیدن کنید.
دیدگاه ها