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 border="1" 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" border="1">
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
برای تنظیم فاصله جدول از گوشه های صفحه نمایش از ویژگی margin در CSS استفاده می کنیم.
نکته: در خصوص خاصیت border در ادامه آموزش حاضر توضیح خواهیم داد.

خاصیت valign


برای تنظیم موقعیت محتوای داخل سلول های جدول به صورت عمودی (vertical) از خاصیت valign برای تگ های th و td استفاده می کنیم، این خاصیت با چند مقدار زیر قابل تنظیم است:
- top (بالا)
- baseline (خط مبنا)
- bottom (پائین)
- middle (وسط)
استفاده از خاصیت valign در مواردی که سلول بیش از یک واحد ارتفاع دارد می تواند کاربردی باشد، مثال:
<table border="1">
<tr>
<td rowspan="2" valign="top">اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
در خصوص خاصیت rowspan در ادامه آموزش با مثال توضیح خواهیم داد.
تعریف valign برای تگ های جدول با استایل CSS (روش توصیه شده):
<style>
#table-1 td {
    vertical-align: top;
}
</style>
<table border="1" id="table-1">
<tr>
<td rowspan="2">اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td>اطلاعات جدول</td>
</tr>
</table>
برای تنظیم چینش عمودی محتوا در سلول های جدول با CSS از خاصیت vertical-align استفاده می کنیم.

خاصیت background


اگر بخواهیم به جدولمان تصویر پس زمینه اختصاص دهیم خاصیت background برای این منظور در نظر گرفته شده است که مقادیر آن باید با آدرس URL مطلق (Absolute) یا نسبی (Relative) تصویر مورد نظر جایگزین شود، به طور مثال:
<table border="1" 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" border="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 border="1" 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" border="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 باید نخستین فرزند والد خود باشد.

گسترش عرض سلول با خاصیت colspan


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

<table border="1">
<tr>
<th colspan="3">تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
<td>اطلاعات جدول</td>
</tr>
<tr>
<td colspan="4">اطلاعات جدول</td>
</tr>
</table>
نکته: تنظیم colspan با عدد صفر تنها برای ستون های گروهی کاربرد دارد، در خصوص ایجاد گروه در جدول در ادامه خواهیم گفت.

گسترش ارتفاع سلول با خاصیت rowspan


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

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


از تگ colgroup و col برای فرمت بندی و استایل دهی به ستون های جدول به صورت تفکیک شده و گروهی استفاده می کنیم، به فرض در یک جدول با سه ستون می توانیم سه فرمت بندی متفاوت داشته باشیم، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد (نخستین فرزند والد خود باشد)، از colgroup به همراه تگ یکتای col استفاده می کنیم، مثال:
<table border="1">
<colgroup>
<col style="background-color:#6CF">
<col style="background-color:#CCC">
<col style="background-color:#FC0;">
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
تنظیم استایل تگ colgroup و col با کلاس های CSS (روش توصیه شده):
<style>
#table-1, #table-1 td {
    border: 1px solid #E5E5E5;
}
#table-1 .col-1 {
    background-color:#6CF;
}
#table-1 .col-2 {
    background-color:#CCC;
}
#table-1 .col-3 {
    background-color:#FC0;
}
</style>

<table id="table-1">
<colgroup>
<col class="col-1">
<col class="col-2">
<col class="col-3">
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
در هر دو نمونه کد بالا از CSS استفاده کرده ایم منتها روش دوم مبتنی بر استایل غیرخطی و از نظر سئو بهینه تر است (در مرحله فراگیری HTML آشنایی در حد مثال های بالا کفایت می کند، برای گام های بعدی در این خصوص در آموزش های CSS توضیح خواهیم داد).

فرمت بندی با تگ های 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>
استفاده از CSS برای تنظیم استایل تگ های thead، tbody و tfoot (روش توصیه شده):
<style>
#table-1, #table-1 td {
    border: 1px solid #E5E5E5;
}
#table-1 thead {
    background-color:#6CF;
}
#table-1 tbody {
    background-color:#CCC;
}
#table-1 tfoot {
    background-color:#FC0;
    text-align: center;
}
</style>
<table id="table-1">
<thead>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
</thead>
<tbody>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">محتوای جدول</td>
</tr>
</tfoot>
</table>
استفاده از این تگ ها اختیاری است و علاوه بر بحث استایل دهی می تواند به خواناتر شدن ساختار کدنویسی جدول مخصوصا برای موتورهای جستجو کمک کننده باشد.

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


