جدول ها در اچ تی ام ال

تعریف کردن یک جدول

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

<table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>ناماستان</th>
<th>نامشهرستان</th>
</tr>
<tr>
<td>خراسانرضوی</td>
<td>مشهد</td>
</tr>
<tr>
<td>خراسانشمالی</td>
<td>بجنورد</td>
</tr>
</table>

در داخل جدول، تگ <td> برای قرار دادن داده ها استفاده می شود. می توانیم در داخل این تگ ها هر نوع عنصر اچ تی ام ال، مثل متن، تصویر، لیست، یک جدول دیگر یا ... را قرار داد.

تبدیل چند ستون یا خانه جدول به یک ستون یا یک خانه

خیلی وقت ها ممکن است بخواهیم چند خانه جدول را به یک خانه تبدیل کنیم. برای اینکه بتوانیم این کار را انجام دهیم، دو خصیصه(Attribute) وجود دارند: collspan و rowspan.
اگر بخواهیم در یک ردیف، چند خانه کنار هم را به یک خانه تبدیل کنیم باید از collspan استفاده کنیم. مقدار این خصیصه برابر با تعداد خانه هایی است که می خواهیم به یک خانه تبدیل شود. البته مسلما باید برای این کار حواسمان به تعداد کل خانه های آن ردیف باشد:

نام	شماره تلفن
مهرداد یوسفی فرد	شماره تلفن اول	شماره تلفن دوم

<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>نام</td>
<td colspan="2">شماره تلفن</td>
</tr>
<tr>
<td>مهردادیوسفی فرد</td>
<td>شماره تلفن اول</td>
<td>شماره تلفن دوم</td>
</tr>
</table>

اگر بخواهیم چند ردیف را با هم ترکیب کنیم از خصیصه rowspan استفاده می کنیم:

نام	مهرداد یوسفی فرد
شماره تلفن	تلفن اول
	تلفن دوم

<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>نام</td>
<td>مهرداد یوسفی فرد</td>
</tr>
<tr>
<td rowspan="2">شماره تلفن</td>
<td>تلفن اول</td>
</tr>
<tr>
<td>تلفن دوم</td>
</tr>
</table>

نوشتن عنوان برای جدول

اگر بخواهیم برای جدول یک عنوان کلی داشته باشیم، این کار را با استفاده از تگ <caption> انجام می دهیم. البته توجه داشته باشید که حتما باید این تگ را بلافاصله بعد از تگ <table> قرار دهیم:

عنوان جدول

نام استان	نام شهرستان
خراسان رضوی	مشهد
خراسان شمالی	بجنورد

<table width="30%" border="0" cellspacing="0" cellpadding="0">
<caption>عنوان جدول</caption>
<tr>
<th>نام استان</th>
<th>نام شهرستان</th>
</tr>
<tr>
<td>خراسان رضوی</td>
<td>مشهد</td>
</tr>
<tr>
<td>خراسان شمالی</td>
<td>بجنورد</td>
</tr>
</table>