article

ایجاد جدول با تگ table در HTML

html-table

از جمله مباحثی که علاوه بر استفاده های عمومی برای حرفه ای ترهای دنیای وب نیز همواره کاربردی بوده مبحث ایجاد جدول در صفحات وب است که خوشبختانه مانند ترسیم جدول در برنامه هایی نظیر Microsoft Word این امکان با کدنویسی در اسناد HTML نیز فراهم شده است، همان طور که در آموزش های گذشته دیدیم برای خلق هر قسمت از صفحات وب با زبان HTML از علائم نشانه گذاری تحت عنوان تگ (Tag) استفاده می شود که در نهایت پس از پردازش توسط مرورگر به شکل عناصر قابل درک برای انسان (متن، تصویر، ویدئو، فرم و...) نمایان می شوند، ایجاد جدول نیز از این قاعده مستثنا نیست و برای آن از تگ استاندارد table استفاده می کنیم، با توجه به تنوع امکانات و پیچیدگی های خاص ایجاد جدول در صفحات وب تگ table به همراه زیر مجموعه ها و ویژگی هایی استفاده می شود که در ادامه در این خصوص مفصل خواهیم گفت.

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


جداول در زندگی روزمره کاربردهای زیادی دارند و بسیاری از اطلاعات در فرمت ردیف های سطر (Row) و ستون (Column) مرتبط به هم نمایش داده می شوند، نمایش محتوا در جدول این امکان را می دهد که با سرعت بیشتری اطلاعات پیچیده را تحلیل و به ارتباطات بین آنها پی ببریم و در نهایت به نتیجه مورد نظر برسیم، فلسفه اصلی به کارگیری جداول در صفحات وب نیز از این قاعده مستثنی نیست و برای دسته بندی و نمایش محتوایی که نیاز به سطر و ستون دارند به طور مثال اطلاعات آماری، نمایش نمرات، مقایسه محصولات، داده های تحلیلی و هر چیزی که به اصطلاح جدولی یا Tabular است استفاده می شود، البته به دلیل استحکام ساختار و راحتی کار مدتها از جدول در امر طراحی لایه ها و فرم بندی ظاهر صفحات وب نیز استفاده می شد که امروزه به دلیل معرفی زبان استایل نویسی CSS توصیه می شود از کاربرد جدول بخصوص در طراحی قالب پروژه هایی که به کسب رتبه بهتر در موتورهای جستجو و اصول سئو (SEO دانش بهینه سازی صفحات وب برای موتورهای جستجو) متکی هستند اجتناب کنیم، برای طراحی قالب های جدید تگ های دیگری مانند div گزینه بهتر و توصیه شده است.

ایجاد جدول با تگ table


برای ایجاد جدول در صفحات وب از تگ table استفاده می کنیم که در کنار تگ های زیرمجموعه شامل tr، th و td تکمیل می شود، table از تگ های فرعی دیگری شامل caption، col، colgroup، thead، tbody و tfoot نیز پشتیبانی می کند که هر کدام کاربرد و اثر خاصی دارند، نمونه کد زیر شروع ساختار ایجاد یک جدول در صفحات وب را نمایش می دهد:
<table>
<tr>
<td></td>
</tr>
</table>
هر جدول حداقل باید دارای یک ردیف با تگ tr (مخفف Table Row) باشد که هر ردیف می تواند یک یا چند سلول اطلاعات با تگ td (مخفف Table Data) را شامل شود، به عبارتی از نظر استاندارد کدنویسی تگ table حداقل باید یک تگ tr و یک تگ td در زیرمجموعه خود داشته باشد، علاوه بر تگ ها خاصیت های زیادی را نیز می توان به تگ table نسبت داد که در ادامه و پیش از بررسی تگ های زیرمجموعه به آنها اشاره می کنیم.
نکته: به این خاصیت ها در اصطلاح برنامه نویسی Attributes گفته می شود، Attribute در واقع صفت های اضافه اند که در تگ های آغازین قابل استفاده هستند و ویژگی ها و انعطاف پذیری بیشتری به تگ مورد نظر می دهند.

خاصیت align


خاصیت align تنظیم کننده موقعیت جدول در سمت راست، چپ یا وسط صفحه است و با سه مقدار زیر تکمیل می شود:
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه
<table align="right">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
در شیوه های نوین طراحی وب توصیه می شود ویژگی های ظاهری مانند چینش با استایل نویسی CSS تنظیم شوند نه خاصیت های HTML، لذا در این آموزش علاوه بر خاصیت های ذاتی تگ table روش توصیه شده با CSS را هم بررسی خواهیم کرد.
تعریف align برای جدول با استایل CSS (روش توصیه شده):
<style>
#table-1{
    margin-left:auto;
    margin-right:0;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
برای تنظیم فاصله جدول از گوشه های صفحه نمایش از ویژگی margin در CSS استفاده می کنیم.

خاصیت background


اگر بخواهیم به جدولمان تصویر پس زمینه اختصاص دهیم خاصیت background برای این منظور در نظر گرفته شده است که مقادیر آن باید با آدرس URL مطلق (Absolute) یا نسبی (Relative) تصویر مورد نظر جایگزین شود، به طور مثال:
<table background="../background.png">
<tr>
<td>آدرس دهی نسبی</td>
</tr>
</table>
<table background="http://example.com/image/background.png">
<tr>
<td>آدرس دهی مطلق</td>
</tr>
</table>
گفتیم که خاصیت های مربوط به ظاهر عناصر وب را بهتر است با CSS تنظیم کنیم، برای تصویر پس زمینه نیز این حالت صدق می کند.
تنظیم تصویر پس زمینه جدول با CSS (روش توصیه شده):
<style>
#table-1{
    background: url('../image/background.png') no-repeat;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
نکته: در آدرس دهی نسبی استفاده از دو نقطه (..) به این معنی است که محل قرارگیری فایل تصویر در دایرکتوری سطح بالاتر از محل قرارگیری فایل HTML است، به فرض اگر در قسمت آدرس بعد از دو نقطه صرفا نام فایل تصویر درج شود:
../background.png
نمونه ساختار:
template/background.png
template/publish/index.html
یعنی تصویر یک دایرکتوری بالاتر از فایل HTML قرار دارد و به همین ترتیب اگر چند دایرکتوری در آدرس باشد:
../../image/background.png
نمونه ساختار:
template/image/background.png
template/include/publish/index.html
به همان تعداد تصویر در دایرکتوری های بالاتر قرار دارد، بر همین اساس اگر از دونقطه استفاده نشود یعنی محل قرارگیری تصویر هم سطح یا پائین تر از محل قرارگیری فایل HTML است:
image/background.png
نمونه ساختار:
template/image/background.png
template/index.html
برای درک بهتر شیوه نسبی می توانیم چند فولدر به شکل ساختارهای بالا ایجاد و آدرس دهی نسبی را تست و بررسی کنیم.

خاصیت bgcolor


علاوه بر تصویر پس زمینه این امکان وجود دارد که رنگ پس زمینه جدول را با خاصیت bgcolor تعیین کنیم، مقادیر خاصیت bgcolor می تواند کدهای رنگی هگز یا نام رنگ مورد نظر باشد، مثال:
<table bgcolor="#0066cc">
<tr>
<td>تنظیم رنگ با کدهای هگز</td>
</tr>
</table>
<table bgcolor="blue">
<tr>
<td>تنظیم رنگ با نام</td>
</tr>
</table>
تنظیم رنگ پس زمینه جدول با CSS (روش توصیه شده):
<style>
#table-1{
    background: #0066cc;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
در لینک زیر جدول رنگ های با نام CSS و کد هگز معادل آنها درج شده است که می توانیم برای خاصیت های مربوط به تعیین رنگ از آنها استفاده کنیم:
جدول رنگ های با نام و کد هگز معادل آنها در CSS

خاصیت border


از خاصیت border برای نمایش خط حاشیه جدول و سلول های داخلی می توانیم استفاده کنیم، مقادیر آن به صورت عددی در مقیاس پیکسل تعیین می شود، مثال:
<table border="1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
نمایش خط حاشیه جدول با CSS (روش توصیه شده):
<style>
#table-1, #table-1 td {
    border: 1px solid;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
دقت کنیم در حالت صرف HTML تعیین مقدار برای خاصیت border به صورت خودکار به تگ هایی مانند td و th سرایت می کند اما در حالت استایل CSS باید این تگ ها را انتخاب (Select) کنیم که بدین منظور از قوانین سلکتور در CSS استفاده می کنیم (به فرض ما تگ td را در کد بالا به این شیوه جهت اعمال استایل انتخاب کرده ایم)، البته در این مرحله قصد ما آموزش CSS نیست و در حد آشنایی اولیه کفایت می کند.

خاصیت bordercolor


خاصیت bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند، مقادیر این ویژگی نیز با نام رنگ ها یا کدهای هگز تنظیم می شود، مثال:
<table border="1" bordercolor="#FF6600">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
علاوه بر خاصیت bordercolor می توانیم از خاصیت های bordercolorlight و bordercolordark استفاده کنیم، البته این خاصیت ها به جزء در مرورگر اینترنت اکسپلورر ممکن است در برخی مرورگرها با اشکالاتی همراه باشند یا به خوبی پشتیبانی نشوند، در هر صورت bordercolorlight رنگ زاویه بالایی جدول و bordercolordark رنگ زاویه پائینی آن را تنظیم می کند، مثال:
<table border="1" bordercolor="#FF6600" bordercolorlight="#FF6600" bordercolordark="#FF6600">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
تنظیم رنگ خط حاشیه جدول با CSS (روش توصیه شده):
همانند تنظیم رنگ با استایل CSS برای خاصیت boder این امکان برای خاصیت bordercolor نیز وجود دارد، مثال:
<style>
#table-1, #table-1 td {
    border: 1px solid #FF6600;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
بر خلاف خاصیت های ذاتی HTML که محدود به موارد قراردادی و از قبل تعریف شده هستند، در CSS می توانیم جلوه های متنوع بیشتری به تگ های HTML نسبت دهیم.

خاصیت cellpadding


خاصیت cellpadding در جدول میزان فاصله محتوا از حاشیه سلول را مشخص می کند، مقدار این خاصیت نیز به پیکسل است و هر چه عدد تعیین شده بزرگتر باشد فضای خالی داخلی سلول ها نیز وسیعتر شده و محتوای درون آنها با فاصله بیشتری از حدود دربرگیرنده نمایش داده می شود، مثال:
<table border="1" cellpadding="8">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
تنظیم حاشیه سلول در جدول با CSS (روش توصیه شده):
برای تنظیم میزان حاشیه سلول در جدول با CSS از خاصیت padding استفاده می کنیم.
<style>
#table-1, #table-1 td {
    border: 1px solid #FF6600;
}
#table-1 td {
    padding: 8px;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
بر خلاف cellpadding که بر تگ های td و th تاثیرگذار است، خاصیت padding را می توان به تگ table نیز نسبت داد.

خاصیت cellspacing


خاصیت cellspacing در جدول میزان فضا و فاصله بین سلول های داخلی از هم و از حاشیه جدول را مشخص می کند، مقادیر این خاصیت نیز به صورت پیکسل تعیین می شود، مثال:
<table border="1" cellpadding="8" cellspacing="12">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
تنظیم فاصله بین سلول ها در جدول با CSS (روش توصیه شده):
برای تنظیم فاصله بین سلول ها در جدول با CSS از خاصیت border-spacing و در صورت نیاز به تنظیمات بیشتر border-collapse استفاده می کنیم.
<style>
#table-1, #table-1 td {
    border: 1px solid #FF6600;
    border-spacing: 12px;
    border-collapse: separate;
}
#table-1 td {
    padding: 8px;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
با خاصیت border-collapse می توانیم تعیین کنیم که تاثیرپذیری خطوط سلول های جدول با هم مشترک (مقدار collapse) باشند یا از هم مستقل (مقدار separate) و در نتیجه کار تفاوت را مشاهده کنیم.

خاصیت height


برای تنظیم ارتفاع کلی جدول از خاصیت height استفاده می کنیم، مقادیر این خاصیت به پیکسل تعیین می شود، مثال:
<table border="1" cellpadding="8" cellspacing="12" height="500">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
تنظیم ارتفاع جدول با CSS (روش توصیه شده):
برای تنظیم ارتفاع کلی جدول با استایل CSS از خاصیت height برای تگ table می توانیم استفاده کنیم.
<style>
#table-1{
    height: 500px;
}
#table-1, #table-1 td {
    border: 1px solid #FF6600;
    border-spacing: 12px;
    border-collapse: separate;
}
#table-1 td {
    padding: 8px;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
در حالت پیش فرض با تغییر ابعاد جدول اندازه سلول های اطلاعات (تگ td) نیز به صورت خودکار تغییر می کند.

خاصیت width


