در آموزش امروز به نحوه ی استفاده از تگ Table برای ایجاد جداول HTML خواهید پرداخت.

آموزش ایجاد جدول و تگ table در html از جمله مباحثی است که علاوه بر کاربردهای عمومی، برای حرفه ای تر های دنیای وب نیز همواره کاربردی بوده و هست، چرا که از یک طرف دامنه موارد استفاده آن، باعث این امر شده و از طرفی، کمی پیچیدگی ظاهری و جزئیات، کار با آن را دشوار کرده است، البته این گفته که کار با جدول دشوار است، به یقین بعد از تسلط و آشنایی نسبی با تگ ها و نحوه استفاده از آنها، درست نخواهد بود

 

مثال – تگ table در HTML

جدول HTML ساده، حاوی دو ستون و دو ردیف:

تگ جدول

 

تعریف و کاربرد تگ table در HTML

هر جدول میتواند شامل سربرگ جدول، ردیف ها و سلول های اطلاعات باشد.

در HTML  برای تعریف یک جدول از تگ <table>استفاده میکنیم.

جدول HTML  از عنصر <table> تشکیل شده است. عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است، البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود..

یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شود)، هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شود) و یک جدول شامل اطلاعات سرتیتر  می باشد(که با تگ <th> مشخص می شود).

جداول پیچیده تر نیز شامل عناصر <caption> ،<col> ،<colgroup> ،<thead> ،<tfoot> و <tbody> نیز می باشد.

تگ جدول در صفحات وب

همانطور که مشاهده میکنید سربرگ جداول در حالت پیشفرض به صورت Bold و وسط چین به نمایش در می آیند. همچنین در صورتی که جهت نوشتار شما ltr باشد، محتوای خانه های جدول در سمت چپ به نمایش در آمده و در صورت rtl بودن صفحه، محتوا از سمت راست نمایان خواهد شد.

در مورد عنصر td جالب است به این نکته اشاره کنیم که این عنصر میتواند عناصر html متنوعی را بدون محدودیت در بر بگیرد. یعنی مثلا میتوانید در یک تگ td یک جدول دیگر، تصویر، نوشته، لیست و … نیز قرار دهید و در این رابطه محدودیتی وجود نخواهد داشت.

جدولی که در بالا ایجاد کردیم بسیار ساده بود. طبعا برای مرتب تر شدن و زیباتر شدن آن به کمی سفارشی سازی و استایل نیاز داریم. بنابراین در قدم بعد بهتر است با ویژگی های (attribute) اختصاصی این تگ آشنا شویم.

 

خصوصیت ها

 

خصوصیت مقدار توضیحات
align left
center
right
در HTML5 پشتیبانی نمی شود.
نحوه تراز بندی و قرار گیری جدول را مشخص می کند.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
در HTML5 پشتیبانی نمی شود.
رنگ پس زمینه جدول را مشخص می کند.
border ۱
“”
در HTML5 پشتیبانی نمی شود..
ضخامت و پهنای خطوط حاشیه دور جدول را تعیین می کند.
cellpadding pixels در HTML5 پشتیبانی نمی شود.
فضای بین دیواره ی سلول و محتویات درون سلول را مشخص می کند.
cellspacing pixels در HTML5 پشتیبانی نمی شود.
فضای بین سلول های جدول را مشخص می کند.
frame void
above
below
hsides
lhs
rhs
vsides
box
border
در HTML5 پشتیبانی نمی شود.
مشخص می کند که کدام یک ازborder هایی که در اطراف جدول است نمایش داده شود.
rules none
groups
rows
cols
all
در HTML5 پشتیبانی نمی شود.
مشخص می کند کدام یک از حاشیه های داخلی جدول نمایش داده شود.
sortable sortable مشخص می کند که جدول باید به صورت sortable باشد.
summary text در HTML5 پشتیبانی نمی شود.
خلاصه ای در مورد جدول را مشخص می کند.
width pixels
%
در HTML5 پشتیبانی نمی شود.
عرض جدول را مشخص می کند.

اضافه کردن کادر به جدول – Border
برای اضافه کردن کادر به دور جدول و خانه های آن میتوانیم از استایل زیر استفاده کنیم :

در این حالت نتیجه ای مشابه تصویر زیر حاصل میشود :

تگ جدول در صفحات وب

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

 

تعریف فاصله بین کادر یا border spacing

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

طبعا با تغییر مقدار ۱۵px به مقدار دلخواه خود میتوانید این فاصله را کمتر یا بیشتر کنید.

تعریف cell padding برای خانه های جدول

همانطور که در کد بالا هم مشخص است، اطلاعات درج شده در خانه های جدول به یک طرف خانه چسبیده اند. نمایش اطلاعات در چنین حالتی نمای خوبی ندارد و اصلا جالب نیست. برای رفع این مشکل و اضافه کردن فاصله به داخل خانه های جدول باید برای سلول ها padding تعیین کنیم. برای تعریف padding میتوانید طبق کد زیر عمل کنید :

کد زیر به داخل خانه های جدول شما ۱۵ پیکسل فاصله اضافه میکند (بالا – راست – پایین – چپ) .

تگ جدول در صفحات وب

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

راست چین یا چپ چین کردن سربرگ های جدول

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

تگ جدول در صفحات وب

کد بالا نمایش سربرگ ها را به صورت راست چین در می آورد. برای نمایش چپ چین کافی است مقدار  right  را با left  جایگزین کنید.

 

ایجاد خانه هایی که چند ستون را اشغال میکنند

گاهی ممکن است نیاز داشته باشید جدولی بسازید که در آن یک سلول، فضای مربوط به چند ستون دیگر را نیز اشغال کرده و فضای آن چند برابر شود. به مثال زیر توجه کنید :

تگ جدول در صفحات وب
تگ جدول در صفحات وب

 

همانطور که مشاهده میکنید تعریف مقدار colspan و قرار دادن آن معادل عدد ۲ باعث شده که th مورد نظر، فضای یک سلول اضافه را نیز اشغال کند.

ایجاد خانه هایی که چند ردیف را اشغال میکنند

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

مشخص کردن مقدار ۲ برای rowspan باعث شده که سلول شماره تماس، فضایی دو برابر فضای عادی مجاز خود را اشغال کرده و جای یکی دیگر از سلول های جدول را نیز به خود اختصاص دهد.

 

تعریف استایل برای ردیف های زوج و فرد جدول

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

البته جداول میتوانند حاوی عناصر دیگری هم باشند که ما در اینجا سعی کردیم به عناصر اصلی هر جدول تکیه کنیم و به همین جهت از عناصر دیگر جداول html چشم پوشی کردیم.

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

معرفی HTML Tag – جلسه چهارم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *