آموزش Table در HTML
در این جلسه به آموزش آموزش Table در HTML خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
ایجاد جدول با تگ table در HTML
از جمله مباحثی که علاوه بر استفاده های عمومی برای حرفه ای ترهای دنیای وب نیز همواره کاربردی بوده مبحث ایجاد جدول در صفحات وب است که خوشبختانه مانند ترسیم جدول در برنامه هایی نظیر Microsoft Word این امکان با کدنویسی در اسناد HTML نیز فراهم شده است، همان طور که در آموزش های گذشته دیدیم برای خلق هر قسمت از صفحات وب با زبان HTML از علائم نشانه گذاری تحت عنوان تگ (Tag) استفاده می شود که در نهایت پس از پردازش توسط مرورگر به شکل عناصر قابل درک برای انسان (متن، تصویر، ویدئو، فرم و…) نمایان می شوند، ایجاد جدول نیز از این قاعده مستثنا نیست و برای آن از تگ استاندارد table استفاده می کنیم، با توجه به تنوع امکانات و پیچیدگی های خاص ایجاد جدول در صفحات وب تگ table به همراه زیر مجموعه ها و ویژگی هایی استفاده می شود که در ادامه در این خصوص مفصل خواهیم گفت.
کاربرد جدول در صفحات وب
جداول در زندگی روزمره کاربردهای زیادی دارند و بسیاری از اطلاعات در فرمت ردیف های سطر (Row) و ستون (Column) مرتبط به هم نمایش داده می شوند، نمایش محتوا در جدول این امکان را می دهد که با سرعت بیشتری اطلاعات پیچیده را تحلیل و به ارتباطات بین آنها پی ببریم و در نهایت به نتیجه مورد نظر برسیم، فلسفه اصلی به کارگیری جداول در صفحات وب نیز از این قاعده مستثنی نیست و برای دسته بندی و نمایش محتوایی که نیاز به سطر و ستون دارند به طور مثال اطلاعات آماری، نمایش نمرات، مقایسه محصولات، داده های تحلیلی و هر چیزی که به اصطلاح جدولی یا Tabular است استفاده می شود، البته به دلیل استحکام ساختار و راحتی کار مدتها از جدول در امر طراحی لایه ها و فرم بندی ظاهر صفحات وب نیز استفاده می شد که امروزه به دلیل معرفی زبان استایل نویسی CSS توصیه می شود از کاربرد جدول بخصوص در طراحی قالب پروژه هایی که به کسب رتبه بهتر در موتورهای جستجو و اصول سئو (SEO دانش بهینه سازی صفحات وب برای موتورهای جستجو) متکی هستند اجتناب کنیم، برای طراحی قالب های جدید تگ های دیگری مانند div گزینه بهتر و توصیه شده است.
جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب <table> ایجاد می شوند که در آن برچسب <tr> برای ایجاد ردیف ها و برچسب <td> برای ایجاد داده های سلول ها استفاده می شوند
مثال
<!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>
در اینجا border یک ویژگی از برچسب <table> می باشد و برای قرار دادن حاشیه در پهنای همه ی سلول ها استفاده می شود. اگر به حاشیه احتیاج نداشته باشید می توانید از “۰=”border استفاده کنید
تیتر جدول
تیتر جدول می تواند با استفاده از برچسب <th> تعریف شود. این برچسب برای جایگزینی با برچسب <td> استفاده می شود که برچسب <td> برای نمایش داده ی حقیقی سلول استفاده می شود. طبیعتا شما ردیف های بالای جدول را به عنوان تیتر قرار می دهید.
ویژگی های cellpadding و cellspacing
دو ویژگی به نام های Cellpadding و Cellspacing وجود دارند که برای تنظیم محیط سفید در سلول های جدول استفاده می شوند. ویژگی cellspacing عرض حاشیه را تعریف می کند، در حالیکه cellpadding فاصله ی بین حاشیه ی سلول و محتوای آن را تعریف می کند.
مثال تیتر جدول و cellpadding و cellspacing
<!DOCTYPE html> <html> <head> سایت سورس سرا - آموزش برنامه نویسی و سورس کدهاي آماده com.SourceSara.www ۵۱ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک - ۱۶۵ واحد۷ ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ <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>
ویژگی های colspan و rowspan
اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.
مثال
<!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>
آموزش Table در HTML
پس زمینه ی جدول
می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید. ویژگی color Bg می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید. ویژگی background می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید. همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.
مثال
<!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>
در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.
<!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> سایت سورس سرا - آموزش برنامه نویسی و سورس کدهاي آماده com.SourceSara.www ۵۳ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک - ۱۶۵ واحد۷ ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>
طول و عرض جدول
شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.
مثال
<!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>
شرح جدول
برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید XHTML/HTML توصیه می شود.
مثال
<!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> سایت سورس سرا - آموزش برنامه نویسی و سورس کدهاي آماده com.SourceSara.www ۵۴ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک - ۱۶۵ واحد۷ ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ <td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, columnn 2</td> </tr> </table> </body> </html>
تیتر، بدنه و پاورقی جدول
جدول ها می توانند به سه بخش تقسیم شوند تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از
<thead> برای ایجاد یک تیتر مجزا
<tbody> برای نشان دادن بدنه ی اصلی جدول
<tfoot> برای ایجاد یک پاورقی مجزا در یک جدول
یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر <tbody> مختلفی باشد، اما ظاهر شدن برچسب های <thead > و <tfoot <قبل از<tbody> زیاد مهم نیست.
مثال
<!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> سایت سورس سرا - آموزش برنامه نویسی و سورس کدهاي آماده com.SourceSara.www ۵۵ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک - ۱۶۵ واحد۷ ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ </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>
جدول های تودرتو
شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی <td> استفاده کنید.
مثال
در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید
آموزش Table در HTML
<!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>
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری آموزش Table در HTML پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید
دیدگاه ها