منو

ایجاد جدول در html(قسمت هفتم)

ایجاد جدول در html
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه
<table>
<tr>
<td> </td>
</tr>
</table>

تگ <table> :

اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند :

1: ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم .

2: تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه . به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند .

جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود .

خصوصيات تگ Table
نام خاصيت نوع خاصيت شرح
align left
right
center
نحوه ترازبندی و قرار گيری جدول را در صفحه مشخص می کند که 3 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
bgcolor نام رنگ
color name
رنگ پس زمينه جدول را تعيين می کند .
border pixel ضخامت و پهنای خطوط حاشيه دور جدول را تعيين می کند .
cellpadding pixel ميزان فاصله بين خطوط حاشيه جدول و محتويات دورن خانه های درون آن را تعيين می کند .
cellspacing pixel فاصله بين خانه های جدول را تعيين می کند . در صورتی که مقدار اين خاصيت صفر باشد ، خانه های جدول به هم می چسبند .
frame above
below
border
box
hsides
lhs
rhs
vsides
مشخص می کند که کدام قسمت از خطوط حاشيه های جدول بايد نمايش داده شوند که می تواند يکی از حالت های زير را داشته باشد :
- above : خطوط بالايي جدول نمايش داده خواهند شد .
- below : خطوط پايينی جدول نمايش داده خواهند شد .
- border : کليه خطوط حاشيه های خانه های جدول نمايش داده خواهند شد .
- box : کليه خطوط حاشيه خانه های جدول نمايش داده خواهند شد .
- hsides : فقط خطوط افقی حاشيه خانه های جدول نمايش داده خواهند شد .
- lhs : فقط خطوط افقی سمت چپ حاشيه خانه های جدول نمايش داده خواهند شد .
- rhs : فقط خطوط افقی سمت راست حاشيه خانه های جدول نمايش داده خواهند شد .
- vsides : فقط خطوط عمودی حاشيه خانه های جدول نمايش داده خواهند شد .
- void : هيچ کدام از خطوط حاشيه های خانه های جدول نمايش داده خواهند شد .
rules cols
rows
group
all
مشخص کننده نوع و حالت خطوط تقسيم کننده خانه های جدول به خانه های کوچکتر است که انواع ممکن آن عبارتند از :
- cols : خانه های جدول فقط بر حسب ستون ها با خطوط از هم جدا می شوند .
- rows : خانه های جدول فقط بر حسب سطرها با خطوط از هم جدا می شوند .
- group : خانه های جدول بر حسب گروه بندی داخلی در جدول با خطوط از هم جدا می شوند .
- all : تمام خانه های جدول با خطوط عمودی و افقی از هم جدا می شوند .
summary text يک متن خلاصه در مورد جدول است که برای برخی مرورگرهای صوتی يا بدون تصوير استفاده می شود .
width pixel
% درصد
ميزان پهنا و عرض جدول را تعيين می کند .

تگ <tr> :

از اين تگ برای ايجاد يک سطر در جدول استفاده می شود . در درون هر سطر به تعداد دلخواه می توان ستون ( خانه جدول ) به وسيله تگ < td > ، ايجاد کرد .

نکته : از تگ < tr > فقط برای ايجاد يک سطر و نه خانه جدول استفاده می شود . تگ < tr > ، بدون تگ < td > در درون آن خروجی ندارد .

خصوصيات تگ Tr
نام خاصيت نوع خاصيت شرح
align left
right
center
Justify
Char
نحوه ترازبندی و قرار گيری محتويات درون سطر جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
bgcolor نام رنگ
color name
رنگ پس زمينه خانه های سطر را تعيين می کند .
char کاراکتر
Character
کاراکتری که قرار است متن دورن سطر حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff Pixel
درصد %
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
valign top
bottom
middle
baseline
نحوه ترازبندی عمودی محتويات درون سطر جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .

تگ <td> :

از تگ < td > برای ايجاد يک خانه جدول درون يک سطر ( تگ tr ) استفاده می شود . هر خانه جدول می تواند خصوصيات منحصر به فرد و ويژه خود را داشته باشد .

نکته :تگ < td > فقط بايد درون تگ < tr > استفاده شود .

خصوصيات تگ Td
نام خاصيت نوع خاصيت شرح
abbr متن
Text
با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد .
align left
right
center
Justify
Char
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
axis نام
Text
يک نام را برای خانه جدول تعيين می کند .
bgcolor نام رنگ
color name
رنگ پس زمينه خانه جدول را تعيين می کند .
char کاراکتر
Character
کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff Pixel
درصد %
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
colspan عدد
Number
تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .*
height pixel میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
nowrap nowrap تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
rowspan عدد
Number
تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .*
scope Col
Colgroup
Row
Rowgroup
مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود . 
valign top
bottom
middle
baseline
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .
width pixel
% درصد
ميزان پهنا و عرض جدول را تعيين می کند .

تگ <th> :

از اين تگ برای ايجاد يک سر عنوان ( Header ) در بالای ستون های يک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگيرد ، در درون تگ باز و بسته < th > تعريف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمايش داده می شود .

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

این تگ به عنوان سر عنوان معروف است و معمولا وسط چین است .

خصوصيات تگ Th
نام خاصيت نوع خاصيت شرح
abbr متن
Text
با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد .
align left
right
center
Justify
Char
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
axis نام
Text
يک نام را برای خانه جدول تعيين می کند .
bgcolor نام رنگ
color name
رنگ پس زمينه خانه جدول را تعيين می کند .
char کاراکتر
Character
کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff Pixel
درصد %
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
colspan عدد
Number
تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات colspan برويد .
height pixel میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
nowrap nowrap تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
rowspan عدد
Number
تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات rowspan برويد .
scope Col
Colgroup
Row
Rowgroup
مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود . 
valign top
bottom
middle
baseline
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .
width pixel
% درصد
ميزان پهنا و عرض جدول را تعيين می کند .

الگوريتم طراحی جدول

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

درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نيز فقط می توان از تگ < td > استفاده کرد .

خانه هاو سطرهای يک جدول منظم و مرتب هستند . به عبارت ديگر به طور مثال نمی توان در يک سطر جدول 3 خانه و در سطر پايينی آن 2 خانه با پهناهای متفاوت ايجاد کرد . در چنين مواردی بايد با استفاده از خاصيت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنيک جدول های تو در تو اين مسئله را بر طرف کرد .

خطوط حاشیه

به هر td بطور مجزا می توان خطوط حاشیه اعمال کرد که در بخش استایل (style) به ان می پردازیم.

به کمک استایل می توانیم زیبایی را به جدول و هر تگ دیگر اعمال کنیم.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<table cellpadding="5" cellspacing ="0" border="1" width="100%" >
<tr>
<th> پایتخت </th>
<th> کشور </th>
</th>
<tr>
<td> تهران </td>
<td> ایران </td>
</tr>
<tr>
<td> رم </td>
<td> ایتالیا </td>
</tr>
</table>
</body>
</html>
پیش نمایش