برای تنظیم عرض کلی جدول از خاصیت width استفاده می کنیم، مقادیر این خاصیت نیز به پیکسل تعیین می شود، مثال:
<table border="1" cellpadding="8" cellspacing="12" height="500" width="400">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
تنظیم عرض جدول با CSS (روش توصیه شده):
برای تنظیم عرض کلی جدول با استایل CSS از خاصیت width برای تگ table استفاده می کنیم.
<style>
#table-1{
    height: 500px;
    width: 400px;
}
#table-1, #table-1 td {
    border: 1px solid #FF6600;
    border-spacing: 12px;
    border-collapse: separate;
}
#table-1 td {
    padding: 8px;
}
</style>
<table id="table-1">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
با CSS این امکان وجود دارد که برای تگ های زیرمجموعه table ارتفاع و عرض مجزا تعریف کنیم.

خاصیت rules


خاصیت rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت پیش فرض با تعیین خاصیت border در جدول برای تمام سلول ها (تگ td)، ستون ها (تگ th) و ردیف ها (تگ tr) خطوط ترسیم می شود، اما با تعیین ویژگی rules می توانیم نمایش خطوط را سفارشی کنیم، ویژگی rules با چند مقدار زیر تنظیم می شود:
all: خطوط برای تمام سلول ها، ردیف ها و ستون ها ایجاد می شود (حالت پیش فرض).
cols: خطوط صرفا برای ستون ها (تگ th) ترسیم می شود.
rows: خطوط صرفا برای ردیف ها (تگ tr) ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.
<table border="1" cellpadding="8" cellspacing="12" height="500" width="400" rules="cols">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>

<table border="1" cellpadding="8" cellspacing="12" height="500" width="400" rules="rows">
<tr>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
در ادامه آموزش حاضر در خصوص نحوه گروه بندی در جدول و استفاده از مقدار groups توضیح خواهیم داد.

خاصیت title


از خاصیت title برای ایجاد عنوان متنی جدول استفاده می شود، این عنوان در هنگامی که نشانه گر ماوس را داخل جدول ببریم به صورت بالن (Tooltip) ظاهر می شود.
<table border="1" cellpadding="8" cellspacing="12" height="200" width="200" title="عنوانی برای جدول">
<tr>
<td>نشانه گر ماوس را در این قسمت نگهدارید</td>
</tr>
</table>
در نظر گرفتن عنوان برای جدول علاوه بر استفاده های معمول می تواند از نظر سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) مفید باشد و به فهم بهتر محتوای جدول توسط ربات ها کمک کند.

ادامه آموزش در حال بازبینی و ویرایش است...


ایجاد سطر جدید در جدول با تگ tr


از تگ tr (مخفف Table Row) برای ایجاد سطر جدید در جدول استفاده می شود، این تگ یکتا نیست و باید پایان آن بسته شود، تگ tr می تواند شامل یک یا چند تگ th یا td باشد، مثال:
<table border="1">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
با پردازش کدها مرورگر سلول های هر ردیف را در یک راستا نمایش می دهد و ردیف بعدی به یک سطح پایین تر منتقل می شود.

ایجاد سرتیتر در جدول با تگ th


تگ th (مخفف Table Header) در جدول نشانگر سرتیتر است، با استفاده از این تگ می توانیم اطلاعات جدول را در عناوین مختلف دسته بندی کنیم، مثال:
<table border="1">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
در حالت معمول هر تگ th به اندازه یک سلول فضا ایجاد می کند و معمولا تعداد سرتیترها به اندازه سلول های ردیف ها در نظر گرفته می شود، البته با خاصیت هایی مانند colspan می توانیم اندازه سرتیتر را بیش از یک سلول تنظیم کنیم (در ادامه خواهیم گفت).

ایجاد سلول در جدول با تگ td


گفتیم تگ table به تنهایی کاربردی ندارد و معمولا باید هر جدول حداقل شامل تگ های tr و td باشد، تگ td (مخفف Table Data) سلول های داخلی جدول را می سازد که دربرگیرنده اطلاعات هستند، مثال:
<table border="1">
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
سه تگ tr، th و td بیشترین کاربرد را در ایجاد جداول با تگ table در صفحات وب دارند.

ایجاد عنوان جدول با تگ caption


از تگ caption برای ایجاد عنوان جدول استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف محتوای آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد، مثال:
<table border="1">
<caption>عنوانی برای جدول</caption>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
</table>
در اصطلاح برنامه نویسی تگ table (تگ سطح بالاتر) را والد (Parent) و تگ caption (تگ زیرمجموعه) را فرزند (Child) می گویند، caption باید نخستین فرزند والد خود باشد.

خاصیت های تگ th


در زیر به صورت مختصر اشاره ای می کنیم به برخی ویژگی های فرعی تگ th و معنی آنها.
abbr: عبارت abbr مخفف abbreviation یا اختصار است و کاربرد آن در سرتیترهای جداول، به جهت تعیین یک متن مختصر و معرفی آن تیتر است، این ویژگی در حالت معمول قابل رویت نیست اما برای موارد خاص مانند موتورهای جستجو، می تواند مفید باشد.
<th abbr="abbr text">تیتر جدول</th>
axis: ویژگی axis (به معنی محور، قطب) برای تیترهای جداول، معرف دسته بندی آنها است و  در حالت معمول کاربرد خاصی ندارد، اما مانند abbr می تواند برای موارد خاص مورد استفاده قرار گیرد.
<th axis="category">تیتر جدول</th>
colspan: ویژگی colspan در واقع طول یک تیتر را نسبت به تگ ها td زیرمجموعه خود مشخص می کند، به فرض ممکن است یک تیتر برای دو سلول به کار رود، لذا با تنظیم colspan با مقدار 2، آن تیتر به اندازه دو سلول کشیده می شود.
<table border="1">
<tr>
<th colspan="2">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
نکته: تنظیم colspan با عدد صفر تنها برای موارد ستون های گروهی کاربرد دارد.
rowspan: ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد 2 برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد.
<table border="1">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
valign: عنصر valign برای تیتر جداول به جهت تنظیم محل نمایش آنها از لحاظ موقعیت عمودی (vertical) کاربرد دارد، valign می تواند مقادیر زیر را دارا باشد.
- top (بالا)
- baseline (خط مبنا)
- bottom (پائین)
- middle (وسط)
<th valign="middle">تیتر جدول</th>

گروه بندی ستون ها با تگ colgroup و col


از تگ colgroup و col برای فرمت بندی ستون های جدول به صورت تفکیک شده و گروهی استفاده می شود، به فرض در یک جدول با سه ستون و سه ردیف متفاوت، می توان سه فرمت بندی متفاوت داشت، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد، از colgroup می توان بدون col یا با آن استفاده کرد.
<table border="1">
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
استفاده از colgroup به همراه تگ col:
<table border="1">
<colgroup>
<col style="background-color:#6CF"></colgroup>
<col style="background-color:#CCC"></colgroup>
<col style="background-color:#FC0;"></colgroup>
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

فرمت بندی با تگ های thead، tbody و tfoot


سه تگ thead، tbody و tfoot شیوه ی دیگری از فرمت بندی را در جداول html ارائه می کنند، با thead می توان سرتیترها را به صورت گروهی و متمایز نشان داد، تگ tbody بر روی عناصر داخلی جدول تاثیر گذار است و tfoot ردیف پایانی یک جدول را تحت تاثیر قرار می دهد، تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css تنظیم شوند.
<table border="1">
<thead style="color:#F60;">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
</thead>
<tbody style="color:#FC0">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tbody>
<tfoot style="color:#CCC">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tfoot>
</table>

مثال و پیش نمایش آنلاین


