آموزش HTML - ایجاد جدول با استفاده از تگ table

حتما تا کنون متوجه شده اید که نمی توانید دو عنصر را به صورت هم عرض و هم سطح هم در صفحه وب نمایش دهید . علت این امر آنست که مرورگر ها به طور خودکار چینش هر عنصر را نسبت به عنصر قبلی تنظیم می کنند و بنابراین تمام عناصر زیر هم قرار می گیرند . برای ایجاد این چینشی که عناصر در آن هم سطح باشند در HTML دو راه وجود دارد یکی استفاده از جدول یا همان table و دیگری استفاده از div. در این مطلب نحوه استفاده از جدول را بیان می کنیم و در مطلب بعدی سعی می شود نحوه استفاده از div مطرح گردد .

برای ایجاد جدول در صفحه وب باید از تگ table استفاده کنیم . تگ باز table شروع یک جدول و تگ بسته table پایان یک جدول را مشخص می کند ولی تا وقتی که سطر ها و ستون ها را ایجاد نکنید هیچ نمایی از جدول را ایجاد نمی کند .

برای ایجاد هر سطر در جدول از تگ tr استفاده می کنیم . هر تگ باز و بسته tr نشاندهنده یک سطر از جدول است سطری که در ابتدا فاقد هرگونه سلولی می باشد . برای ایجاد سلول (خانه) و نه ستون در داخل هر سط می بایست از تگ td استفاده نمود . چرا می گوئیم سلول و نه ستون ؟ بدین خاطر که همانطور که بعدا مشاهده خواهید کرد این امکان وجود دارد که سطر ها به تعداد نامساوی سلول داشته باشند حال آنکه مفهوم ستون در جدول یک قسمت بندی عمودی است که در تمام سطرها ظاهر شده باشد ولی تگ td که شما در یک سطر بکار می برید ، فقط روی همان سطر اثر می گذارد .

در داخل تگ td متن و محتویاتی که می خواهیم در خانه های جدول نمایش یابد را قرار می دهیم . در داخل تگ td تقریبا تمامی تگهایی که تا به حال دیدیم قابل استفاده است . به این نکته توجه کنید که هر آنچه که قرار است در جدول نمایش دهید باید داخل تگ های td نوشته شود و نه تگ های tr و یا بین تگ table و tr .

و ام نحوه نوشتن تگ های table و محتویات آن :

<table> <tr> <td> HTML </td> <td> PHP </td> <td> jQuery </td> </tr> <tr> <td> JavaScript </td> <td> CSS </td> <td> MySQL </td> </tr> <tr> <td> ASP.NET </td> <td> C# </td> <td> SQL Server </td> </tr> <table>

همانطور که می بینید خواندن کد فوق کمی مشکل است چرا که همه عناصر هم سطح هم آمده اند . هنگامی که جدول بزرگ شود و عناصری غیر از متن معمولی را نیز شامل شود کار از این هم سخت تر می شود . اکیدا توصیه می شود که کد ها را دندانه دار بنویسید یعنی عنصر فرزند باید با کمی تو رفتگی نسبت به عنصر پدر نوشته شود . در این مطلب چون از ویرایشگرهای تحت وب استفاده شده این کار با مشکل مواجه شده است . نتیجه اجرای کد فوق را در زیر می بینید :

HTML	PHP	jQuery
JavaScript	CSS	MySQL
ASP.NET	C#	SQL Server

همانگونه که می بینید این جدول فاقد هر گونه مرز و یا اصطلاحا border است . البته مرز وجود دارد ولی به خاطر اینکه پهنای پیش فرض آن 0 است دیده نمی شود می توانید با انجام عمل Drag و انتخاب جدول متوجه مرزبندی این جدول شوید . این تکنیک معمولا هنگامی بکار می رود که بخواهیم چینش صفحه را به نوعی منظم کنیم که کاربر متوجه نشود ما از جدول استفاده کرده ایم و یا هدف نشان دادن جدول نباشد . برای ایجاد border می توانید از خصیصه border در تگ table استفاده کنید . این خصیصه مقداری عددی را بر حسب پیکسل گرفته و پهنای مرز جدول را با آن مقدار تنظیم می کند . البته این خصیصه در مرورگر هایی مانند Google Chrome درست کار نمی کند در این مرورگر باید پهنا ، نوع و رنگ مرز را برای هر سلول دقیقا تعریف کنید در مثال زیر همان جدول بالا مشاهده می شود که تنها برای سلول css مرز تعریف شده است .

<table> <tr> <td> HTML </td> <td> PHP </td> <td> jQuery </td> </tr> <tr> <td> JavaScript </td> <td style="border-width:1px;border-style:solid;border-color:black"> CSS </td> <td> MySQL </td> </tr> <tr> <td> ASP.NET </td> <td> C# </td> <td> SQL Server </td> </tr> <table>

نتیجه اجرای کد به شکل زیر است :

HTML	PHP	jQuery
JavaScript	CSS	MySQL
ASP.NET	C#	SQL Server

در کد بالا border-width پهنای border و border-style نوع border (که در اینجا solid به معنای خط پیوسته است) و border-color رنگ border را مشخص می کنند . اگر بخواهید جدول همانند جدول های نرم افزار MS Word که در ذهن شما هستند به نظر برسد باید این خصیصه style را در تمام تگ های td و tr و همچنین تگ table قرار دهید تا تمامی خطوط جدول نمایان شوند . البته برای راحتی کار و همچنین جهت رعایت نکات فنی هیچ گاه style را در تمامی سطرها و ستون ها قرار نمی دهیم مگر در موارد خاص . پس چه کار باید انجام دهیم ؟ راه درست اینست که یک کلاس css تعریف کنید و تمامی سطرها و سلول ها را عضو آن کلاس کنید . می توانید برای یافتن چگونگی انجام این کار بخش css از همین سایت را مطالعه کنید و یا مثالی که در پائین همین صفحه آورده شده را خوب بررسی کنید .

از موارد دیگری که در خصیصه style تگ table قابل استفاده است width و height هستند .

تگ table این امکان را می دهد که چینش افق و عمودی هر سطر و یا سلول را به صورت مستقل و جداگانه تعیین کنیم . برای این کار می توانیم در هر سطر و یا ستون خصیصه های align و valign را بکار برد . اولی مربوط به چینش افقی و دومی مربوط به چینش عمودی است . توجه داشته باشید که اگر خصیصه align را در تگ table بنویسید خود جدول در وسط صفحه قرار می گیرد و نه محتویات آن .

در تگ table دو خصوصیت دیگر هم وجود دارد :

- خصیصه cellspacing : فاصله بین سلول ها را تنظیم می کند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .

- خصیصه cellpadding : حاشیه ای را از 4 طرف در داخل هر سلول ایجاد می کند . توجه کنید که align و valign بعد از اعمال cellpadding بر روی سلول اعمال می شوند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .

دو خصیصه مهم دیگری که در تگ td بکار می روند به شرح زیر هستند :

1- خصیصه colspan : این خصیصه یک مقدار عددی می گیرد و مشخص کننده تعداد ستونهایی است که باید توسط این سلول پوشش داده شوند . به عنوان مثال اگر مقدار این خصیصه برابر با 3 باشد این سلول به اندازه پهنای 3 سلول عادی فضا اشغال می کند . توجه کنید که این خصیصه حالتی شبیه به merge cell را پیاده سازی می کند ولی در واقع هیچ گونه merge رخ نداده است .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .

2- خصیصه rowspan : این خصیصه همانند خصیصه colspan عمل می کند با این تفاوت که در مورد سطرها عمل می کند .یعنی مثلا اگر سلولی دارای rowspan برابر با 2 باشد این سلول در دوسطر حضور خواهد داشت . برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .

این مثال شامل دو عکس می باشد . یکی عکس کد و دیگری عکس اجرای کد به همراه توضیح است .