آگهی
article

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

html-table

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

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


فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند، البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید، به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و... استفاده کرد.

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


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

ویژگی align


ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه
<table align="right">
</table>

ویژگی background


ویژگی background تصویر پس زمینه جدول را تعریف می کند که مقادیر آن باید با آدرس تصویر مورد نظر، جایگزین شود.
<table background="../html.jpg">
</table>

ویژگی bgcolor


ویژگی bgcolor در یک جدول، رنگ پس زمینه آن را تعیین می کند و با مقادیر کدهای هگز مشخص می شود.
<table bgcolor="#CCCCCC">
</table>

ویژگی border


ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و... تعیین می شود.
<table border="1">
</table>

ویژگی bordercolor


ویژگی bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند، مقادیر این ویژگی نیز با کدهای هگز تنظیم می شود.
<table border="1" bordercolor="#FF6600">
</table>
علاوه بر این، دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که در مرورگر اینترنت اکسپلورر و برخی مرورگرهای دیگر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.
<table border="1" bordercolor="#FF6600" bordercolordark="#FFCC00">
</table>

ویژگی cellpadding


ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.
<table border="1" cellpadding="4">
</table>

ویژگی cellspacing


ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4">
</table>

ویژگی height


برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 و... باشد که در واقع نمایانگر تعداد پیکسل است.
<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>

ویژگی width


ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800">
</table>

ویژگی rules


ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار زیر تنظیم می شود.
all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
cols: خطوط در راستای ستون ها ترسیم می شود.
rows: خطوط در راستای ردیف ها ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all">
</table>

ویژگی title


از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all" title="عنوانی برای جدول">
</table>

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


از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.
<table border="1">
<tr>
</tr>
</table>

ایجاد سرتیتر ها با تگ th


تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.
<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>

ویژگی های فرعی تگ 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>

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


همانطور که پیش تر گفتیم، table به تنهایی معمولا کاربرد خاصی ندارد و سلول های ساخته شده با th و td هستند که به آن فرم می دهند، تگ td سلول های داخلی و در واقع محتوای داخل یک جدول را دربرمی گیرد.
<table border="1" bordercolor="#FF6600">
<tr>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای درون سلول های جدول</td>
</tr>
</table>
بیشتر مواردی که در مورد تگ th گفتیم، در باره تگ td نیز به همان صورت کاربرد دارند، افزون بر این، ویژگی nowrap با مقادیر nowrap را نیز می توان به آن افزود، از nowrap برای نمایش یک متن، در یک سطر، بدون شکستگی استفاده می شود، البته این ویژگی ممکن است در برخی نسخه های html معتبر نباشد و بهتر است به جای آن از css استفاده کنید (white-space: nowrap).

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


تگ caption در جداول، برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.
<table border="1" cellpadding="4" cellspacing="4">
<caption>عنوان جدول</caption>
<tr>
<th rowspan="2" valign="middle">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

گروه بندی ستون ها با تگ 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 مطالب بیشتر:
» کاربرد تگ font و ویژگی های فونت در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
» کار با تگ فرم (form) در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
commentنظرات (۳۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: فرشته
زمان: ۰۲:۳۴:۴۶ - تاریخ: ۱۳۹۸/۰۴/۱۲
چطور میشه برای یک تیبل دکمه حذف برای هر ستون و ویرایش گذاشت؟ تا بشه جدول رو تغییر داد؟ 😥
پاسخ: 
اول باید مشخص کنید ویرایش مد نظرتان صرفا در سمت کاربر و جدولی است که در مرورگر نمایش داده می شود یا نیاز است که اطلاعات موجود در دیتابیس نیز به روزرسانی شوند؟ در هر حال برای انجام این موارد نمی توانید به صرف HTML اکتفا کنید و بسته به مورد باید با JavaScript، PHP و کار با MySQL آشنا باشید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




3 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

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

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

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

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

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

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی