جدول های html

---

مثال ها

چگونگی ایجاد جداول در یک سند HTML                                                   جدول ها

چگونگی مشخص کردن حاشیه های مختلف جدول                          حاشیه های جدول

( شما مثال های بیشتری را در پایین این صفحه می توانید پیدا کنید)

---

جدول های HTML

جدول ها بوسیله برچسب <table> تعریف می شوند هر جدول به سطرها

(بوسیله برچسب <tr>) و هر سطر به سلول های داده تقسیم می شود

(بوسیله برچسب <td>) ، حروف td بیانگر داده جدولی (table data) هستند که حاوی

سلول داده است یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ،

فرم ها ، خط های افقی و جدول ها و... باشد

row1,cel1 row1,cel2 row2,cel1 row2,cel2

<table border="1"> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> <tr> <td>row1,cel1</td> <td>row1,cel1</td> </tr> </table>

---

جدول های HTML و صفت حاشیه(Border)

اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی

اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان

داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border)

استفاده کنید.

row1,cel1 row1,cel2 row2,cel1 row2,cel2

<table border="1"> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> <tr> <td>row1,cel1</td> <td>row1,cel1</td> </tr> </table>

---

سرتیترها در جدول ها

سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

Another Heading Heading row1,cel2 row1,cel1

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> </table>

---

سلول های خالی در جدول ها

سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.

row1,cel2 row1,cel1 row2,cel1

<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td></td> </tr> </table>

این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف

سلول خالی جدول از بین رفته است

(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد) برای جلوگیری از آن یک فاصله نا

مقطوع (;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

row1,cel2 row1,cel1   row2,cel1

<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td> &nbsp; </td> </tr> </table>

---

مثال های بیشتر

چگونگی ایجاد جدول های بدون جاشیه                               

چگونگی ایجاد سرتیترهای جدول                                     

چگونگی اضافه کردن عنوان به جدول                               

توسعه سلول جدول به بیش از یک سطر یا ستون

چگونگی نمایش عناصر داخل عناصر دیگر

روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه آن

چگونگی ایجاد فاصله بین سلول ها

نحوه استفاده از صفت قالب برای کنترل حاشیه های اطراف جدول

---

برچسب های جدول HTML

برچسب	توضیحات
<table>	یک جدول معرفی می کند
<th>	سرتیتر جدول معرفی می کند
<tr>	یک سطر جدول معرفی می کند
<td>	یک سلول جدول معرفی می کند
<caption>	عنوان جدول معرفی می کند
<colgroup>	یک گروه از ستون ها معرفی می کند
<col>	یک مقدار موجودیت برای یک یا چند ستون معرفی می کند
<thead>	سر یک جدول را معرفی می کند
<tbody>	بدنه یک جدول را معرفی می کند
<tfoot>	پاورقی جدول را معرفی می کند