برای آشنایی بیشتر با نحوه ترسیم جداول و خواص آنها در صفحات HTML چند جدول متفاوت را در نمونه کدهای زیر ترسیم کرده ایم که می توانیم به صورت آنلاین پیش نمایش را بررسی کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ترسیم جداول در صفحات وب</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#table-1 {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #E5E5E5;
}
#table-1 th {
    background: #CCC;
    border: 1px solid #E5E5E5;
}
#table-1 td {
    padding: 2px;
    margin: 2px;
    border: 1px solid #E5E5E5;
}
#table-2 {
    width: 400px;
    margin: auto 0 auto auto;
    text-align: center;
    border: 1px solid #E5E5E5;
}
#table-2 th {
    background: #CCC;
    border: 1px solid #E5E5E5;
}
#table-2 td {
    padding: 2px;
    margin: 2px;
    border: 1px solid #E5E5E5;
}
#table-3 {
    width: 400px;
    margin: auto auto auto 0;
    text-align: center;
    border: 1px solid #E5E5E5;
}
#table-3 th {
    background: #CCC;
    border: 1px solid #E5E5E5;
}
#table-3 td {
    padding: 2px;
    margin: 2px;
    border: 1px solid #E5E5E5;
}
#table-4 {
    width: 400px;
    margin: auto 0 auto auto;
    text-align: center;
    border: 1px solid #E5E5E5;
}
#table-4 th {
    background: #CCC;
    border: 1px solid #E5E5E5;
}
#table-4 td {
    padding: 2px;
    margin: 2px;
    border: 1px solid #E5E5E5;
}
.col-1 {
    background-color:#6CF;
}
.col-2 {
    background-color:#CF0;
}
.col-3 {
    background-color:#FC0;
}
.clear {
   width: 100%;
   clear: both;
}
</style>
</head>
<body>
<!-- جدول شماره 1 -->
<table id="table-1">
<caption>
جدول شماره 1
</caption>
<tr>
<th colspan="2">تیتر th colspan</th>
<th>تیتر th</th>
</tr>
<tr>
<td>سلول td 1</td>
<td>سلول td 2</td>
<td>سلول td 3</td>
</tr>
<tr>
<td>سلول td 4</td>
<td>سلول td 5</td>
<td>سلول td 6</td>
</tr>
</table>
<!-- جدول شماره 2 -->
<table id="table-2">
<caption>
جدول شماره 2
</caption>
<colgroup>
<col class="col-1">
<col class="col-2">
<col class="col-3">
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
<!-- جدول شماره 3 -->
<table id="table-3">
<caption>
جدول شماره 3
</caption>
<tr>
<th class="col-1">تیتر th</th>
<th class="col-1">تیتر th</th>
<th class="col-1" rowspan="3">تیتر th rowspan</th>
</tr>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
</table>
<div class="clear"></div>
<!-- جدول شماره 4 -->
<table id="table-4">
<caption>
جدول شماره 4
</caption>
<tr>
<th>تیتر 1</th>
<td class="col-1">سلول 1</td>
<td class="col-1">سلول 2</td>
</tr>
<tr>
<th>تیتر 2</th>
<td class="col-2">سلول 3</td>
<td class="col-2">سلول 4</td>
</tr>
<tr>
<th>تیتر 3</th>
<td class="col-3">سلول 5</td>
<td class="col-3">سلول 6</td>
</tr>
</table>
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» آشنایی با HTML، زبان پایه کدنویسی وب
» لایه بندی در HTML با تگ div و span
» نحوه ایجاد لینک در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» کار با تگ فرم (form) در HTML
commentنظرات (۳۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محمد
۰۹:۴۶ ۱۳۹۴/۰۲/۲۷
سلام. من همیشه تو طراحی فضای از تیبل ها استفاده میکنم. ولی الان یه مشکل بزرگی دارم :(.
یک تیبل داریم که پوزیشن آن فیکس هستش و طول و عرض ان هم 100% هستش. یعنی کل صفحه. داخل تیبل دو تا سلول داریم.. ارتفاع یکی 20% و دیگری 80%. تا اینجا فکر میکنم واضح هست. البته اینم کد هاش :
<table width="100%" height="100%" style="border:1px solid black;position:fixed;left:0;top:0;">
<tr>
<td width="100%" height="20%" bgcolor="red">
<img src="exam\exam.png" width="100%" height="100%">
</td>
</tr>
<tr>
<td width="100%" height="80%" bgcolor="blue">
</td>
</tr>
</table>
تو این کدها اگه تگ img رو برداریم درست میشه... ولی اگه بزاریم خراب میشه! مگه ارتفاع td 20% نیست؟ پس باید هر چی داخلش هست از 20% بیش تر نشه!. قبلا سالم بود ولی الان نیست!
پاسخ: 
سلام
منظورتان از "درست میشه" و "خراب میشه" مشخص نیست! کدهایتان به ظاهر مشکل خاصی ندارند، با این حال ممکن است اشکال از وجود padding باشد که یا در استایل خود جدول یا در بخشی از استایل ها به صورت عمومی (برای تمام تگ های table یا td) تعریف شده باشد، همچنین cellpadding و cellspacing را برای جدول با مقدار صفر تنظیم کنید، border نیز می توانند باعث ایجاد عرض ناخواسته شود، برای اطمینان ابتدا جدول را بدون وجود استایل اضافه در صفحه تست نمائید.
نکته: طراحی قالب های وب با تگ table یک روش منسوخ شده است و بهتر است از بلاک های div استفاده شود، از جدول صرفا برای نمایش اطلاعات آماری یا دسته بندی شده باید استفاده نمود.
نویسنده: محمد
۱۸:۲۵ ۱۳۹۴/۰۲/۲۹
بازم سلام... آقا من میخوام ارتفاع عکس هم اندازه با ارتفاع td باشه... همون td که ارتفاش 20% هستش... ولی وقتی ارتفاع عکس رو 100٪ میزاریم تو کل صفحه میشه... به هر حال من هر جا خوندم اگر به یک شی مثل td اندازه بدی نباید از اون اندازه بیش تر بشه. مثلا 550 px میدیم به td و یه عکس هم داخل td میزاریم... ارتفاع عکس رو میزاریم 100٪ پس باید ارتفاع عکس بشه 550 px. ولی نمیشه. میرم سراغ div ها ولی شمام اگه منظورمو گرفتید کمکم کنید.
با تشکر
پاسخ: 
سلام
همان طور که گفتیم کد شما از این نظر مشکلی ندارد (تست شد!)، شاید در هنگام مقداردهی پیکسلی اشتباهی انجام می دهید، به طور مثال اگر از style برای td استفاده نکنید، نباید عبارت px را بعد از عدد درج کنید، یعنی باید به این صورت باشد:
<td width="550" height="250" bgcolor="red">
و به این صورت صحیح نیست:
<td width="550px" height="250px" bgcolor="red">
همچنین می توانید کدهایتان را (به صورت کامل) در یک صفحه قرار داده و آدرس آن را درج کنید تا بررسی کنیم.
نویسنده: سینا
۲۳:۳۰ ۱۳۹۴/۰۴/۱۹
سلام
میخواستم گوشه های جدول ها رو به صورت گرد در بیارم باید از چه کدی استفاده کنم؟
مثل این کد که میخوام دورشو بصورت گرد در بیارم
<td>محتوای جدول</td>
باتشکر
پاسخ: 
سلام
می وانید برای تگ های td استایل CSS زیر را در نظر بگیرید:
<style type="text/css">
td{
border:1px solid #999;
border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
-o-border-radius:8px 8px 8px 8px;
}
</style>
نکته: برای اعمال استایل به یک تگ، باید با بحث Class در CSS آشنا باشید.
نویسنده: راضیه
۱۵:۴۷ ۱۳۹۴/۰۹/۱۴
سلام خسته نباشید
من درون visual studio کد مینویسم میخوام از خاصیت cellspacing و cellpading استفاده کنم ولی مدام ارور میده که شناخته شده نیست چه در فایل css و چه html هیچکدام و قبول نمیکنه میشه راهنماییم کنید که در css چطور از این دو خصوصیت استفاده کنم؟؟؟
پاسخ: 
سلام
لطفا در این زمینه به سایت های مرتبط با ASP.NET مراجعه کنید، صرفا جهت راهنمایی:
ممکن است تنظیمات برنامه Visual Studio بر روی استفاده از استاندارد HTML 5 باشد، در اینصورت به جای خاصیت های مذکور باید از استایل CSS استفاده کنید (به عبارتی این خاصیت ها روی تگ table دیگر قابل استفاده نیستند!)، همچنین در نسخه HTML 4 باید تمام عبارت ها به حروف کوچک باشند!
نویسنده: آزادگان
۱۳:۰۵ ۱۳۹۴/۱۰/۰۵
باسلام ، ممنون از زحمات شما
من داخل یک div جدول ساخته ام ولی div کناری آن به پایین آمده و دقیقا از بعد از جدول شروع شده در صورتی که قبل از اینکه جدول را بسازم درست سر جایش بود چرا؟
پاسخ: 
سلام
بدون دیدن سورس کدها و تست صفحه نمی توان نظر خاصی داد، شاید اندازه جدول از عرض div دربرگیرنده آن بزرگتر است و بر بلاک مجاور تاثیر می گذارد!
نویسنده: angel face
۱۷:۲۷ ۱۳۹۴/۱۰/۲۷
ممنون خیلی عالی بود
نویسنده: سهیلا
۱۲:۴۲ ۱۳۹۴/۱۱/۱۵
سلام
من اندازه های جدولم رو با ویژگی width درست کردم فقط الان نمیدونم چطور اندازه هرکدم از فیلدهای یه ردیف هام رو هم هم اندازه کنم.
ممنون میشم راهنمایی کنید
پاسخ: 
سلام
سوال مبهم است! می توانید برای هر کدام از td ها یک کلاس CSS در نظر بگیرید.
نویسنده: لیلا
۱۴:۳۹ ۱۳۹۴/۱۱/۱۸
سلام وقت بخیر
قبلا از راهنمایی که میکنید ممنون
چطور میتونم ابتدا سلول های سمت راست جدول رو عنصر دهی کنم یعنی جدول به جای اینکه از سمت چپ پر بشه از سمت راست پر بشه
متشکر از وقتی که میزارید
پاسخ: 
سلام
هرچند دقیقا منظورتان مشخص نیست، اما به نظر با استفاده از خاصیت direction و مقدار rtl در CSS می توانید این کار را انجام دهید، مثال:
<table style="direction: rtl">
نکته: این فقط یک مثال و جهت درک مطلب است، در عمل تگ table برای نمایش حالت مورد انتظار، خاصیت های بیشتری خواهد داشت!
نویسنده: سمیرا
۱۲:۳۸ ۱۳۹۴/۱۲/۱۵
سلام
من تازه طراحی وب رو شروع کردم به یه مشکلی برخورد کردم
چطور میتونم محتویات سلولها رو توی جداولم راست چین یا وسط چین کنم؟
با تشکر
پاسخ: 
باید با CSS و خاصیت هایی مانند text-align آشنا باشید، در این صورت با اختصاص یک class به تگ مورد نظر می توانید چینش متن را تغییر دهید.
نویسنده: rita
۱۱:۵۳ ۱۳۹۵/۰۲/۲۷
بسیار عالی و مفید بود ممنون
نویسنده: Vishka
۱۶:۴۹ ۱۳۹۶/۰۸/۲۰
سلام
برنامه ای که تعدادسطر و ستون را بگیره و جدول مورد نظر را رسم کند یعنی در سایت جدول دلخواه و مورد نظر کاربر رسم شود
میشه راهنمایی کنید لطفا.
پاسخ: 
متاسفانه چنین برنامه ای را به صورت آماده در اختیار نداریم، احتمال اینکه در سایت های ارائه کننده اسکریپت آن را پیدا کنید وجود دارد که باید در وب جستجو نمائید.
نویسنده: آزاده
۱۷:۲۱ ۱۳۹۷/۰۲/۲۱
سلام روزتون بخیر
من میخوام بعد از رسم جدول و جایگزین مطالب جدول سطر و ستون جدول رو مخفی کنم .
مقدار border رو 0 رو قرار دادم اما جواب نگرفتم
پاسخ: 
علاوه بر border باید cellpadding و cellspacing را نیز 0 در نظر بگیرید.
<table width="300" border="0" cellpadding="0" cellspacing="0">
نویسنده: محمود
۱۱:۱۸ ۱۳۹۷/۰۶/۱۲
خیلی ممنون از راهنماییتان در مورد قبل.
چگونه میتوانم داخل textarea جدول یا ... درج کنم. و این جدول عینن به صفحه دیگر که می فرستم ، نشان داده شود. یعنی textarea تمام خصوصیات یک ویرایشگر را داشته باشد.
پاسخ: 
باید با اصطلاح WYSIWYG در وب آشنا باشید، WYSIWYG ها ادیتورهایی برای ویرایش مطلب و ارسال آن به سرور هستند که می توانید به فرض جدول را در آن طراحی و کدهای خروجی را به سرور ارسال و در دیتابیس ذخیره کنید، برای ایجاد WYSIWYG شخصی معمولا نیاز به تسلط بسیار بالا در برنامه نویسی وب و به طور خاص زبان JavaScript است به همین دلیل اغلب از برنامه های آماده و رایگان استفاده می شود، مثال:
https://htmleditor.io

https://www.tiny.cloud

https://ckeditor.com
نویسنده: امیر
۱۸:۲۳ ۱۳۹۷/۱۰/۰۶
سلام
امکان ایجاد یک جدول توی html هست بطوری که مثلا سه ستون داشته باشیم ولی تعداد ردیف‌ها رو کاربر مشخص کنه ردیف اول هم که مشخصاتیه که ما میدیم یعنی حداقل ۲ ردیف داره
ممنون
یا علی
پاسخ: 
ایجاد چنین حالتی با صرف تگ های HTML ممکن نیست، باید با ترکیب کدنویسی جاوا اسکریپت + HTML امکان ایجاد جدول داینامیک را به کاربر بدهید، مثال:
https://www.aspsnippets.com/Articles/Add-Insert-Remove-Delete-Table-Rows-dynamically-using-JavaScript.aspx
نویسنده: نوید
۰۱:۱۴ ۱۳۹۷/۱۲/۱۹
با عرض سلام خدمت شما اگر امکان داره میخواستم یک جدول که در سربرگ در ردیف اول که دارای دو سلول به شماره 1 و دو باشد در ادامه در ردیف دوم یک سلول در زیر سلول ردیف اول و در ادامه ردیف دوم سه سلول زیر مجموعه سلول دوم در ردیف یک باشد و عرض سلول 2 ردیف 1 با 3 سلول ردیف 2 یکی باشد و در ادامه هر کدام از سه سلول ردیف دوم به صورت افقی به دو نیم تقسیم و نیمه پایین به صورت عمودی به دو نیم تقسیم بشه امکانش هست با کد به همچین تقسیم بندی برسیم و اگر امکانش باشه واستون تصویر جدول رو ارسال کنم
پاسخ: 
لطفا تصویر جدول مد نظرتان را آپلود و آدرس را ارسال کنید تا بررسی گردد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





7 × 1
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form عبدالمالت ریالی
در:
سلام علیک میشه از چند فونت در یک صفحه html استفاده کرد.؟
۱۳۹۹/۰۸/۰۱

form مبینا
در:
سلام من برنامه ای میخواستم که داخل ارایه 5 رنگ قرار گرفته باشه. و با استفاده از حلقه for این یک متنو به اون پنج...
۱۳۹۹/۰۸/۰۱

form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

form فایز پور جهانبخشی
در:
سلام اگر بخواهیم برنامه ای که داخل متلب نوشتیم تا یک ثانیه اجرا شود و بعد از ثانیه اول در حالت خطا که...
۱۳۹۹/۰۷/۲۸

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

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

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

form فاطمه
در:
سلام ممنونم... خیلی ساده و روون توضیح دادین.. اونقدر که تشویق شدم محتوای یه فایل تکس رو با ایجکس درون یه div بیارم ولی...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
خب متوجه شدم. که باید خط اول عدد فانکشن رو تغییر بدم. بسته به تعداد آرایه یا هر عدد دیگه تغییر بدم جوابمو...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.