برای آشنایی بیشتر با نحوه ترسیم جداول و خواص آنها، چند جدول متفاوت را در مثال زیر ترسیم کرده ایم که می توانید به صورت آنلاین، کد و پیش نمایش آن را ملاحظه کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ترسیم جداول در صفحات وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<table width="400" border="1" cellspacing="2" cellpadding="2" style="text-align:center;" align="center">
<caption>
جدول شماره 1
</caption>
<tr>
<th bgcolor="#CCCCCC">تیتر 1</th>
<th bgcolor="#CCCCCC">تیتر 2</th>
<th bgcolor="#CCCCCC">تیتر 3</th>
</tr>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
<td>سلول 3</td>
</tr>
<tr>
<td>سلول 4</td>
<td>سلول 5</td>
<td>سلول 6</td>
</tr>
</table>
<!-- جدول شماره 2 -->
<table border="1">
<caption>
جدول شماره 2
</caption>
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
<!-- جدول شماره 3 -->
<table border="1" align="left">
<caption>
جدول شماره 3
</caption>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
<!-- جدول شماره 4 -->
<table width="400" border="1" cellspacing="2" cellpadding="2" style="text-align:center;" align="center">
<caption>
جدول شماره 4
</caption>
<tr>
<th bgcolor="#CCCCCC">تیتر 1</th>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<th bgcolor="#CCCCCC">تیتر 2</th>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
<tr>
<th bgcolor="#CCCCCC">تیتر 3</th>
<td>سلول 5</td>
<td>سلول 6</td>
</tr>
</table>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
» نحوه ایجاد لینک در HTML
» کار با تگ فرم (form) در HTML
» کار با تگ های ایجاد کننده لیست در HTML
commentنظرات (۳۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محمد محمودی
۰۰:۳۸ ۱۳۹۲/۰۲/۰۶
این آموزشی خوب همراه با توضیحی خوب بود. اگر آموزش کامل html5 و css3 رو به صورت pdf بتونید به ایمیلم بفرستید ممنون میشم.
پاسخ: 
متاسفانه امکان ارسال آموزش به ایمیل وجود ندارد، مطالب صرفا از طریق سایت منتشر می شوند.
نویسنده: حسام
۱۸:۱۹ ۱۳۹۲/۰۴/۰۴
سلام
خسته نباشيد
من مي خوام يه همچين جدولي درست كنم
راهنماييم مي كنيد؟
http://8pic.ir/images/68899477069823482367.png
پاسخ: 
سلام
در آموزش به طور کامل نحوه طراحی جدول و استفاده از خاصیت ها توضیح داده شده، به طور مثال در پیش نمایش، جدول شماره 1 تقریبا همان چیزی است که نیاز شما است، ضمن اینکه برای سفارشی سازی ظاهری باید با CSS آشنایی داشته باشید.
نویسنده: مجتبی
۱۷:۲۷ ۱۳۹۲/۰۹/۱۵
سلام
من ویژگی colspan رو نفهمیدم
میتونید راهنماییم کنید؟
پاسخ: 
سلام
لطفا نمونه کدهایی که در آموزش (زیر توضیحات colspan و rowspan) آمده را در یک فایل HTML قرار داده و آن را تست کنید.
نویسنده: مجتبی
۱۷:۲۲ ۱۳۹۲/۰۹/۱۸
سلام
ویژگی rules برای چیست و چه موقع هایی استفاده می شود؟
پاسخ: 
سلام
لطفا آموزش را مطالعه کنید، در حد توان کامل توضیح داده شده!
نویسنده: reza
۱۲:۳۲ ۱۳۹۲/۱۰/۰۳
واقعا کامل ترین آموزش html بود خیلی ممنون
نویسنده: مریم
۰۱:۲۶ ۱۳۹۲/۱۰/۲۵
کامل بود. مرسی
نویسنده: سجاد
۰۹:۳۱ ۱۳۹۲/۱۱/۱۴
سلام؛
ضمن تشکر از مطالب بسیار خوب و جامع شما، سوالی داشتم ...
در قسمت تگ <th> خاصیتی به نام bgcolor را معرفی کردید، برای رنگ پس زمینه ی سلول! این کد در صفحه ی HTML معمولی - نوت پد و تبدیل آن به web page - جواب می دهد، اما در برنامه ی Visual Studio 2013 این کد ناشناخته است! مشکل از کجاست ؟
با تشکر ...
پاسخ: 
سلام
خاصیت مذکور استاندارد HTML است و ارتباطی به سایر موارد ندارد، تنها در صورتی قابل استفاده است که خروجی شما HTML باشد یا اینکه از استاندارد آن پیروی کند.
نویسنده: نسرین رفعتی
۱۵:۰۱ ۱۳۹۲/۱۱/۱۵
سلام من میخوام برای جدول عکس پس زمینه بذارم عکسم هم در همان مسیر فایل اصلیم هست مگه نباید اول اسم عکس
./
را بذارم پس چرا عکس رو نشون نمیده؟
پاسخ: 
سلام
اگر عکس در کنار فایل HTML است، نیاز به استفاده از علامت دایرکتوری بالاتر نیست (چون تصویر در دایرکتوری بالاتر نیست!)، لذا کافی است نام تصویر را (به صورت کامل و با فرمت) استفاده کنید.
نویسنده: حسن
۲۳:۲۶ ۱۳۹۲/۱۱/۲۳
سلام خسته نباشید!
من یک table دارم با دو ستون ، در ستون سمت راست مطالب زیادی هست ولی در ستون سمت چپ فقط 1 مطلب قرار دارد!
بدلیل وجود مطالب زیاد در ستون سمت راست ارتفاع جدول زیاد می شود و مطلبی که در ستون سمت چپ قرار دارد ، در وسط ستون سمت چپ قرار می گیرد!
چیکار کنم که مطلب موجود در ستون سمت چپ هم از بالا شروع شود و در وسط ستون قرار نگیرد!
پاسخ: 
سلام
در صورتی که با CSS آشنایی داشته باشید می توانید از خاصیت vertical-align با مقادیر top استفاده کنید، در غیر این صورت تگ td را مطابق نمونه زیر تنظیم کنید:
<td valign="top"></td>
نویسنده: مهدی
۱۴:۴۷ ۱۳۹۲/۱۲/۰۹
خیلی عالی و کامل ممنون
نویسنده: مهدی
۱۶:۲۵ ۱۳۹۳/۰۱/۰۴
سلام
آیا امکانش هست با استفاده از table فضای مورد نظر عناصر سایتمون را مشخص کنیم و بعد مقدار border=0 قرار بدیم ؟ اینکار تو بهینه سازی سایتمون تاثیر نمیزاره؟
پاسخ: 
سلام
بهتر است به جای table از بلاک های div برای فرمت بندی صفحات HTML استفاده کنید، امروزه جدول کاربردهای خاص خود (از جمله ارائه اطلاعات آماری و جدول بندی شده) را دارد و نباید در طراحی صفحه وب استفاده شود، سعی کنید برای طراحی وب CSS را یاد بگیرید.
نویسنده: حسین
۱۵:۱۲ ۱۳۹۳/۰۲/۰۲
نمی شه پی دی افش رو هم بزارید تا هی کپی پیست نکنیم.
پاسخ: 
مطالب جهت یادگیری است نه کپی پیست؟! :-)
اگر منظور مشاهده آفلاین است، می توانید صفحه را ذخیره کنید (در آینده امکانی برای پرینت و ذخیره مقاله به صورت مستقیم فراهم خواهد شد).
نویسنده: محمد
۱۴:۵۹ ۱۳۹۳/۰۸/۱۰
اسم اینجور کد نویسی چیه؟ منظورم اینه که کدها داخل یک فیلد هستش مثلا تو زبان فارسی اگه بخوای کدها رو همینجوری بنویسی حروف انگلیسی قاطی پاتی میشه / اسم این ترفند چیه ؟؟؟ :))
پاسخ: 
این ترفند نیست دوست گرامی!
باید به تگ pre در HTML خاصیت direction:ltr و استایل CSS دلخواه اختصاص دهید!
نویسنده: محمد
۲۰:۴۲ ۱۳۹۳/۱۰/۲۳
سلام خسته نباشید. من 2 جدول با تگ های td ایجاد کردم جدول شماره یک رو چپ قرار دادم حالا میخوام جدول شماره 2 رو وسط و هم خط جدول 1 قرار بدم. چه طور میتونم این کار رو بکنم.
اینو ببینید مشکلم اینه
http://www.kordavang.ir/music/ghaleb
پاسخ: 
سلام
- نکته اول اینکه طراحی قالب وب با جدول روشی منسوخ شده است و نباید دیگر استفاده شود! از جدول صرفا برای نمایش آمار و اطلاعات درون محتوایی می توان استفاده کرد، به جای جدول از بلاک های div و استایل CSS استفاده کنید.
- نکته دوم اینکه ظاهرا تگ های جدول را با تگ div تلفیق کرده اید، در این صورت باید با CSS آشنا باشید تا بتوانید استایل inline به بلاک ها اختصاص دهید و عرض آنها را طوری تنظیم کنید که در یک خط باشند.
نتیجه: از جدول برای فرمت بندی قالب وب استفاده نکنید، سعی کنید استایل نویسی CSS را در کنار کار با بلاک های div فرا بگیرید.
نویسنده: مهدی
۱۱:۱۳ ۱۳۹۳/۱۲/۱۷
سلام .خسته نباشید
من از تگ table استفاده میکنم اما نتیجه در مرورگر مشاهده نمیشود . مشکل از کجاست لطفا راهنمایی کنید . مرسی!!!!!
پاسخ: 
سلام
نیاز به بررسی سورس صفحات شما است! لطفا آدرس نمونه صفحات یا فایل هایتان را درج کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 6
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.