کاربرد جدول در صفحات 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>
<!-- http://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>