آشنایی با جدول در HTML

HTML   
18 آگوست 2014   

جدول ها در سایت بسیار پرکاربرد هستند و حتی گاهی اوقات خود سایت را براساس جدول ها طراحی می کنند. هر جدول شامل ردیف هایی است و هر ردیف شامل ستون هایی است. تگ های ردیف بین تگ شروع و پایان جدول و تگ های ستون در بین تگ های شروع و پایان ردیف قرار می گیرند.مانند ساختار زیر:

شروع جدول

            شروع ردیف1

                        شروع ستون1

                                    مقدار داخل خانه 1

                        پایان ستون 1

                        شروع ستون2

                                    مقدار داخل خانه 2

                        پایان ستون 2

            پایان ردیف 1

پایان جدول

و کد آن به صورت زیر است:

 

تگ جدول با <table> شروع و با </table> به پایان می رسد. ساختار کلی آن به شکل زیر است:

 

ویژگیborder:

این ویژگی قطر خطوط جدول را تعیین می کند نه تنها مرز و لبه ی کنار آن را.

ویژگیbgcolor:

این ویژگی رنگ زمینه تمام جدول را تعیین می کند.

ویژگیwidth:

عرض کل جدول را تعیین می کند. این ویژگی به دو حالت می تواند مقداردهی شود: با پیکسل و با درصد.

توصیه می شود که همیشه این مقدار را به صورت درصد وارد کنید چرا که ممکن است گاهی در مرورگر صفحه بزرگنمایی (zoom) شود و آنگاه اگر این ویژگی با پیکسل مقداردهی شود در صفحه اختلال ایجاد می شود.

اگر این ویژگی مقداردهی نشود، عرض آن براساس محتویات درون سلول ها تقسیم بندی می شود.

ویژگیalign:

این ویژگی مکان جدول را مشخص می کند که شامل سه مقدار می باشد:

Left: چپ

Center: وسط

Right: راست

ویژگیbordercolor:

این ویژگی رنگ خطوط جدول را تعیین می کند. ورودی این ویژگی می تواند نام یک رنگ و یا شماره آن باشد. نام و شماره رنگ ها قبلا گفته شده است.

ویژگیcellpadding:

این ویژگی فاصله مقدار داخل یک سلول تا خطوط مرزی جدول را تعیین می کند. ورودی آن یک مقدار عددی به مقیاس پیکسل می باشد.

ویژگیCellspacing:

این ویژگی فاصله میان خانه های جدول را تعیین می کند. ورودی آن یک مقدار عددی به مقیاس پیکسل می باشد.

ویژگیdir:

ورودی آن می تواند rtl(راست به چپ) و یا ltr(چپ به راست) باشد. اما توصیه می شود همیشه مقدار آن بر روی ltr تنظیم شود زیرا ساختار جدول را به هم می زند.

ویژگیtitle:

توضیجات لازم برای این ویژگی گفته شده است.

ویژگیvspace:

فاصله میان جدول و دیگر صفات صفحه از بالا و پایین را تنظیم می کند. ورودی آن یک مقدار عددی با مقیاس پیکسل می باشد.

ویژگیhspace:

فاصله میان جدول و دیگر صفات صفحه از چپ و راست را تنظیم می کند. ورودی آن یک مقدار عددی با مقیاس پیکسل می باشد.

تگ <tr>:

این تگ ردیف های یک جدول را تنظیم می کند. ساختار کلی آن به شکل زیر است:

 

از گفتن صفاتی که پیش از این گفته شده پرهیز می کنیم.

تنها ویژگی جدید، ویژگی valign است که محل قرارگیری عمودی محتویات آن را تنظیم می کند. ورودی این ویژگی یکی از مقادیر زیر است:

Bottom: پایین

Middle: وسط

Top: بالا

تگ <td>:

این تگ در ساختار ستون های یک ردیف کاربرد دارد. ساختار کلی آن به صورت زیر می باشد:

تمامی صفات پیش تر توضیح داده شده است.

تگ <th>:

این تگ مانند تگ <td> می باشد. با این تفاوت که این تگ برای خانه هایی کاربرد دارد که سرگروه هستند.

در انتها با یک مثال موضوع جداول را روشن تر می کنیم.

می خواهیم لیست نمرات چند دانش آموز فرضی را درون یک جدول به نمایش درآوریم. تصویر انتهایی چنین خواهد بود:

کار با جدول ها در HTML

بنابراین کد این جدول هم چنین باید باشد: